CSS의 박스 모델
웹페이지에서 모든 HTML 요소들은 박스로 이루어져 있다.
CSS에서 이것으로 요소의 크기, 위치, 속성을 결정할 수 있다.
이를 CSS Box Model 이라고 한다.
박스 모델은 요소와 요소 간의 레이아웃을 짜거나 크기와 위치 등을 정할 때 중요하게 작용하며,
아래 사진과 같이 content(콘텐츠), padding(안쪽 여백), border(테두리), margin(바깥 여백) 으로 이루어져 있다.
Content
요소의 텍스트나 이미지 등 실제 내용이 담기는 영역.
width와 height 속성을 가지며, 이는 각각 요소의 너비와 높이를 조절하기 위해 사용된다.
지정되는 요소의 너비와 높이는 Content 영역을 대상으로 한다. width와 height로 조절한 Content 영역보다 Content의 크기가 크면 해당 영역을 벗어나게 된다.
Padding
테두리 안쪽에 위치하는 요소의 '내부 여백' 영역.
border와 content 사이에 위치하며, 기본적으로 투명색이다.
top, right, bottom, left 영역의 너비를 각각 조절할 수 있으며, 사용법은 아래와 같다.
padding: 10px; => 상하좌우 모두 10px 적용
padding: 10px 20px; => 상하 10px, 좌우 20px 적용
padding: 10px 20px 15px => 상 10px 좌우 20px 하 15px 적용
padding: 10px 15px 20px 25px => 상 -> 우 -> 하 -> 좌 (시계방향 순으로 적용)Border
테두리 영역으로, 박스의 경계를 표시하는 역할을 한다.
border 와 border-radius 속성을 통해 테두리 스타일을 지정할 수 있다.
border
굵기, 테두리 종류, 색상 순서로 작성
border: 2px solid #ffffff; => #ffffff 색의 2px 굵기의 실선 border-radius
박스 모델의 모서리를 둥글게 만들 때 사용
border-radius: 10px; => 테두리를 10px만큼 둥글게border-radius 값으로 50% 를 지정하면 타원 형태가 된다.
border-radius 값으로 9999px을 지정하면 알약 형태💊가 된다.
Margin
테두리 바깥에 위치하는 요소의 '외부 여백' 영역.
다른 박스와의 간격을 의미하며, 기본적으로 투명색이고 배경색을 지정할 수 없다.
padding과 마찬가지로, top, right, bottom, left 영역의 너비를 각각 조절할 수 있으며, 사용법은 아래와 같다.
margin: 10px; => 상하좌우 모두 10px 적용
margin: 10px 20px; => 상하 10px, 좌우 20px 적용
margin: 10px 20px 15px => 상 10px 좌우 20px 하 15px 적용
margin: 10px 15px 20px 25px => 상 -> 우 -> 하 -> 좌 (시계방향 순으로 적용)마진 상쇄 (Margin Collapsing)
일반적으로 세로 마진은 서로 겹쳐서 화면에 나타난다.
서로 이웃한 태그에서는 세로로 마진을 겹쳐서 적용하고,
부모 자식 관계인 태그에서도 세로로 마진을 겹쳐서 적용한다.
이때, 부모에 padding이나 border가 있으면 경계가 있다고 생각하고 세로 마진을 겹치지 않는다.
🔹 #a와 #b 사이의 margin은 얼마일까?
<div id="a">a</div>
<div id="b">b</div>#a {
margin: 30px;
}
#b {
margin: 20px;
}마진 상쇄를 모른다면, 50px라고 답하겠지만, 마진 상쇄로 인해 둘 사이 margin은 30px이 된다.
🔹 #a와 #b 사이의 margin은 얼마일까?
<div id="a">
a
</div>
<div id="b">
<div id="c">
c
</div>
b
</div>#a {
margin: 30px;
}
#b {
margin: 20px;
}
#c {
margin: 40px;
}#b와 #c는 부모 자식 관계이다. #b에는 따로 padding이나 border가 없으니까, #b와 #c의 마진을 겹쳐서 위쪽 마진은 40px이 된다. 이 마진 값을 이웃한 #a와 겹치면, #a와 #b 사이의 마진은 40px이 된다.
🔹 #a와 #b 사이의 margin은 얼마일까?
<div id="a">a</div>
<div id="b">b</div>#a {
margin: 30px;
}
#b {
margin: 20px;
padding: 20px;
}드디어 padding이 나왔다. 아까 padding이 있으면 경계가 있다고 생각하고 margin을 겹치지 않는다고 한것 같은데..?🤔 그럼 답은 50px?!!😃
정확히 알아둬야 하는게, padding이나 border가 있으면 경계가 있다고 생각하고 세로 마진을 겹치지 않는다라는 것은 부모 자식 관계에서의 부모 태그에 해당한다!!
따라서, #a와 #b는 부모 자식 관계가 아니기 때문에, 마진 상쇄가 이루어져 둘 사이 margin은 30px이 된다!!💡💡
