필요기능만 가져와 사용할 수 있고 커스텀 할 수 잇다. 1. 프로젝트 생성 하여 Bootstrap 추가 1) NPM 프로젝트 생성 2) Bootstrap 사이트 에서 npm 명령어 복사 Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins. getbootstrap.com 3) 터미널에서 설치 실행 해당 package.json파일에서 내용이 확인 가능하다. npm install bootstrap@5..

SCSS 문법 1. 주석 /**/ 또는 // 기존 사용하는 css 주석 이외에 javascript 주석도 함께 이용가능하다. /**/ : css 변환 후에도 주석이 남아있다. // : css 변환 후 주석이 남아있지 않는다. .container{ h1 { color: $color; /*background:#000*/ // font-size:20px } } 2. 변수 설정 $명칭 = 값 유효범위를 설정 할 수 있다. 2-1. 전역변수 📑 SCSS $color : royalblue; .container{ color: $color; } 📑 CSS /* CSS 전역 변수 선언 */ :root { --color: royalblue; } .container{color: var(--color);} 2-2. 지역 변수..

SCSS를 사용한 프로젝트 CSS 전 처리 도구 , css를 좀더 쉽게 사용하기 위한 도구이다. 문법을 두가지 지원을 한다. SCSS , SASS ( ※ SASS는 기존 CSS문법과 호환이 잘 되지 않는 문제점이 있다.) 실제로 웹에서 동작하기 위해서는 작성한 문법을 CSS로 변환( 컴파일 )해야한다. 1. 사용이유 중첩기능 / 변수 ( CSS에서도 변수 현제 사용 가능 ) / 등 유용한 기능 사용 Sass: Syntactically Awesome Style Sheets Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass-lang.com 2. 프로젝트 생성 2-1.프..