박스 모델은 HTML 요소가 사각형 박스 형태로 구성되어 있는 개념으로 요소를 배치하는 데 기본이 됩니다.
구성 요소 :
- 내용 (Content) : 요소 내부의 텍스트나 이미지
- 패딩 (Padding) : 내용과 테두리 사이의 내부 여백
- 테두리 (Border) : 패딩과 마진 사이의 경계선
- 마진 (Margin) : 요소의 외부 여백
블록 요소와 인라인 요소
블록 요소 :
- 한 줄을 독립적으로 차지하며 수직으로 쌓입니다.
- 너비와 높이를 지정할 수 있습니다.
- 예 : `<h1> , <p> , <div>`
인라인 요소 :
- 내용에 맞춰 공간을 차지하며 수평으로 배치됩니다.
- 너비와 높이를 지정할 수 없으며 수평 여백만 적용됩니다.
- 예 : `<a> , <span> , <img>`
박스 모델 구성 요소
크기 설정 : width , height 속성으로 콘텐츠 영역의 크기를 지정합니다.
- 속성값 : 픽셀(px) , em , 백분율(%) , auto
box-sizing :
- border-box : 패딩과 테두리를 포함한 너비
- content-box : 콘텐츠 영역만 너비로 지정 (기본값).
border 속성 :
- border-width : 테두리의 두께
- border-style : 테두리의 모양
- border-color : 테두리의 색상
- border : 여러 속성을 한 번에 지정할 수 있는 축약 속성
border-radius : 모서리를 둥글게 처리합니다.
margin :
- 여백을 설정하는 속성으로 margin-top , margin-right , margin-bottom , margin-left 로 개별 설정 가능
- 수평 가운데 정렬 : margin-left : auto ; margin-right : auto;
마진 상쇄 : 세로로 배치된 요소의 마진이 겹칠 때 큰 쪽으로 상쇄되는 현상
padding : 내용과 테두리 사이의 여백을 설정합니다. 사용법은 margin과 유사합니다.
overflow : 요소의 내용이 넘칠 때의 처리 방식
- 속성값 : hidden , scroll , auto
CSS 박스 모델 활용
박스 모델을 적절하게 활용하여 위치와 여백을 조절하고 웹 페이지의 레이아웃을 구성할 수 있습니다.
display 속성
정의 : 요소의 배치 방식을 지정합니다.
주요 속성값 :
- block : 요소를 블록으로 설정
- inline : 요소를 인라인으로 설정
- inline-block : 인라인 요소처럼 배치하되 크기 변경 가능
- none : 요소를 화면에서 숨김
float 속성
정의 : 요소를 문서의 왼쪽 또는 오른쪽으로 배치하는 데 사용합니다.
clear : float 속성을 해제하여 이후 요소의 배치를 조정합니다.
