요소의 크기를 계산하기 위한 기준을 지정하는 속성은 "box-sizing"입니다. "box-sizing" 속성은 CSS에서 사용되며, 요소의 크기를 계산할 때 내용(content), 여백(padding), 테두리(border), 그리고 여백(margin)의 어떤 부분을 포함할지를 결정합니다.
"box-sizing" 속성은 다음 두 가지 주요 값으로 설정됩니다:
- content-box (기본값): 요소의 크기 계산에 내용(content) 부분만을 포함합니다. 여백, 테두리 및 여백은 크기에 포함되지 않습니다.
- border-box: 요소의 크기 계산에 내용(content), 여백(padding), 테두리(border)를 포함합니다. 따라서 이 값은 요소의 전체 크기를 제어하게 됩니다.
예를 들어, border-box 값을 사용하면 요소의 크기가 내용, 여백, 테두리를 모두 포함하여 더 직관적으로 크기를 제어할 수 있습니다. 이것은 반응형 디자인 및 레이아웃 설계 시에 특히 유용합니다.
'프론트엔드 > HTML' 카테고리의 다른 글
| html 로그인 디자인 (0) | 2024.02.05 |
|---|---|
| position 속성의 기본값은 static 이다. (0) | 2023.10.26 |
| grid 활용2 (문으로 이용한 활용) (0) | 2023.10.25 |
| grid 활용법 (0) | 2023.10.25 |
| CSS 띄움을 이용한 실습 (0) | 2023.10.25 |