Block Element Modifier

7개 레벨

BEM은 웹 개발에서 CSS 클래스 이름을 구조적으로 짓는 방법이에요. 블록, 요소, 수정자로 나뉘어 각각의 역할을 명확하게 해주죠. 이렇게 하면 코드 유지보수가 쉬워지고 협업이 용이해요.

스킬 여정을 시작하세요

7개의 레벨을 통해 체계적으로 학습하고, 커리어 성장의 기반을 다지세요.

7 레벨 로드맵

단계별 역량 인증

학습 로드맵

7개 레벨

전체 7

Lv 1. BEM의 개념을 알아요

1. CSS 네이밍 컨벤션 필요성
2. BEM 개념 이해
3. Block 정의
4. Element 정의
5. Modifier 정의

연습 문제

1.
블록, 엘리먼트, 수정자별로 CSS 규칙을 적용해보기
2.
예제 HTML에 BEM 방식으로 Block/Element/Modifier 클래스 추가하기

Lv 2. BEM 명명 규칙을 숙지할 수 있어요

Lv 3. BEM으로 UI 컴포넌트를 구현할 수 있어요

Lv 4. Sass 기초를 활용할 수 있어요

로그인하고 더 많은 레벨을 확인하세요

Lv 5. Sass로 BEM 구조를 모듈화할 수 있어요

Lv 6. 린트 도구로 BEM 규칙을 검증할 수 있어요

Lv 7. React 프로젝트에 BEM을 적용할 수 있어요

이 스킬로 지원할 수 있는 채용공고