꾸준히 성장하는 개발자

https://getbootstrap.com/ Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com 위의 예시를 보면 버튼에 danger, info 등에 색상이 커스터마이징 된 것을 볼 수 있다. Customize에서 Color 로 들어오면 지정된 $theme-color을 확인할 수 있다. 이걸 복사해서 커스터마이즈 할수 있는 곳에 붙여넣기 해준다 나는 scss파일에 넣어주었다. 그리고 아래 적혀있는 our Sass maps... url로 따라 들어가면 아래와 같이 있는데 @import "../node_modules/bootstrap/scss/functions"; 를 내 프로젝트 scss파일의 제일 위에 넣어..

https://getbootstrap.com/ Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com 이렇게 link태그와 script태그를 통해서 bootStrap을 손쉽게 가져올수 있지만 약간의 기능제한이 있다. 그래서 npm 프로젝트로 관리를 진행한다. 1. 터미널을 열어 npm init -y 을 입력하여 package.json파일을 만들어 준다. 2. npm i -D parcel-bundler 입력하여 개발의존성으로 설치한다. 3. 설치가 다 되면 package.json파일을 열어 devDependencies부분에 "parcel-bundler": "^1.12.5"이 잘 설치가 되었는지 확인한다. 4. "..

https://getbootstrap.com/docs/5.1/components/tooltips/ Tooltips Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storage. getbootstrap.com BootStrap의 tooltip은 다른 것들과는 다르게 성능상의 문제로 초기화를 해주어야 한다. 초기화하는 방법: 아래 코드를 js파일에 넣어준다 var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-..

https://getbootstrap.com/ Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com 프론트엔드 프레임워크 각종 레이아웃, 버튼, 입력창 등의 디자인과 기능을 CSS와 JavaScript로 만들어 놓은 것 SCSS로도 활용이 가능하다 이번에 v5로 되면서 트리쉐이킹(단일 번들을 최적화할 때 사용되는 필요하지 않은 코드를 제거하는 기술을 말한다.) 기능이 공식적으로 지원이 된다. 예를 들면 위 Button 처럼 class로 위처럼 넣게 되면 설정되어 있는 디자인이 나타나게 된다.