[CSS] CSS를 알아보자! (SMASS/BEM/OOCSS ,SASS/SCSS/LESS)
CSS를 알아보자! 1. 방법론 (SMASS, BEM, OOCSS) 2. 전처리도구(SASS/SCSS/LESS) CSS를 지금껏 사용했지만 사실 전처리도구(SASS/SCSS/LESS) 등을 사용해보지 않았다. 지금까지 너무 게으르게 살았던듯... ㅜㅜ 다시 정신차리고 공부하는 삶을 살아야겠다. 목표1 : 몇가지 방법론을 살펴보고 한가지를 선택해서 적용! 목표2 : 전처리기를 사용하여 작업! 1. 방법론 (SMASS, BEM, OOCSS) 1-1. CMASS(Scalable and Modular Architecture for CSS) 참고 - https://smacss.com/ SMACSS의 핵심은 분류이다. CSS 규칙을 범주화 함으로써 패턴을 설정한다. SMACSS는 5가지의 규칙 이 있다. Base - 기본스타일 Layout - 엘리먼트를 나열하는 것과 관련된 스타일 Module - 재사용을 위해 하나로 묶는 스타일 State - 상태변경을 위한 스타일 Theme 프리픽스(preifx) 를 사용하여 layout, state, module 규칙을 구별한다. layout : l- module : 모듈의 이름을 사용 state : is- [Base] html, body, form { margin: 0; padding: 0; } input[type=text] { boarder: 1px solid #999; } a { color: #039; } a:hover { color: #03C; } -> CSS reset 과 같은부분 [Layout] Layout은 ID 선택자를 사용해도 된다. #header, #article, #footer { width: 960px; margin: auto; } #article { border: solid #CCC; border-width: 1px 0 0; } #article { ...