CSS의 박스 모델과 디스플레이

0. 오늘의 배울 것.

html 태그들은 박스모델을 따른다!

요소가 박스 안에 차곡차곡 쌓여있는 듯한 구조이기에, 박스모델 box model이라 불린다. 하나의 요소에 margin, border, padding, content 영역이 박스처럼 각자 자신의 영역을 차지하기 때문에 css를 잘 다루기 위해선 이 모델을 잘 알고, 각 속성을 어떻게 다루는지 파악해야 한다.

각 박스모델 태그들이 html이라는 하나의 파일 내부에서 어디에 놓일지 기본적으로 주어지는 위치 흐름이 바로 디스플레이다!

html은 여러 요소들로 이루어졌다. 우리가 div 태그를 연달아서 쓰면 div 태그들은 박스가 차곡차곡 쌓이듯 위에서 아래로 배치된다.

반면에 span 태그를 여러 개 쓰면, span 태그들은 줄줄이 소세지처럼 연달아서 왼쪽에서 오른쪽으로 흐르듯 배치된다. 이렇게 각 태그들은 기본적으로 어디에 배치될지 속성을 가지고 있는데 그게 바로 display 속성이다. 이 display 속성을 입맛대로 바꾸어 요소들을 배치하자.

박스 모델

1. 박스모델

박스 모델이란, 요소의 영역을 박스처럼 표현한 것이다. 각 박스는 margin, border, padding, 그리고 내부 content 영역이 있다.

2. border과 border-radius

border은 박스모델 요소들의 가장자리 테두리이다.

이 border에 여러 속성을 줘보자.

.div{
    border: 3px solid #ff3f3f;
    /* 테두리는 3픽셀 두께에 실선으로, ff3f3f색으로. */
    border-radius: 8px;
    /* 각 모서리를 8px만큼 둥글게. */
}

3. box-sizing

박스모델에서 크기는 어떻게 정할까? width=400px 이라 속성 값을 부여해도 실제로 개발자도구로 살펴보면 440px이라든가, 다른 값이 나온다. 왜 이런 것일까?

일반적으로 width: 400px 이라 한다면 안의 content만 딱 400px 너비가 된다. 따라서 양 옆의 padding, border 두께까지 모두 합해서 계산한 게 실제 너비가 된다.

이를 미리 계산하고 css를 결정하는 것에 불편함이 있어, box sizing이라는 속성이 등장했다. 컴퓨터에게 width 값을 주면 알아서 content와 border, padding을 계산해 총 너비를 지정하게 하는 게 바로 box-sizing 이다.

// 앞으로 이 태그는 그냥 모든 css 문에서 쓰는 거라 생각하자.
*{
    box-sizing: border-box;
}

4. overflow

한 박스 안에 글자가 너무 많아서 넘치면 어떻게 할까? 일반적으로는 글자가 삐져나와 못생겨진다. 때문에 삐져나온 글자를 어떻게 처리해야할지는, overflow 속성으로 꾸며보자.

.div{
    overflow: hidden;
    /* 넘치는 글은 안보이게 잘라버림. */
    overflow:scroll;
    /* 스크롤이 생성됨 */
}

overflow: scroll; 와 white-space: nowrap; 속성을 주면 줄바꿈이 사라져서 가로 스크롤도 생긴다.

5. 마진 상쇄

margin collapsing 이라고도 불리는 마진 상쇄. 이는 A 와 B 요소가 붙어있을 때, 둘의 마진이 서로 겹치면서 상쇄되는 현상이다. 마진은 부모 자식간에서도 상쇄될 수 있지만, border과 padding은 상쇄되지 않는다.

따라서 두 요소 간 간격을 줄 때에는 padding이나 두 요소의 margin 사이에 다른 공백 요소를 끼워넣는 식으로 상쇄를 막을 수 있다.

.A{margin: 32px;}
.B{margin: 16px;}
/* 이 경우 A와 B 중 더 큰 32px 마진만 적용된다. 둘이 겹치기 때문이다!! 이게 바로 마진 상쇄 */

display 속성

1. 블록과 인라인

태그마다 display 속성 값이 다르기 때문에, 각각 기본적으로 배치되는 방식이 다르다. 예를 들어 div 태그는 위에서 아래로 쌓이듯 배치되고, span 태그는 왼쪽에서 오른쪽으로 흐르듯 배치된다.

이렇게 위에서 아래로 배치되는 것은 display 속성에서 block 값을 가지고,

좌에서 우로 배치되는 것은 display 속성에서 inline 값을 가진다!

• display: block; div, h1, li, p 등 위에서 아래로 배치되며 너비와 높이를 지정할 수 있는 요소.
• display: inline; span, a, img, label, input 등 평소 글을 쓰는 방향으로 배치되며 화면이 꽉 차면 다음줄로 넘어가서 배치된다. 너비와 높이를 지정할 수 없으나 예외적으로 img는 지정 가능!!

2. display 속성 하나 더! 인라인 블록

앞에서 공부했듯 인라인은 크기가 없다. 그래서 width, height를 주고 스타일을 주면 다른 옆의 요소들에게 스타일이 침범당할 수 있다.

만약 인라인처럼 글 쓰는 방향으로 배치하면서, 블록처럼 width와 height 속성으로 크기를 정하고 싶다면 display 속성 값을 inline-block으로 설정하자.

• display: none; 태그를 감출 대 사용하는 값이다.

3. float

원래 요소들은 display 속성에 의해 위에서 아래로, 좌에서 우로 배치된다.

이 흐름에서 벗어나게 해주는 게 바로 float 속성이다. float는 해당 요소가 공중에 떠있는 것처럼 배치한다.

<img clas ="img" src=""/>
<div>
    글자를 적어보자 가나다라
</div>

.img{
    float: right;
}

float 속성이 없을 때엔 이미지 아래에 div 태그가 배치되지만, img에 float 속성을 주면 div 위에 img가 떠있고, img의 주변에 다른 태그들이 배치된다.