<22.03.14> CSS 공부 일지 #02. Box-Model에 대해

mayberry 2022. 3. 14. 11:57

CSS를 사용하는 가장 큰 이유는, 웹 페이지의 예쁜 디자인이다. 그리고 예쁜 디자인 안에는 사용자들이 웹 페이지 화면을 한 눈에 사로잡을 페이지의 레이아웃 구성이다. 그리고 이를 위해 CSS는 기본적인 '박스 모델'이라는 개념을 사용하고 있다. CSS를 활용하여 레이아웃을 구성할 때 박스 모델의 개념을 이해하지 않으면 안된다. 그렇다면 박스 모델이란 무엇일까?

1. Box Model이란?

모든 HTML 요소는 예외없이, 상자(Box) 모양으로 구성된다. 이러한 구조를 박스 모델(Box Model)이라고 한다. 그리고 박스 모델을 구성하는 네 가지 요소들이 있다. 아래의 그림을 보자.

위 그림은, 크롬을 사용할 경우 개발자 도구(F12)를 사용한 적이 있다면, 한 번쯤 보았을 것이다. 위는 박스 모델을 가장 잘 표현한 그림이다. 박스 모델은 margin - border - padding - content로 총 네 가지의 구성으로 이루어져 있다. 각 구성에 대해 설명하겠다.

1. Content - 실제 글씨가 삽입되는 부분(사용자에게 출력될 핵심 컨텐츠 ㅡ 텍스트, 비디오, 이미지 등 실제 내용)

2. Border - 테두리 영역

3. Padding - Content 영역과 Border 영역 사이의 여백

4. Margin - 외부 여백(다른 요소들과의 여백으로 작용)

위 네 가지 요소들은 CSS 속성을 통해 사용자 임의로 설정해줄 수 있으며, 그를 통해 HTML 태그들의 위치나 크기를 자유자재로 설정할 수 있다. 그럼 실제 HTML 코드와 CSS 코드를 통해 위 네 개의 요소들의 속성을 어떻게 지정해주고 웹 브라우저에서는 어떻게 출력되는지 확인해보자.

<body>
    <div>
    	Hello CSS
    </div>
</body>

위와 같은 HTML 코드가 있다고 가정하자. 웹 브라우저 화면에는 Hello CSS만 출력될 것이다. 아래 CSS 코드를 통해 우선 <div> 태그의 테두리를 출력해보자.

div {
    border: 1px solid black;
}

border 속성을 이용하면 테두리를 표기할 수 있다. '선굵기 선종류 색깔' 순서로 작성하면 된다. 위 코드를 적용한 결과는 아래와 같다.

<div> 태그에 테두리가 생겼다. 여기서 박스 모델의 네 가지 요소들을 설명하자면, 'Hello CSS' 글자가 Content이며, 검은색 테두리가 Border, 그리고 Content와 Border 사이의 여백 ㅡ 지금은 0으로 되어있기 때문에 붙어있다. ㅡ 이 Padding, 테두리 외부 여백이 Margin이다.

그럼 지금부터 CSS 코드를 통해 박스 모델의 네 가지 요소들 중 Padding과 Margin에 대해 눈으로 직접 확인해보자.

1-1. Padding

Content와 Border의 경우 위 예시 코드들을 통해 확인하였으니 Padding과 Margin에 대해서 알아보도록 하겠다. 우선 Padding은 전술했듯이 Content와 Border 사이의 여백이다. Hello CSS를 출력했던 예시 사진을 한 번 더 보자.

테두리와 Hello CSS의 간격이 거의 없다. Padding 속성에 값을 주어 테두리와 글자 사이의 여백을 벌려 조금 보기 좋게 해보자.

div {
    border: 1px solid black;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

padding 속성은 상하좌우 각각 개별적으로 값을 설정함으로써 padding 여백을 지정해줄 수 있다. 위 코드의 경우 top, right, bottom, left 속성을 모두 이용하여 상하좌우에 모두 여백을 주었다. 위와 같이 설정하면 웹 브라우저에는 아래와 같이 출력된다.

Content와 Border 사이에 여백이 생긴것을 확인할 수 있다.

1-2. Margin

margin 속성은 외부 공백을 의미한다고 했다. 즉 border 영역을 기준으로 바깥부분의 영역인데, 이 또한 CSS 코드를 통해 사용할 수 있다. 설명만으로는 이해가 부족할 수 있으니, 여태까지 작성했던 코드에서 margin-top 속성만 따로 주어 margin 영역에 대해 감을 잡아보자.

div {
    margin-top: 50px;
    border: 1px solid black;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

margin 또한 top, right, bottom, left와 같이 상하좌우별로 별도의 여백을 설정할 수 있다. 하지만 이번에는 top 속성만 주었다. 웹 브라우저에는 아래와 같이 출력된다.

Hello CSS를 포함한 박스 모델의 윗부분에 여백이 생긴것을 확인할 수 있다. 이는 top 속성을 주었기 때문에 그런 것인데, left, right 속성을 추가하면 좌우 여백 또한 넓힐 수 있다.

margin을 활용하면 요소(HTML 태그)간 간격도 지정할 수 있다. 두 개의 요소가 아래와 같이 위치해있다고 가정해보자.

<div>
    Hello CSS
</div>
<div>
    Hello HTML
</div>

<div> 태그를 두 개 사용하였기에 적용된 CSS도 모두 동일하다. 그 중 margin 속성은 제외하였는데, 이렇게 될 경우 margin값은 모두 0이기에, 각 <div> 태그는 서로 경계없이 모두 붙어버렸다. 여기서 margin 속성을 통해 두 개의 <div> 태그의 간격을 벌려보자.

div {
    margin-bottom: 20px;
    border: 1px solid black;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

margin-bottom에 20px의 여백값을 주면서 두 개의 <div> 태그 간격이 넓혀지게되었다. 이처럼 margin 속성을 이용하면 서로 다른 요소간 간격을 조정할 수 있다.

2. shorthand 표기법

여태껏 padding과 margin 속성을 다루면서 좌우상하별로 속성을 모두 지정해주었다. 하지만 CSS에서는 shorthand 표기법을 통해 margin-top, margin-bottom처럼 일일이 표기하지 않아도 자동으로 좌우상하 값을 지정할 수 있게 도와준다. 위에서 사용하였던 코드를 다시 한번 보자.

div {
    border: 1px solid black;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

padding의 상하가 각각 10px, 좌우가 각각 20px로 설정되어 있다. 위 코드를 shorthand 표기법으로 바꾸면 아래와 같다.

div {
    border: 1px solid black;
    padding: 10px 20px;
}

padding이라는 속성만을 이용하고, 그 값으로는 10px(top, bottom), 20px(left, right)로 지정해주면 된다. 이처럼 shorthand 표기법을 알고 있으면 상하좌우 픽셀값을 편리하게 적용할 수 있다. 상하좌우이기 때문에 shorthand의 값으로는 최대 네 개의 값만 올 수 있으며, 값이 한 개, 두 개, 세 개, 네 개 올 때마다 적용되는 영역이 다른데. 이는 아래와 같다.

1. 한 개 값 : 모든 네 면(상하좌우)에 적용

2. 두 개 값 : 첫 번째는 상하, 두 번째는 좌우에 적용

3. 세 개 값 : 첫 번째는 상, 두 번째는 좌우, 세 번째는 하에 적용

4. 네 개 값 : 첫 번째는 상, 두 번째는 우, 세 번째는 하, 네 번째는 좌에 적용 (시계방향으로 적용)

3. box-size 계산하기

지금까지 박스 모델에 대한 설명과 박스 모델을 이루는 네 가지 구성요소들에 대해서 알아보았다. 이번 섹션에서는, width나 height, 각 여백값들을 통해 실제 웹 브라우저 화면에 출력되는 박스모델의 길이 계산에 대해 알아보겠다.

Hello CSS라고 적힌 정사각형의 박스를 웹 브라우저 화면에 출력하고자 한다. 아래 HTML 코드와 CSS 코드를 통해 한 번 확인해보자.

<div>
    Hello CSS
</div>

div {
    margin: 10px;
    border: 1px solid black;
    padding: 10px 20px;
    width: 150px;
    height: 150px;
    background-color: blue;
}

위 코드를 통해 우리가 웹 브라우저에 출력하고자 하는 것은, 가로 길이와 세로 길이가 모두 150인 정사각형의 Hello CSS 박스이다. margin 값으로 10px를 주고, padding 값으로는 상하 10px, 좌우 20px씩 주었다. 그리고 Hello CSS를 포함하는 Content의 width와 height를 각각 150으로 주어 정사각형이 될 수 있도록 했다. 위와 같이 코드를 작성하여 웹 브라우저 화면을 확인하면 아래와 같다.

얼핏 보기엔 정사각형같다. 그런데 진짜 정사각형이 맞을까? 아니다. 위 그림에서 출력된 도형의 가로는 192px, 세로는 172px이다. 왜 그럴까?

바로 padding 때문이다. 우리는 위 코드를 통해 content의 width와 height를 동일한 값(150px)로 설정함으로써 웹 브라우저에 출력될 때 정사각형이 나올 것이라 예측했지만, 실제 padding 여백과 border의 굵기가 포함되어 사각형 내부의 공간이 더 커졌다. 구글 크롬 브라우저의 개발자 도구에서 확인해보자.

개발자 도구에서 확인한 박스 모델의 레이아웃이다. padding의 상하가 10px, 좌우가 20px로써, 실제 웹 브라우저에 출력된 도형의 실제 width와 height는 padding 값이 포함되어버렸다.ㅡ만약 border가 있다면 border 값도 포함된다.ㅡ 따라서 margin을 제외하고 실제 화면에 출력되는 컨텐츠의 실제 width를 구하는 식은 아래와 같이 된다.

real width = left border(1) + left padding(20) + content-width(150) + right padding(20) + right border(1)

real height = top border(1) + top padding(10) + content-height(150) + bottom padding(10) + bottom border(1)

실제 가로 세로 길이가 150인 정사각형의 블럭을 만들고 싶다면 padding 사이즈까지 고려하여 CSS 코드를 작성해야 한다. 이를 고려하여 작성하면 아래와 같다.

div {
    margin: 10px;
    border: 1px solid black;
    padding: 10px 20px;
    width: 108px;
    height: 128px;
    background-color: blue;
}

그럼 앞으로 HTML 문서를 작성할 때마다 padding 값을 생각하면서 width와 height를 작성해야 하는가? 그렇지 않다. box-sizing이라는 속성을 이용하면 width, height만 입력하고도 우리가 원하는 크기를 가진 블럭을 설정할 수 있다. 아래 한 줄만 추가해주면, 더 이상 padding과 border를 고려하지 않아도 된다.

box-sizing : border-box;

위 내용을 추가하지 않으면, box-sizing 옵션은 기본적으로 content-box로 설정이 되는데, 이렇게 될 경우 width와 height는 content의 width와 height가 설정되는 것이다. 그렇기 때문에 padding과 border를 고려해야 했다. 하지만 box-sizing을 border-box로 설정한다면, border의 width와 height가 설정되는 것이기 때문에, padding 값을 임의로 설정해도 전체 블럭의 사이즈에는 영향이 없어지는 것이다. 실제 위 코드를 추가한 CSS코드는 아래와 같다.

div {
    box-sizing: border-box;
    margin: 10px;
    border: 1px solid black;
    padding: 10px 20px;
    width: 150px;
    height: 150px;
    background-color: blue;
}

위 코드를 실행하면 아래와 같다.

오늘은 CSS의 box-model에 대해 알아보았다. box-model을 이루는 네 가지의 구성요소와 이를 활용하여 박스의 크기를 지정하는 법까지. 다음에는 더욱 재미있는 공부거리를 들고 찾아오겠다.

P. S 조잡한 글 읽어주셔서 감사합니다! 혹시나 틀린 정보가 있다면 과감한 지적(하지만 욕은 삼가해주시면 감사하겠습니다 ㅎㅎ) 부탁드립니다.

저작자표시 비영리 변경금지 (새창열림)