박스 모델(box model)
모든 HTML 요소는 박스(box) 모양으로 구성
박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분
[CSS] height / width : 내용(content) 부분만
[HTML] height / width : 패딩(padding), 테두리(border), 마진(margin)의 크기는 포함되지 않음
전체 너비 / 높이 계산
HTML 요소의 전체 너비 : width + left padding + right padding + left border + right border + left margin + right margin
HTML 요소의 전체 높이 : height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
마진(margin) 영역의 크기는 눈으로 바로 확인할 수는 없음
테두리(border)와 이웃하는 요소 사이의 간격이면서, 배경색의 영향을 받지 않으나 크기에는 포함
내용(content)
텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분
패딩(padding)
내용과 테두리 사이의 간격
패딩은 눈에 보이지 않음
background-color 속성으로 설정하는 배경색의 영향을 함께 받음
CSS를 사용하여 패딩 영역의 크기를 방향별로 따로 설정 가능
#box{ padding: 20px 50px 30px 50px; }
패딩 속성
padding-top
padding-right
padding-bottom
padding-left
4개의 padding 속성값 : top, right, bottom, left
3개의 padding 속성값 : top, right와 left, bottom
2개의 padding 속성값 : top과 bottom, right와 left
1개의 padding 속성값 : 모든 패딩값 동일
테두리(border)
내용와 패딩 주변을 감싸는 테두리
border 속성을 설정하기 위해서는 반드시 border-style 속성이 먼저 설정 되어야 함
#box{ border: 3px solid teal; }
테두리 속성
border-top
border-right
border-bottom
border-left
4개의 border-style 속성값 : top, right, bottom, left
3개의 border-style 속성값 : top, right와 left, bottom
2개의 border-style 속성값 : top과 bottom, right와 left
1개의 border-style 속성값 : 모든 테두리의 스타일
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 속성값을 그대로 물려받음
border-radius 속성
곡선 모서리
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
4개의 border-radius 속성값 : top-left, top-right, bottom-right, bottom-left
3개의 border-radius 속성값 : top-left, top-right와 bottom-left, bottom-right
2개의 border-radius 속성값 : top-left와 bottom-right, top-right와 bottom-left
1개의 border-radius 속성값을 가질 때는 border-radius 속성값이 모두 동일
border-image 속성
요소를 둘러싸는 테두리(border)에 이미지를 사용
반드시 border 속성이 먼저 설정
border-image 속성값으로 전달되는 인수의 기본 단위는 %
1. 테두리(border)로 사용할 이미지를 결정
2. 이미지의 어느 부분을 자를 것인지 결정
3. 테두리 중간 부분의 이미지 처리를 반복되게 할지 아니면 그냥 늘릴지를 결정
round 속성값 : 테두리 처리 반복 설정
stretch 속성값 : 테두리 처리 늘림
border-image-source
테두리로 사용할 이미지 설정
border-image-slice
테두리로 사용할 이미지를 자르는 방법 설정
border-image-width
테두리로 사용할 이미지의 너비 설정
border-image-outset
테두리 영역 너머로 테두리로 사용할 이미지가 얼마만큼 넘어갈지 설정
border-image-repeat
테두리로 사용할 이미지의 중간 부분의 처리를 반복으로 할지 늘릴지 설정
마진(margin)
테두리와 이웃하는 요소 사이의 간격
마진은 눈에 보이지 않음
background-color 속성으로 설정하는 배경색의 영향을 받지 않음
음수로 설정 -> 해당 요소를 다른 요소의 위에 겹치게 할 수 있음
auto로 설정 -> 웹 브라우저가 수평 방향 마진값을 자동으로 설정 ( 그 요소를 포함하는 부 모요소의 정중앙에 위치)
inherit로 설정 -> 부모(parent) 요소의 margin 속성값을 그대로 물려받음
#box{ margin: 20px 50px 30px 50px; }
마진 속성
margin-top
margin-right
margin-bottom
margin-left
4개의 margin 속성값 : top, right, bottom, left
3개의 margin 속성값 : top, right와 left, bottom
2개의 margin 속성값 : top과 bottom, right와 left
1개의 margin 속성값 : 모든 마진값 동일
아웃라인(Outline)
HTML 요소의 가장 바깥 부분을 둘러싸고 있는 아웃라인 부분
style, width, color 속성
HTML 요소의 전체 크기에는 포함되지 않음
HTML 요소의 높이나 너비는 outline의 두께와 상관 없음
outline 속성을 설정하기 위해서는 반드시 outline-style 속성이 먼저 설정
#box{ outline: 3px solid teal;}
outline-style 속성
- dotted : 점선 아웃라인
- dashed : 약간 긴 점선 아웃라인
- solid : 실선 아웃라인
- double : 이중 실선 아웃라인
- groove : 아웃라인을 3차원인 입체적인 선으로 설정, outline-color 속성값에 영향을 받음.
- ridge : 아웃라인을 3차원인 능선효과가 있는 선으로 설정, outline-color 속성값에 영향을 받음.
- inset : 3차원인 내지로 끼운 선으로 설정, outline-color 속성값에 영향을 받음.
- outset : 3차원인 외지로 끼운 선으로 설정하 outline-color 속성값에 영향을 받음.
- none : 아웃라인(outline)을 없앰.
- hidden : 아웃라인(outline)이 존재하기는 하지만 표현되지는 않음.
outline-width 속성
px, em, cm 등과 같은 CSS 크기 단위를 이용하여 두께를 직접 설정
예약어인 thin, medium, thick을 사용하여 설정 가능
outline-color 속성
기본적인 color 속성값, 및 색반전을 나타내는 invert 속성값 사용
invert 속성값은 배경색과 상관없이 아웃라인을 보여주기 위한 색반전을 설정
outline-offset 속성
테두리(border)와 아웃라인(outline) 사이의 여백
box-sizing 속성
content-box
CSS 표준이 정의한 초기 기본값.
width와 height 속성이 콘텐츠 영역만 포함하고 안팎 여백과 테두리는 포함하지 않음
너비 = 콘텐츠 너비
높이 = 콘텐츠 높이
ex) .box {width: 350px; border: 10px solid black;} => 370px
ex2) 요소의 너비를 100 픽셀로 설정 => 콘텐츠 영역이 100 픽셀 너비를 가지고, 테두리와 안쪽 여백은 이에 더해짐
.content-box {
box-sizing: content-box;
}
border-box
width 와 height 속성이 안쪽 여백과 테두리는 포함하고, 바깥 여백은 포함하지 않음
안쪽 여백과 테두리가 요소 상자 안에 위치
콘텐츠 영역의 크기는 음수일 수 없으므로 border-box를 사용해 요소를 사라지게 할 수는 없습니다.
너비 = 테두리 + 안쪽 여백 + 콘텐츠 너비
높이 = 테두리 + 안쪽 여백 + 콘텐츠 높이
ex) .box {width: 350px; border: 10px solid black;} => 350px
ex2) 요소의 너비를 100 픽셀로 설정 => 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100 픽셀을 유지
https://www.tcpschool.com/css/css3_module_borders
https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing
https://velog.io/@realryankim/CSS-%EB%B0%95%EC%8A%A4-%EB%AA%A8%EB%8D%B8Box-Model
https://www.tcpschool.com/css/css_boxmodel_boxmodel
