-
박스 모델(box model), 컨텐츠(content) 영역프로그래밍/HTML&CSS 2022. 9. 1. 21:52728x90
CSS 박스 모델은 웹 문서의 내용을 박스 형태로 정의하는 방법을 의미하며 이러한 박스 모델들이 모여 웹 문서를 이루고 박스 모델에는 마진, 패딩, 테두리 등 박스가 여러겹 포함된 형태를 띈다.
박스 모델은 웹 문서의 블록 요소의 특징을 갖는 모든 박스를 박스 모델로 취급하는데, 박스 모델에는 컨텐츠 영역과, 박스 테두리와 컨텐프 영역 사이의 영역인 패딩의 영역과 박스의 테두리, 박스간의 사이 공간인 마진의 영역을 구성되어있다. 이때 마진과 패딩은 웹 문서에서 다른 컨텐츠 사이의 간격이나 배치 등을 고려할 때 필요한 개념이다.
박스 모델 컨텐츠 영역
텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분으로 박스 모델에서 컨텐트 영역의 크기를 지정할 때 너비는 width, 높이는 height 속성을 사용한다.
종류 설명 <크기> 너비나 높이의 값을 px이나 em 단위로 지정 <백분율> 박스 모델을 포함하는 부모 요소를 기준으로 너비값과 높이값을 백분율(%)로 지정 auto 박스 모델의 너비값과 높이값이 컨텐츠의 양에 따라 자동으로 결정됨 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>박스모델</title> <style> div{ width: 400px; height: 200px; border: 1px solid red; padding: 0; margin: 0; } </style> </head> <body> <h2>content</h2> <div>content 영역</div> </body> </html>
content 영역 728x90'프로그래밍 > HTML&CSS' 카테고리의 다른 글
테두리(border) (0) 2022.09.02 블록(block) 요소와 인라인(inline) 요소 (0) 2022.09.01 배경 관련 스타일 (0) 2022.08.31 텍스트 관련 스타일 (1) 2022.08.30 글꼴 관련 스타일 (0) 2022.08.29