[CSS] 박스 모델

개요

프론트나 안드로이드나 UI를 구성하는데 제일 까다로운게 배치나, padding, margin 같은 것들을 설정하는 것이다. 정말 세심하게 해야 기존에 기획했던 디자인에 벗어나지 않는 완벽한 플랫폼을 만들 수 있다!! 그런 의미에서 CSS에 박스 모델은 정말 중요하기 때문에 정리해야겠다.

 

1. 박스 모델

모든 HTML 요소는 CSS에서 박스 형태로 표현되고, 이 박스 모델은 웹 페이지에서 요소가 차지하는 영역을 정의하는 개념이다.

 

Content, Padding, Border, Margin 이렇게 네 가지 영역으로 구성되는데 하나씩 알아보자.

 

1-1. Content 영역

-> 웹 요소가 표시하는 실제 데이터가 들어가는 부분이다.

-> 텍스트, 이미지, 동영상 등의 콘텐츠가 배치되는 공간이다.

-> 요소의 width와 heigth 속성이 적용되는 영역이다.

.box {
    width: 200px;
    height : 300px;
}

 

-> px와 같은 절대값 뿐이 아닌 %, vw, vh 등의 상대적인 크기 단위로 사용할 수 있다.

 

.box {
    width: 50%;  /* 부모 요소의 50% 크기 */
    height: 30vh; /* 뷰포트 높이의 30% */
    background-color: lightblue;
}

 

-> 위의 코드는 퍼센트(%), 뷰포트로 크기를 지정해줬다.

-> 50%는 부모 요소의 넓이의 50%를 의미하고

뷰포트(Viewport)

-> 웹 브라우저에서 사용자가 볼 수 있는 웹 페이지의 화면 영역을 의미한다.

-> 화면 크기에 따라 변동되고, 다양한 디바이스(데스크톱, 모바일, 태블릿)에서 다른 크기를 가질 수 있다.

-> 위의 코드에서 30vh는 현재 브라우저 창의 높이의 30%를 의미한다.

 

1-2. Padding 영역

-> Content와 border 사이의 공간이다.

-> 배경색이 존재하는 경우에 padding까지 적용된다.

-> padding을 조정한다면 요소 내부의 콘텐츠와 테두리 간격을 조절할 수 있다.

 

모든 방향 적용

.box {
    padding: 20px; /* 모든 방향(상, 우, 하, 좌) 20px */
    background-color: lightblue;
}

상하, 좌우

.box {
    padding: 20px 40px; /* 상하 20px, 좌우 40px */
    background-color: lightcoral;
}

 

네방향 각각 다르게 (시계 방향으로 생각하면 편하다)

.box {
    padding: 10px 20px 30px 40px; /* 상 10px, 우 20px, 하 30px, 좌 40px */
    background-color: lightgreen;
}

 

-> 또한, padding-top, padding-right, padding-bottom, padding-left로 직접 지정이 가능하다.

1-3. Border 영역

-> 요소의 외곽을 둘러싸는 경계선이다.

-> 테두리의 색상, 두께, 스타일을 설정할 수 있다.

 

div {
  width: 250px;
  padding: 20px;
  border: 2px solid;
  border-radius: 15px;
}

 

1-4. Margin 영역

-> 요소의 바깥쪽 공간을 정의하고, 다른 요소와의 간격을 조정하는 역할을 한다.

-> Margin도 Padding과 동일하게 지정할 수 있다.

-> auto를 사용하면 요소를 가운데 정렬할 수 있다.

.box {
    width: 50%;
    height: 30vh;
    padding: 5%;
    border: 2px solid black;
    margin: 10% auto; /* 위아래 10%, 좌우 자동(가운데 정렬) */
    background-color: lightblue;
}

Margin Collapsing

-> 세로로 배치된 요소들이 각각 다른 margin-top과 margin-bottom 값을 가질 경우 발생하는 현상

-> 위쪽 요소의 margin-bottom과 아래쪽 요소의 margin-top 중 더 큰 값이 적용된다.

-> 단, 가로의 경우에는 margin-right, margin-left가 합산되어 적용된다.

 

.box1 {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  margin-bottom: 30px; /* 아래쪽 마진 */
}

.box2 {
  width: 200px;
  height: 100px;
  background-color: lightcoral;
  margin-top: 20px; /* 위쪽 마진 */
}

 

-> box1과 box2의 margin-botto, margin-top이 겹치는데 이때 30px이 적용된다.

 

1-5. box-sizing 속성

-> 요소의 width와 height를 계산하는 방식을 결정한다.

-> width와 height의 값이 content 영역만을 포함하는지, 아니면 padding과 border까지 포함하는지 지정할 수 있다.

 

content-box(기본값)

.box {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 5px solid black;
    box-sizing: content-box;
}

 

 

-> content 영역의 width만 200px

-> 전체 요소 크기 = 230px(content + padding + border)

 

border-box

.box {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 5px solid black;
    box-sizing: content-box;
}

 

-> padding과 border를 포함한 전체 크기가 200px

-> content 크기는 자동으로 조정된다.

-> 전체 요소 크기 = 200px

-> 요소 크기 계산이 더 쉽기 때문에 border-box를 주로 사용한다고 한다.