HTML & CSS/CSS

[CSS] CSS 필수 속성(박스 모델)

ReBugs 2024. 1. 6.

이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다.

박스 모델을 구성하는 속성

HTML 문서에서 사용된 각각의 요소가 어떤 원리로 웹 브라우저에 배치되어 표시되는지 이해하려면 박스 모델을 알아야 한다.

박스 모델은 모든 HTML 요소가 사각형의 박스로 둘러 쌓여 있다는 개념이다.

박스 형태의 요소들을 하나씩 원하는 곳에 배치해 원하는 모양으로 만들어 나가는 것이 결국 웹 페이지를 만드는 본질이다.

박스 모델은 아래와 같은 4가지 요소로 구성된다.

박스 모델은 크롬 웹브라우저 개발자도구(F12, ctrl+shift+i)에서 살펴볼 수 있다.

margin 영역

margin은 박스 모델에서 가장 외부에 있는 영역으로, 요소의 외부 여백을 담당한다.

박스 모델은 사각형 모양이라서 각 방향에 해당하는 속성이 독립적으로 존재한다.

margin 영역을 다룰 때 사용할 수 있는 속성으로는 margin-top, margin-right, margin-bottom, margin-left가 있고, 모든 방향을 통합해 margin 속성으로 사용할 수도 있다.

속성 값에는 크기를 넣으면 된다.

아래의 예제는 p 태그로 작성된 두 요소의 간격을 20px만큼 벌리기 위해 margin-bottom 속성을 적용한다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>margin</title>
  <style>
    p{
      margin-bottom:20px;
    }
  </style>
</head>
<body>
  <p>lorem1</p>
  <p>lorem2</p>
</body>
</html>

이렇게 두 개의 값을 적용하면 위, 아래는 10px, 왼쪽과 오른쪽은 20px로 적용된다.

margin 겹침 현상

margin 겹침 현상은 인접한 margin 값이 둘 중 더 큰 값으로 통일되는 것을 말한다.

두 요소 사이의 간격은 20px과 30px을 합한 50px가 될 것 같지만, 실제로는 30px가 적용된다.

이러한 현상이 바로 margin 겹침 현상이다.

이는 같은 레벨(형제 관계)에 있는 요소들의 margin 영역이 중첩되면 더 큰 영역이 중첩되면 더 큰 값을 가진 margin 영역으로 병합디어 출력되는 현상이다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>margin collpase</title>
  <style>
    .first{
      margin-bottom:20px;
    }
    .second{
      margin-top:30px;
    }
  </style>
</head>
<body>
  <p class="first">lorem1</p>
  <p class="second">lorem2</p>
</body>
</html>

border 영역

border 영역은 margin 보다 안쪽에 있으며, 요소의 테두리(경계선)를 담당한다.

border 영역도 border 속성과 border-방향 속성 모두 똑같이 border-width, border-style, color 속성 값을 사용한다.

border-width 속성

테두리 굵기를 지정한다.

속성값으로는 단위를 포함한 크기를 사용한다.

border-style 속성

테두리 모양을 지정한다.

border 속성은 아래와 같이 지정할 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>border</title>
  <style>
    h1{
      border:1px solid #f00;
    }
    h2{
      border-bottom:2px dotted black;
    }
  </style>
</head>
<body>
  <h1>h1</h1>
  <h2>h2</h2>
</body>
</html>

padding 영역

margin, border 영역보다 안쪽에 있으며 요소의 내부 여백을 담당한다.

padding 영역에서 사용할 수 있는 속성은 margin 영역에서 사용하는 속성과 형식이 매우 비슷하다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>padding</title>
  <style>
    p{
      border:1px solid black;
      padding:10px;
    }
  </style>
</head>
<body>
  <p>padding</p>
</body>
</html>

content 영역

content 영역은 시작 태그와 종료 태그 사이에 사용된 콘텐츠가 속하는 영역이다.

그래서 다른 박스 모델의 구성 요소와는 다르게 content 영역은 content 영역 자체를 다루는 속성은 없다.

다만, content 영역에 영향을 주는 width 속성과 height 속성이 있다.

width와 height 속성

width 속성은 content 영역의 너비를, height 속성은 content 영역의 높이를 지정하는 데 사용한다.

속성 값으로는 단위를 포함한 크기를 넣는다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>width&height</title>
  <style>
    div{
      width:100px;
      height:100px;
      border:1px solid black;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

box-sizing 속성

width와 height 속성은 content 영역에 직접 영향을 주는 속성이라서 때로는 의도치 않게 작동한다고 느껴질 때가 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>box sizing</title>
  <style>
    div{
      width:100px;
      height:100px;
      padding:10px;
      border:1px solid black;
      margin:10px;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

width와 height 속성에 100px을 적용했는데도 웹 브라우저에 표시된 요소의 너비와 높이는 122px이다.

그 이유는 웹 브라우저가 요소를 화면에 렌더링할 때 border, padding, content 영역의 너비와 높이를 종합적으로 계산하기 때문이다.

이를 해결하기 위한 가장 간단한 방법은 width 속성값을 border, padding 영역 크기를 제외한 78px로 설정하는 것이다.

그러면 요소의 너비와 높이는 100px(1 + 10 + 78 + 10 + 1)이 된다.

이러한 방법은 계산을 해야 하는 불편함이 있기 때문에 box-sizing 속성을 사용한다.

속성 값으로는 content-box와 border-box가 있다.

속성값	설명
content-box	width, height 속성의 적용 범위를 content 영역으로 제한
border-box	width, height 속성의 적용 범위를 border 영역으로 제한

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>box sizing</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        padding: 10px;
        border: 1px solid black;
        margin: 10px;
        box-sizing: border-box; /* width, height 속성의 적용 기준을 바꿈 */
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

box-sizing 속성은 width, height 속성의 적용 기준을 지정한다.

이 속성은 기본으로 content-box 값이 적용된 상태여서 width, height 속성으로 지정되는 영역을 content 영역으로 제한한다.

따라서 값을 border-box로 정의하면 width, height 속성의 지정 영역을 border 영역으로 바꿀 수 있다.

box-sizing 속성을 border-box 값으로 지정하면 width, height 속성에 지정한 크기에 요소를 맞추기 위해 content 영역의 너비와 높이가 자동으로 조절된다.

박스 모델의 성격과 display 속성

HTML의 모든 태그는 박스 모델을 가지고 있다.

그런데 이를 자세히 들여다보면 박스 모델도 블록, 인라인, 인라인 블록이라는 서로 다른 성격이 존재한다.

블록 성격
hn, p, div 태그를 사용했을 때 요소의 너비가 콘텐츠 유무와 상관없이 항상 가로 한 줄을 다 차지하는 것을 말한다.
그래서 hn, p, div 태그를 여러 번 사용하면 무조건 줄 바꿈이 된다.
인라인 성격
a, span, strong 태그를 사용했을 때 요소의 너비를 콘텐츠 크기만큼만 차지하는 성격을 말한다.
그래서 a, span, strong 태그를 여러 번 사용할 때 웹 브라우저의 수평 공간이 남아 있으면 한 줄로 배치된다.
인라인 블록 성격
인라인 블록 성격은 인라인 성격처럼 요소의 너비가 콘텐츠의 크기만큼만 차지하지만, 그 외의 성격은 브록 성격을 가지는 복합적인 성격을 말한다. 그래서 img 태그를 사용할 때 웹 브라우저의 수평 공간이 남아 있으면 한 줄로 배치된다.
블록 vs 인라인 vs 인라인 블록
박스 모델의 3가지 성격은 박스 모델의 구성 요소와 관련한 속성을 적용할 때 조금씩 차이가 있다.
블록 성격이나 인라인 블록 성격은 width, height, margin, padding 속성이 전부 적용되지만, 인라인 성격은 width, height 속성은 적용되지 않고 padding과 margin 속성은 각각 왼쪽과 오른쪽 방향만 적용된다.
display 속성
박스 모델의 성격은 display 속성을 사용하면 견경할 수 있다.
속성 값으로는 block, inline, inline-block을 사용한다.
예를 들어, 블록 성격인 태그를 인라인 성격으로 바꾸고 싶다면 display 속성값을 inline으로 지정하면 된다.

저작자표시 비영리 변경금지

'HTML & CSS > CSS' 카테고리의 다른 글

[CSS] CSS 필수 속성(배경 속성, 위치 속성, 애니메이션 속성) (1)	2024.01.07
[CSS] CSS 필수 속성(CSS의 특징, 텍스트 속성) (2)	2024.01.05
[CSS] CSS 선택자 (1)	2024.01.04
[CSS] CSS 기초 문법 (1)	2024.01.03