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은 제외하는 테두리 영역의 크기를 지정하는 것이다. 사이즈 계산..