오늘은 css 클래스 네임을 어떻게 지으면 좋을지 고민하는 시간을 가져보도록 하자!
1. BEM의 기본 구조
- BEM은 Block, Element, Modifier를 뜻한다.
- 저 세가지를 이용하여 각각 __와 --로 구분한다.
① 블럭(Block) : 문단 전체에 적용된 요소 또는 요소를 담고 있는 컨테이너를 말한다
.header { property: value; }
.footer {{ property: value; }
② 요소(Element) : 블럭이 포함하고 있는 한 조각이다 (__로 표시)
.header__logo { property: value; }
.header__tagline { property: value; }
.header__searchbar { property: value; }
.header__navigation { property: value; }
③ Modifier : 요소의 상태를 표현한다(--로 표시)
.header__navigation‐‐secondary {…}
* bem의 장점
- class name 중복을 방지한다
- 직관적이다
'웹 > CSS' 카테고리의 다른 글
[코딩 공부_37] 인스타그램 실습하기 (0) | 2021.03.23 |
---|---|
[코딩 공부_36] CSS로 카카오 실습 꾸미기 (0) | 2021.03.17 |
[코딩 공부_34] css 복습하기 (0) | 2021.03.14 |
[코딩 공부_33] css, 가로·세로 중앙정렬하기 (0) | 2021.03.13 |
[코딩 공부_32] wiki.html을 css로 꾸며보자 (0) | 2021.03.12 |
댓글