오늘도 개발

CSS 박스 모델 이해하기 본문

웹 프로그래밍/HTML & CSS

CSS 박스 모델 이해하기

Sueeeeeee 2022. 5. 12. 11:57

0. 박스 모델이란?

  • 모든 html 요소는 박스 모델을 따름. (=모든 html 요소는 박스 안에 들어가 있음).
  • 박스 property : width, height, border, padding, margin, overflow

 

1. 박스 property

1) Border

  • Content를 감싸는 라인.
  • style, width, color 지정할 수 있음.
/* content인 h1이 살고있는 박스의 border 값 변경 */

h1 {  
    border: 3px solid blue; /* 순서 상관 없음 */
    border-radius: 4px; /* 모서리 라운드 처리, 값 100%는 원 */
}

 

2) Padding

  • Content와 border 사이의 공간
/* 1. 값 각각 지정하기 */

h1 {  
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px; 
}

/* 2. 한 번에 지정하기(시계방향으로 상, 우, 하, 좌) */

h2 {  
    padding: 10px 20px 30px 40px; 
}

/* 3. 한 번에 지정하기(상하, 좌우) */

h3 {  
    padding: 20px 40px; 
}

/* 4. 한 번에 지정하기(상하좌우) */

h4 {  
    padding: 20px; 
}

 

3) Margin

  • border 바깥 공간
/* 1. 값 각각 지정하기 */

h1 {  
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px;
    margin-left: 40px; 
}

/* 2. 한 번에 지정하기(시계방향으로 상, 우, 하, 좌) */

h2 {  
    margin: 10px 20px 30px 40px; 
}

/* 3. 한 번에 지정하기(상하, 좌우) */

h3 {  
    margin: 20px 40px; 
}

/* 4. 한 번에 지정하기(상하좌우) */

h4 {  
    margin: 20px; 
}

 

a. margin auto

auto값 지정하면 부모 박스 가로축으로 가운데 정렬 가능. 단, 블록 레벨 요소인 div 등은 디폴트 width가 전체 화면을 채우게 되어있으므로 width값을 따로 설정해줘야 효과를 볼 수 있음. DOCTYPE설정 정확하게 해줘야만 동작.

<!-- 부모인 div container 속 자식 div 가운데 정렬하기 -->
<!-- margin: 0 auto;로 지정하면 위아래 여백없이 가운데 정렬 (가장 기본 서식) -->

<div style="border: 1px solid">
  <div style="background-color: yellow; width: 300px; margin: 0 auto; 
  text-align: center;">
  자식 div
  </div>
</div>
자식 margin이 auto일때

자식 margin 설정 없을 때

자식 width 설정 없을 때

 

b. margin collapse

상하로 박스 두개가 만나면, 더 큰 마진만 적용됨. (BUT 인라인 요소의 박스인 경우 상하로 만나더라도 마진의 합으로 적용)

 

 

4) min/max width/height

  • 작거나 큰 디바이스에서 접근했을 때 박스가 너무 작아지거나 커지는 경우를 방지하기 위해 설정.
div {
    min-width: 300px; /* 아무리 화면이 작아져도 가로 300px이하로는 줄어들지 않음 */
    max-width: 600px; /* 아무리 화면이 커져도 가로 600px이하로는 커지지 않음 */
    min-height: 150px; /* 아무리 화면이 작아져도 세로 150px이하로는 줄어들지 않음 */
    max-height: 400px; /* 아무리 화면이 커져도 세로 400px이하로는 커지지 않음 */
}

 

5) overflow

  • 박스 안에 들어간 내용물이 박스보다 큰 경우 어떻게 처리할 지 설정.
  • block 요소에 height를 명시했을 때만 작동.
  • 값: visible, scroll, hidden, auto

a. visible (디폴트 값, 박스 바깥으로 넘치게 보여줌)

<head>
<style>
    .parent{
        border: solid;
        height: 50px;
        overflow: visible;
    }
</style>
</head>

<body>
<div class="parent">
  <p class="child">very very very very very very very very very very very very 
  very very very very very very very very very very very very very very very
  very very very very very very very very very very very very very 
  very very very very very very very very verylong paragraph</p>
</div>
</body>

 

very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very verylong paragraph



 

b. scroll (넘치는 내용물 자른 후 박스에 스크롤 생성해서 마저 보여줌, 무조건 스크롤 영역 생성)

<head>
<style>
    .parent{
        border: solid;
        height: 50px;
        overflow: scroll;
    }
</style>
</head>

<body>
<div class="parent">
  <p class="child">very very very very very very very very very very very very 
  very very very very very very very very very very very very very very very
  very very very very very very very very very very very very very 
  very very very very very very very very verylong paragraph</p>
</div>
</body>

very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very verylong paragraph

 

 

c. hidden (넘치는 부분 보여주지 않음)

<head>
<style>
    .parent{
        border: solid;
        height: 50px;
        overflow: hidden;
    }
</style>
</head>

<body>
<div class="parent">
  <p class="child">very very very very very very very very very very very very 
  very very very very very very very very very very very very very very very
  very very very very very very very very very very very very very 
  very very very very very very very very verylong paragraph</p>
</div>
</body>

very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very verylong paragraph

 

 

d. auto (scroll과 비슷하지만 스크롤 필요할 때만 스크롤 생성)

 

2. Box sizing property

  • 패딩, 보더를 컨텐츠 크기에 포함할지 뺄지 설정가능.
  • 값 : content-box, border-box

a. content-box (디폴트 값. 박스 크기에 패딩, 보더를 더함.)

<!-- 가로 400px, 세로 200px의 상자 바깥에 보더, 패딩을 더해서 460px * 260px로 구현됨 -->

<head>
<style>
    div{
        padding: 10px;
        border: 10px solid;
        margin: 10px;
        width: 400px;
        height: 200px;
    }
</style>
<body>
<div></div>
</body>
</head>

 

 

b. border-box (패딩, 보더 설정하면 박스 크기에서 빼고 남는 공간에 컨텐츠 할당. 레이아웃 잡기 편함)

<!-- 가로 400px, 세로 200px의 상자 안쪽에 보더, 패딩을 더해서 400px * 200px로 구현됨 -->

<head>
<style>
    /* 전체 선택자로 설정 */
    * {
        box-sizing: border-box;
    }

    div {
        padding: 10px;
        border: 10px solid;
        margin: 10px;
        width: 400px;
        height: 200px;
    }
</style>
<body>
<div></div>
</body>
</head>



참조 : w3schools.com - CSS Box Model
codecademy.com - Learn CSS(2. The Box Model)
bitDegree - css box sizing

'웹 프로그래밍 > HTML & CSS' 카테고리의 다른 글

CSS display 이해하기 2 (flex)  (0) 2022.05.13
CSS display 이해하기 1 (inline, block, inline-block)  (0) 2022.05.13
HTML로 웹 접근성을 높이는 방법  (0) 2022.05.12
CSS 선택자 활용하기  (0) 2022.03.15
HTML문서에 CSS를 적용하는 세 가지 방법  (0) 2022.03.15
'웹 프로그래밍/HTML & CSS' Related Articles more