BEM은 Block, Element, Modifier의 앞글자만 딴 용어로 프론트엔드 개발에서 클래스 명을 정하는 네이밍 컨벤션이다. Block__Element--Modifier 형식으로 작성한다. Block 어딘가에 종속적이지 않고 그 자체로서 의미가 있어야 하며, 일반적으로 Element의 컨테이너 역할을 한다. header, container, menu 같이 무언가를 담을 수 있는 것뿐만 아니라 button, checkbox, input 같이 무언가를 담지 않더라도 그 자체로서 의미를 가진다면 Block이 될 수 있다. Element Block을 구성하는 요소다. Block에 의존적이며, 자신이 속한 Block 내에서만 의미를 가진다. header title, menu item, checkbox c..

CSS에서 자주 사용하는 값은 변수에 저장해놓고 사용하자. 기본적인 문법 div { --default-font-color: red; } p { color: var(--default-font-color); } div에서 변수를 선언하고, p에서 변수를 사용한다. 이때, 변수의 범위는 변수를 선언한 그 자신과 하위 요소로 제한된다. 첫 번째 단락 두 번째 단락 즉 이러한 문서가 있을 때, 첫 번째 단락은 변수가 적용되어 빨간색으로 나오지만, 두 번째 단락은 변수가 적용되지 않아 기본 색상으로 표시된다. p { color: var(--default-font-color, blue); } 변수가 적용되지 않을 것을 대비해 대체 값을 지정할 수도 있다. 사용법 :root { --default-font-color: ..

Box Model(박스 모델)이란? 문서의 레이아웃을 계산할 때, 하나의 박스는 위 사진과 같이 네 부분으로 이루어진다. 컨텐츠 영역(Content Area) 패딩 영역(Padding Area) 테두리 영역(Border Area) 마진 영역(Margin Area) CSS에서 box-sizing 속성이 기본값인 content-box일 때, width, height 같은 속성으로 크기를 지정하면 padding, border, margin을 제외한 컨텐츠 영역의 크기만을 지정하는 것이다. box-sizing 속성이 border-box일 때, width, height 같은 속성으로 크기를 지정하면 padding, border를 포함하고, margin은 제외하는 테두리 영역의 크기를 지정하는 것이다. 사이즈 계산..