🤔 박스 모델이란?
웹 페이지의 각 요소를 사각형 박스로 간주하고, 이를 기반으로 레이아웃을 구성하는 개념이다.
박스 모델의 구성 요소
content- 콘텐츠가 표시되는 영역이다padding- 콘텐츠의 테두리(border) 사이의 여백이다.border-padding과margin사이의 테두리이다.margin- 가장 바깥 쪽 레이어로 콘텐츠와 패딩, 테두리를 둘러싸면서 해당 박스와 다른 요소 사이의 공백 역할을 한다.
박스의 크기를 설정해보자.
1. width / height
요소의 너비와 높이를 설정할 수 있다.
- 다양한 단위를 통해 지정이 가능하다.
auto는 부모의 요소에게 속성을 받을 때 사용한다.
.box {
width: 200px; /* 너비 */
height: 150px; /* 높이 */
}2. max-width / min-width
요소가 최대 혹은 최소로 가질 수 있는 너비를 지정할 수 있다.
.box {
min-width: 100px; /* 최소 너비 */
max-width: 500px; /* 최대 너비 */
}3. max-height / min-height
요소가 최대 혹은 최소로 가질 수 있는 높이를 지정할 수 있다.
.box {
min-height: 200px; /* 최소 높이 */
max-height: 400px; /* 최대 높이 */
}여백이란?
요소의 주변 여백을 설정하는 방법은 크게 두 가지가 있다.
1. padding
요소의 테두리(
border) 안쪽과 내용(content) 사이의 공간을 의미한다.
- 초기값은
0이다.- 패딩을 요소의 배경색이나 배경 이미지가 적용되는 영역이다.
< padding 속성 이용하기 >
.box {
padding: 10px; /* 위 - 오른쪽 - 아래 - 왼쪽 */
}
.box {
padding: 10px 20px; /* 위,아래 - 오른쪽,왼쪽 */
}
.box {
padding: 10px 20px 15px; /* 위 - 오른쪽,왼쪽 - 아래 */
}
.box {
padding: 10px 20px 25px 15px ; /* 위 오른쪽 아래 왼쪽 */
}< 별도로 padding 설정하기 >
.box {
padding-top: 10px; /* 위 */
}
.box {
padding-right: 10px; /* 오른쪽 */
}
.box {
padding-bottom: 10px; /* 오른쪽 */
}
.box {
padding-left: 10px; /* 오른쪽 */
}➡️ .box 클래스를 가진 요소는 padding이 10px로 설정된다.
2. margin
요소의 테두리(
border) 바깥쪽 공간을 의미한다.
- 초기값은
0이다.- 요소와 주변 요소의 간격을 만들 때 사용한다.
속성을 이용하는 방법은
padding과 동일하다.
마진 상쇄(margin collapsing)에 대해 알아보자.
여러 블록(block) 요소들의 위/아래
margin이 경우에 따라 가장 큰 크기를 가진margin으로 결합(상쇄)되는 현상을 의미한다.
🤔 그렇다면 언제 마진 상쇄가 발생하는 걸까?
1. 인접 형제
- 두 형제 요소의 수직 마진이 만날 경우, 그 중 큰 값으로 합쳐진다.
부모-자식요소
- 부모 요소에
border나padding이 없고,height가 지정되지 않을 경우, 부모와 자식 요소의 수직 마진이 합쳐진다.
빈 블록
- 블록 요소에
contetn,border,padding,height가 없을 경우, 상단과 하단margin이 합쳐진다.
테두리(border)란?
요소의 테두리를 설명하는 속성이다.
- 테두리의 스타일, 너비, 색상을 지정할 수 있다.
1. border-style
테두리의 모양을 지정할 수 있다.
.box {
border-style: dashed;
}➡️ .box 클래스를 가진 요소의 테두리 스타일을 점선(dashed)으로 설정
2. border-width
테두리의 두께를 설정할 수 있다.
padding,margin처럼 상하좌우를 설정할 수 있다.(시계 방향)
.box {
border-width: 5px;
}➡️ .box 클래스를 가진 요소의 테두리 너비를 5px로 설정
3. border-color
테두리의 색상을 설정할 수 있다.
.box {
border-color: red;
}➡️ .box 클래스를 가진 요소의 테두리 색상을 빨간색으로 설정
4. border의 단축 속성
위의 속성들을 짧게 작성할 수 있다.
< border 속성 이용하기 >
.box {
border: 2px solid black;
}< 별도로 border 설정하기 >
.box {
border-top: 2px solid black;
border-right: 3px dotted red;
border-bottom: 4px dashed blue;
border-left: 5px double green;
}🔥 추가적인 개념
𝗤. 테두리(border)와 외곽선(outline)의 차이점은?
𝐀. 두 속성은 모두 요소를 둘라싸는 선을 그리는데 사용되지만 중요한 차이점을 가지고 있다.
< 공간 차지 여부 >
border는 요소의 크기에 포함되기 때문에, 테두리의 너비가 요소의 전체 크기에 영향을 준다.
outline은 요소의 크기에 포함되지 않기 때문에, 요소의 전체 크기에 영향을 주지 않는다.
5. border-radius
테두리의 모서리를 둥글게 만드는 데 사용된다. 이 속성은 각 모서리의 반경을 설정하는 값을 1개 혹은 최대 4개까지 받는다.
1개모든 모서리를 같은 반경으로 둥글게 만든다.
.box {
border-radius: 10px;
}2개첫 번째 값은 좌상단과 우하단 모서리에, 두 번째 값은 우상단과 좌하단 모서리에 적용된다.
.box {
border-radius: 10px 20px;
}3개첫 번째 값은 좌상단 모서리에, 두 번째 값은 우상단과 좌하단 모서리에, 세 번째 값은 우하단 모서리에 적용된다.
.box {
border-radius: 10px 20px 30px;
}4개각 값은 좌상단, 우상단, 우하단, 좌하단 모서리 순서대로 적용됩니다.
.box {
border-radius: 10px 20px 30px 40px;
}box-sizing 속성
요소의 너비와 높이를 계산하는 방법을 지정한다.
- 기본값은
content-box로 설정되어 있다.
content-box
width와height속성이 content 영역의 크기를 지정한다는 걸 의미한다.
.box {
box-sizing: content-box;
width: 300px;
padding: 50px;
border: 20px solid black;
}➡️ .box 클래스를 가진 요소의 총 너비는 300px(내용) + 100px(패딩) + 40px(테두리) = 440px이 된다.
border-box
width와height속성과 테두리(border)와 패딩(padding)을 포함한 모든 속성이 전체 박스 모델의 크기라는 걸 의미한다.
.box {
box-sizing: border-box;
width: 300px;
padding: 50px;
border: 20px solid black;
}➡️ .box 클래스를 가진 요소의 총 너비는 300px이며, 이 중 내용 영역의 너비는 300px - 100px(패딩) - 40px(테두리) = `160px``이 된다.
