Posts 견고한 UI 설계를 위한 마크업 가이드 - 웹은 덩어리, 구성요소, 변형의 반복
견고한 UI 설계를 위한 마크업 가이드 - 웹은 덩어리, 구성요소, 변형의 반복
Cancel

견고한 UI 설계를 위한 마크업 가이드 - 웹은 덩어리, 구성요소, 변형의 반복

견고한 UI 설계를 위한 마크업 가이드 강의를 봅시다.


BEM

Block
재사용 가능한 독립적인 블록.

Element
블록을 구성하는 종속적인 하위 요소.
엘리먼트는 무조건 블록에 종속한다. 엘리먼트 혼자 존재할 수 없음.

Modifier
블록 또는 요소의 변형(모양, 상태, 동작)
하나의 블록 / 엘리먼트 스타일을 확정하거나 다르게 만들 때는 Modifier를 붙인다.


BEM의 특징

  • 의미론적 클래스 선택자 작명 규칙
  • 다른 형식의 선택자 사용을 제한
  • 전역에서 유일한 이름 권장
  • 낮은 선택자 특이성 유지
  • HTML/CSS연결이 느슨, 병렬 개발 가능

BEM 명명 규칙

  • 두 개의 언더바(__)는 하위 요소를 의미
  • 두 개의 하이픈(–)은 상태 변형을 의미
  • 하나의 이름에 요소, 변형은 각 한 번만 허용.

사용 예시

  • .block
  • .block__element
  • .block__element–modifier
  • .block–modifier

BEM 선택사항

키워드 연결 방법

  1. PascalCase
  2. camelCase
  3. kebab-case
  4. snake_case

This post is licensed under CC BY 4.0 by the author.

견고한 UI 설계를 위한 마크업 가이드 - HTML 개요 알고리즘 이해

견고한 UI 설계를 위한 마크업 가이드 - 웹은 덩어리, 구성요소, 변형의 반복

Comments powered by Disqus.