반응형
bem
-
CSS 클래스명을 정돈해보자 BEM ( Block, Element, Modifier ) 방법론Knowledge/HTML & CSS 2019. 11. 14. 15:06
- BEM BEM은 Block(블럭), Element(요소), Modifier(블럭 또는 요소의 속성)을 활용한 CSS 클래스 작성법이다. - Block Block은 어떤 요소를 담고 있는 컨테이너를 의미한다. 예를 들어 웹이 header, footer, sidebar, article 의 구조로 이루어져 있다면 이런 것들을 block이라 할 수 있다. block은 그냥 block의 이름을 클래스 명으로 적어주면 된다 1 2 3 4 5 6 .block {} /* ex */ .header {} .footer {} - Element element(요소)는 블럭이 포함하고 있는 한 조각을 의미한다. 그렇기 때문에 요소는 블럭의 클래스명을 적고 두 개의 밑줄 표시 (__)를 해준다음 요소명을 붙여주면 된다 1 2..