박스 모델
모든 콘텐츠는 고유한 영역이 있다.
모든 콘텐츠는 각자의 영역을 가지며, 보통 엘리먼트로 묶이는 콘텐츠가 하나의 박스가 된다.
박스는 항상 사각형이고 그 너비(width)와 높이(height)가 있다.
줄바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)
- block 박스 : 줄바꿈이 되는 박스
- inline 박스 : 옆으로 붙는 박스
- inline-block 박스 : 옆으로 붙으면서 줄바꿈이 되는 박스
block level element(노란색 확인할 것)
inline level element(노란색 확인할 것)
inline-block 박스(노란색 확인할 것)
줄바꿈이 되는 태그(block 엘리먼트 목록)
<address>,<article>,<aside>,<blockquote>,<details>,
<dialog>,<dd>,<div>,<dl>,<dt>,<fieldset>,<figcaption>,
<figure>,<footer>,<form>,<h1>, <h2>, <h3>, <h4>, <h5>, <h6>,
<header>,<hgroup>,<hr>,<li>,<main>,<nav>,<ol>,<p>,
<pre>,<section>,<table>,<ul>
출처 : MDN block 엘리먼트 목록
줄바꿈이 되지 않는 태그(inline 엘리먼트 목록)
<a>,<abbr>,<acronym>,<audio>,<b>,<bdi>,<bdo>,<big>,
<br>,<button>,<canvas>,<cite>,<code>,<data>,<datalist>,
<del>,<dfn>,<em>,<embed>,<i>,<iframe>,<img>,<input>,
<ins>,<kbd>,<label>,<map>,<mark>,<meter>,<noscript>,
<object>,<output>,<picture>,<progress>,<q>,<ruby>,<s>,
<samp>,<script>,<select>,<slot>,<small>,<span>,
<strong>,<sub>,<sup>,<svg>,<template>,<textarea>,
<time>,<u>,<tt>,<var>,<video>,<wbr>
출처 : MDN inline 엘리먼트 목록
block vs inline-block vs inline
| block | inline-block | inline | |
|---|---|---|---|
| 줄바꿈 여부 | 줄바꿈됨 | 줄바꿈 되지 않음 | 줄바꿈 되지 않음 |
| 기본적으로 갖는 너비(width) | 100% | 글자가 차지하는 만큼 | 글자가 차지하는 만큼 |
| width, height 사용 가능 여부 | 가능 | 가능 | 불가능 |
박스를 구성하는 요소
border(테두리), padding(안쪽 여백), margin(바깥 여백)
border(테두리)
테두리는 심미적으로도 필요하지만, 개발 과정에서도 매우 의미있게 사용된다.
각 영역이 해당하는 크기를 알기 위해서 보통 레이아웃을 만들 때에 다음과 같이 그 크기를 시각적으로 확인할 수 있도록 만든다.
ex)
p {
border: 1px solid red;
}각각의 값은 테두리 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color)이다.
괄호 안에 적힌 것들이 바로 border를 구성하는 세부 속성들이다.
관련된 나머지 테두리 스타일은 여기에 들어가면 볼 수 있다.
margin(바깥 여백)
ex)
p {
margin: 10px 20px 30px 40px;
}각각의 값은 top, right, botton, left로 시계방향이다.
어떻게 적용되는지 확인하려면 개발자 도구에서 Element 탭에서 확인하면 된다.
margin은 주황색으로 표현된다.
아래는 예시 그림이다.
ex)
p {
margin: 10px 20px;
}값을 두개만 넣으면 top과 bottom이 10px, left 및 right가 20px이다.
ex)
p {
margin: 10px;
}값을 하나만 넣으면 모든 방향의 바깥 여백에 적용된다.
ex)
p {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}위는 방향을 특정한 속성이다.
바깥 여백은 재미있게도 음수값이 지정이 가능하다.
음수 값의 여백을 통해 다른 엘리먼트와의 간격을 떨어뜨리는 것이 아닌, 오히려 줄어들게 만들 수 있다.
극단적으로 적용하면, 화면(viewport)에서 아예 사라지게 하거나, 다른 엘리먼트와 겹치게 만드는 것도 가능하다.
ex)
p {
margin-top: -2rem;
}padding(안쪽 여백)
값 순서에 따른 방향은 margin과 동일하다.
ex)
p {
padding: 10px 20px 30px 40px;
}배경색이나 border를 적용하면 더욱 안쪽 여백을 선명하게 볼 수 있다.
ex)
p {
padding: 10px 20px 30px 40px;
border: 1px solid red;
background-color: lightyellow;
}개발자 도구에 들어가 Element 탭의 그림을 확인하면 padding은 초록색으로 표현된다.
넘치는 컨텐츠 처리
기복적으로 박스 크기보다 컨텐츠 크기가 더 큰 경우, 박스 바깥으로 빠져나오는 것이 기본 동작이다.
하지만 대부분 이런 상황을 원치 않을터이다.
이 때에, 한정된 박스 크기에 맞게 컨텐츠가 더이상 표시되지 않게 하거나, 혹은 박스 안쪽으로 스크롤하여 컨텐츠를 볼 수 있게 만드는 것이 가능하다.
ex)
p {
height: 40px;
overflow: auto;
}auto 속성은 컨텐츠가 넘치면 자동으로 스크롤되게 만든다.
아예 넘치는 컨텐츠를 무시하고 가리고 싶을 경우 hidden을 사용한다.
overflow 속성은 x축과 y축을 따로 지정하는 것도 가능하다. (overflow-x , overflow-y)
이렇게 하면 한 방향으로만 스크롤이 가능하게 만들 수도 있다.
박스 크기 측정 기준
<div id="container">
<div id="inner">
안쪽 box
</div>
</div>
#container {
width: 300px;
padding: 10px;
background-color: yellow;
border: 2px solid red;
}
#inner {
width: 100%;
height: 200px;
border: 2px solid green;
background-color: lightgreen;
padding: 30px;
}여기서 문제가 생긴다.
#container의 너비는 300px이 아니다. 정확히 324px이다. 아래는 그 계산의 결과이다.
300 (콘텐츠 영역)
+ 10 (padding-left)
+ 10 (padding-right)
+ 2 (border-left)
+ 2 (border-right)#inner의 100%는 300px이 아니다. 364px을 차지하고 있다. 왜 그럴까?
300 (300px의 100%)
+ 30 (padding-left)
+ 30 (padding-right)
+ 2 (border-left)
+ 2 (border-right)우리가 생각하는 박스의 크기는 여백을 포함한 것이 아니다.
박스의 사이즈는, 오롯이 콘텐츠 영역에만 적용되어 있다.
이러한 계산 방식은 레이아웃을 어렵게 만든다.
여백과 테두리 두께를 포함한 박스 계산 방법
* {
box-sizing: border-box;
}위를 추가한 결과이다.
<div id="container">
<div id="inner">
안쪽 box
</div>
</div>
* {
box-sizing: border-box;
}
#container {
width: 300px;
padding: 10px;
background-color: yellow;
border: 2px solid red;
}
#inner {
width: 100%;
height: 200px;
border: 2px solid green;
background-color: lightgreen;
padding: 30px;
}이렇게 해주면, 300px은 이후에 모든 여백과 테두리를 포함한 크기로 계산된다.
* 셀렉터는 HTML의 모든 태그, 모든 영역에 적용하겠다는 의미이다.
box-sizing 은 페이지 일부분에 적용할 필요가 없다. 모든 페이지에 적용하는 것이 합리적이다.
(오히려 혼란을 가중시키기 때문이다.)
박스 크기 측정 기준
(박스 측정 기준의 기본값은 content-box 이다. border-box를 권장한다.)
