박스 모델
(Box Model)
모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부른다.
박스 모델은 HTML요소를 다음 네가지로 구분한다.
-
내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분.
-
패딩(padding) : 내용과 테두리 사이의 간격. 패딩은 눈에 보이지 않는다.
-
테두리(border) : 내용와 패딩 주변을 감싸는 테두리.
-
마진(margin) : 테두리와 이웃하는 요소 사이의 간격. 마진 또한 눈에 보이지 않는다.
CSS에서 height와 width 속성을 설정할 때 그 크기가 가르키는 부분은 내용(content) 부분만을 대상으로 한다.
HTML 요소의 height와 width 속성으로 설정된 높이와 너비에 패딩(padding), 테두리(border), 마진(margin)의 크기는 포함되지 않는다.
패딩
(padding)
-
내용과 테두리 사이의 간격인 패딩 영역의 크기를 설정한다.
-
이러한 패딩 영역은 background-color 속성으로 설정하는 배경색의 영향을 함께 받는다.
-
CSS를 사용하면 패딩 영역의 크기를 방향별로 따로 설정할 수 있다.
<style>
div.pad {
padding-top: 50px;
padding-right: 10px;
padding-bottom: 30px;
padding-left: 100px;
}
</style>이런식으로 top, right, bottom, left 속성을 써서 따로 설정할 수도 있지만, 간단한 축약 방법이 있다.
padding: 10px;
: 상하좌우 모든 패딩값을 10px로 정한다.
padding: 10px 20px;
: 상하의 패딩값을 10px, 좌우의 패딩값을 20px로 정한다.
padding: 10px 20px 30px
: 상단의 패딩값을 10px, 좌우의 패딩값을 20px, 하단의 패딩값을 30px로 정한다.
padding: 10px 20px 30px 40px
: 상단, 우측, 하단, 좌측 순으로 패딩값을 각각 10, 20, 30, 40px로 정한다.
이 방식으로 border와 margin 또한 상하좌우의 값을 다르게 설정하거나 축약해서 표현할 수 있다.
테두리
(border)
내용과 패딩 영역을 둘러싸는 테두리의 스타일을 설정한다.
속성
border-style
- 테두리를 다양한 모양으로 설정할 수 있다.
- dotted : 테두리를 점선으로 설정함.
- dashed : 테두리를 약간 긴 점선으로 설정함.
- solid : 테두리를 실선으로 설정함.
- double : 테두리를 이중 실선으로 설정함.
- groove : 테두리를 3차원인 입체적인 선으로 설정하며, border-color 속성값에 영향을 받음.
- ridge : 테두리를 3차원인 능선효과가 있는 선으로 설정하며, border-color 속성값에 영향을 받음.
- inset : 테두리를 3차원인 내지로 끼운 선으로 설정하며, border-color 속성값에 영향을 받음.
- outset : 테두리를 3차원인 외지로 끼운 선으로 설정하며, border-color 속성값에 영향을 받음.
- none : 테두리를 없앰.
- hidden : 테두리가 존재하기는 하지만 표현되지는 않음.
border-width
- 테두리의 두께를 설정할 수 있다.
- px, em, cm 등과 같은 CSS 크기 단위를 이용하여 두께를 직접 설정하거나, 미리 설정해 놓은 예약어인 thin, medium, thick을 사용하여 설정할 수도 있다.
border-color
- 테두리의 색을 설정할 수 있다.
- 기본적인 color 속성값들뿐만 아니라 투명한 선을 나타내는 transparent 속성값을 사용할 수도 있다.
- border-color 속성값이 설정되지 않으면 해당 요소의 color 속성값을 그대로 물려받는다.
마진
(Margin)
테두리와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 설정한다.
패딩 영역과 달리 background-color 속성으로 설정하는 배경색의 영향을 받지 않는다.
특이사항
-
margin 속성값을 음수로 설정하여 해당 요소를 다른 요소의 위에 겹치게 할 수도 있다.
-
margin 속성값을 inherit로 설정하면, 부모 요소의 margin 속성값을 그대로 물려받는다.
-
margin 속성값을 auto로 설정하면, 웹 브라우저가 수평 방향 마진(margin) 값을 자동으로 설정한다. 즉, 해당 HTML 요소의 왼쪽과 오른쪽 마진을 자동으로 설정하게 되고, 그 결과 해당 요소는 그 요소를 포함하고 있는 부모요소의 정중앙에 위치하게 된다.
