CSS 핵심 개념 : 박스 모델 정리

박스 모델(Box Model)

HTML/CSS에서 요소는 기본적으로 박스 형태

밖에서부터 차례대로 바깥 여백인 마진, 테투리인 보더, 테두리와 실제 내용 사이의 여백인 패딩, 그리고 실제로 내용이 들어가는 콘텐트 박스가 있음

 

border 속성

주로 굵기, 테두리 종류, 색상 순서로 씀

예를 들어서 아래 코드는 2px 굵기의 실선으로 옅은 회색(#ededed)을 사용한 것

border: 2px solid #ededed;

 

 

border-radius 속성

박스 모델의 모서리를 둥글게 만들 때 사용

border 속성 없이도 쓸 수 있음

아래 코드는 16px 만큼 둥글게 하는 코드

border-radius: 16px;

<div class="card">
    엉뚱한수박님의 홈페이지
</div>

.card {
    padding: 20px;
    background-color: #ededed;
    border-radius: 16px;
}

 

팁1. 타원 만들기

아래 코드는 50%만큼 둥글게 하는 코드

border-radius: 50%;

<div class="card">
    엉뚱한수박님의 홈페이지
</div>

.card {
    padding: 20px;
    background-color: #ededed;
    border-radius: 50%;
}

 

팁2. 알약 만들기

아래 코드는 9999px만큼 둥글게 하는 코드

아주 큰 값을 지정하면 알약 형태가 됨

border-radius: 9999px;

<div class="card">
    엉뚱한수박님의 홈페이지
</div>

.card {
    padding: 20px;
    background-color: #ededed;
    border-radius: 9999px;
}

 

box-sizing 속성

기본적으로 요소에 크기를 지정하면 그 크기는 박스 모델에서 콘텐트 영역에 대한 크기임

예를 들어서 아래 #box 요소의 실제 너비는 100 + 30 + 30 = 160이 됨

#box {
  margin: 20px;
  padding: 30px;
    width: 100px;
}

만약 이런 게 아니라 좀 더 직관적으로 지정하고 싶다면, box-sizing 속성을 바꿔주면 됨

기본값인 content-box 대신 border-box 사용

#box {
  margin: 20px;
  padding: 30px;
    width: 100px;
    box-sizing: border-box;
}

이렇게 하면 테두리까지 모두 합친 영역의 크기가 100px이 됨

 

overflow 속성

박스의 크기를 지정했을 때 가끔 안에 있는 내용이 많아서 삐져나올 때가 있음

이 때 박스에 스크롤이 되도록 하거나 삐져나온 걸 감출 수 있음

 

예시1. 넘치는 것 감추기

overflow: hidden;

<div class="card">
    애플 수박은 생긴 건 수박이지만 사과처럼 작고 껍질이 얇은 과일이다. 대한민국 경북 문경에서 박인규씨가 처음으로 재배하기 시작했고 전국적으로 퍼지기 시작했다. 무게는 1kg 정도로 한 손으로 들어 올릴 수 있다. 먹기는 수박보다 편하지만 맛은 일반 수박에 비해 못한 편이라고 한다. 일반 수박에 비해서 덜 아삭하고 마치 멜론같은 식감이 난다.
</div>

.card {
    width: 200px;
    height: 100px;
    padding: 20px;
    background-color: #ededed;
    overflow: hidden;
}

 

예시2. 넘치면 스크롤 하게 만들기

overflow: auto;

<div class="card">
    애플 수박은 생긴 건 수박이지만 사과처럼 작고 껍질이 얇은 과일이다. 대한민국 경북 문경에서 박인규씨가 처음으로 재배하기 시작했고 전국적으로 퍼지기 시작했다. 무게는 1kg 정도로 한 손으로 들어 올릴 수 있다. 먹기는 수박보다 편하지만 맛은 일반 수박에 비해 못한 편이라고 한다. 일반 수박에 비해서 덜 아삭하고 마치 멜론같은 식감이 난다.
</div>

.card {
    width: 200px;
    height: 100px;
    padding: 20px;
    background-color: #ededed;
    overflow: auto;
}

 

예시3. 항상 스크롤 하게 만들기

overflow: scroll;

<div class="card">
    애플 수박은 생긴 건 수박이지만 사과처럼 작고 껍질이 얇은 과일이다. 대한민국 경북 문경에서 박인규씨가 처음으로 재배하기 시작했고 전국적으로 퍼지기 시작했다. 무게는 1kg 정도로 한 손으로 들어 올릴 수 있다. 먹기는 수박보다 편하지만 맛은 일반 수박에 비해 못한 편이라고 한다. 일반 수박에 비해서 덜 아삭하고 마치 멜론같은 식감이 난다.
</div>

.card {
    width: 200px;
    height: 100px;
    padding: 20px;
    background-color: #ededed;
    overflow: scroll;
}

 

마진 상쇄 (Margin collapsing)

일반적으로 세로 마진은 서로 겹쳐셔 화면에 나타남

서로 이웃한 태그에서는 세로로 마진을 겹쳐서 적용하고, 부모 자식 관계인 태그에서도 세로로 마진을 겹쳐서 적용함

이때 부모에 padding이나 border가 있으면 경계가 있다고 생각하고 세로 마진을 겹치지 않음

 

예시1. 서로 이웃한 태그

#a와 #b의 마진을 겹치면 둘 사이 마진은 30px

<div id="a">a</div>
<div id="b">b</div>

#a {
  margin: 30px;
}

#b {
  margin: 20px;
}

 

예시2. 부모자식 태그

#b와 #c는 부모 자식 관계

#b에는 따로 경계가 없으니까 둘의 마진을 겹쳐서 위쪽 마진은 40px이 됨

이 마진 값을 이웃한 #a와 겹치면 #a와 #b 사이의 마진은 40px이 됨

<div id="a">
  a
</div>
<div id="b">
  <div id="c">
    c
  </div>
  b
</div>

#a {
  margin: 30px;
}

#b {
  margin: 20px;
}

#c {
  margin: 40px;
}