박스모델이란 ???
html의 각 요소들은 박스형태로 구성하기때문에 레이아웃과 매우 밀접한 관계이다.
그만큼 매우 중요하니 다들 숙지를 해야한다!!!
박스모델의 구성
- 여백을 나타내는 margin
- 테두리를 나타내는 border
- 테두리와 컨텐츠 사이의 여백을 나타내는 padding
- 컨텐츠
이렇게 말하면 당연히 어려우니까, 그림으로 보시죠 🔥
항상 요소들은 위 그림과같이 박스형태로 된것을 볼 수 있습니다(f12버튼 누르면 개발자도구 열림)
쉽게 생각해서 사람의 몸으로 표현을하자면
뼈는 컨텐츠이고
살과 뼈 사이에 지방(?)이 패딩입니다.
테두리는 살 입니다.
마진은 공기라고 생각하시면 됩니다.(내 몸을 제외한 모든것)
이해가 안돼도 괜찮아요. 실제로 padding이 무엇인지 해보면 감이 오실겁니다.
(어차피 margin과 padding 등등 본인이 레이아웃 짜다보면 다시 기초를 보게돼어있어요)
box-sizing 이란 ???
box-sizing은 내가 정한너비가 padding과 border를 포함한 너비인지, 포함하지 않은상태에 너비인지를 정하는 속성이라고 생각하면 이해가 더 쉽다.
box-sizing 속성값
- content-box (기본값) 컨텐츠를 기준으로 너비를 지정함.
- border-box 테두리를 기준으로 너비를 지정.
div {
width: 300px;
height: 300px;
padding: 20px;
border: 1px solid red;
box-sizing: content-box; /* 설정 안해도 기본값이다. */
}위와 같은 코드가 있다고 가정을 해보면,
우리가 생각한건 너비, 높이가 같은 300px 정사각형 박스가 나와야하지만 box-sizing에 기본값인
컨텐츠를 기준으로 너비를 지정하기때문에 padding값 만큼 더해주어야 합니다.
❗️이때 패딩값을 더할때에는 항상 *2를 해주어야합니다. 패딩과 마진은 상하좌우가 있기때문에
padding: 20px은 상하좌우 모두다 20px씩 주기때문에 width와 height는 340이 됩니다.
만약에 테두리를 기준으로 (border-box)를 사용하게되면 컨텐츠 영역은 260이되고 40px이 패딩값이 됩니다.
박스모델에서보면 컨텐츠 -> 패딩 -> 테두리 -> 마진으로 가기때문입니다.
그래도 이해가 안가시는분들은 이렇게 생각하세요!!!
- content-box: 내가 설정한 너비에 패딩값 만큼 더해준다.
- border-box: 내가 설정한 너비가 패딩에 포함이 된다.
처음에는 아 이런거구나 하고만 넘어가도 상관없으니 모를때마다 반복해서 보다보면 어느순간 팍 이해가 될거니 걱정들 안하셔도됩니다!
참고자료
