모든 콘텐츠는 고유한 영역이 있다.
하나의 웹 페이지 내의 모든 콘텐츠는 고유의 영역을 가지고 있다.
그 영역은 항상 직사각형으로 이루어져 있기 때문에, 박스(box)라고 부른다.
모든 콘텐츠는 각자의 영역을 가지며, 일반적으로 하나의 콘텐츠로 묶이는 엘리먼트(요소)들이 하나의 박스가 된다.
박스는 항상 직사각형이고, 너비(width)와 높이(height)를 가진다.
CSS를 이용해 속성과 값으로 그 크기를 설정한다.
[HTML 예시]
<h1>Basic document flow</h1>
<p>test1</p>
<p>test2</p>
<p>Hello <span>like this one</span> and <span>this one</span> Hi <span>wow</span>, Bye</p>[CSS 예시]
h1 {
background: gray;
width: 60%;
}
p {
background: rgba(255,84,104,0.3);
width: 80%;
height: 200px;
}
span {
background: yellow;
width: 100px;
height: 100px;
}📌 Block과 inline
줄바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)
박스의 종류는 줄바꿈이 되는 박스와 줄바꿈이 없이 옆으로 붙는 박스로 구분할 수 있다.
- 줄바꿈이 되는 박스는
block 박스 - 줄바꿈이 일어나지 않고, 크기 지정을 할 수 없는 박스는
inline 박스 - 이 두 가지 박스 종류의 특징이 섞인, 줄바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는
inline-block 박스
줄바꿈이 되는 태그:
h1,p=> block box
줄바꿈이 되지 않는 태그:span=> inline box
Block 요소의 대표적인 예:
div,p
Inline 요소의 대표적인 예:span
span태그,inline 박스의 경우는width,height속성이 적용되지 않는다.
inline-block 박스는 inline 박스처럼 다른 요소의 옆으로 붙으면서, 자체적으로 고유의 크기를 가진다.
#span 태그에 display 속성을 추가하고, 값으로 inline-block을 지정
span {
background: yellow;
display: inline-block;
width: 100px;
height: 100px;
}| block | inline-block | inline | |
|---|---|---|---|
| 줄바꿈 여부 | O | X | X |
| 기본적으로 갖는 너비(width) | 100% | 글자가 차지하는 만큼 | 글자가 차지하는 만큼 |
| width, height 사용 가능 여부 | O | O | X |
박스를 구성하는 요소
border(테두리)를 기준으로 padding(안쪽 여백)과 margin(바깥 여백)이 있다.
📌 border (테두리)
테두리는 각 영역이 차지하는 크기를 파악하기 위해, 레이아웃을 만들면서 그 크기를 시각적으로 확인할 수 있도록 만든다.
p {
border: 1px solid red;
}border 속성에 적용된 각각의 값
테두리 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color)
📌 margin (바깥 여백)
각각의 값은
top,right,bottom,left로 시계방향
p {
margin: 10px(상) 20px(우) 30px(하) 40px(좌);
}값을 두 개만 넣으면
top과 bottom이 10px,left 및 right가 20px
p {
margin: 10px 20px;
}값을 하나만 넣으면 모든 방향의 바깥 여백에 적용
p {
margin: 10px;
}혹은 위치를 특정해 여백 추가하기
p { margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; }
- 위 규칙은 padding에도 동일하게 적용 가능
p {
padding: 10px 20px 30px 40px;
border: 1px solid red;
background-color: lightyellow;
}바깥 여백에 음수 값을 지정 시 다른 요소와의 간격이 줄어든다.
극단적으로 적용하면 화면에서 아예 사라지게 하거나, 다른 엘리먼트와 겹치게 만들 수도 있다.
p {
margin-top: -2rem;
}박스 크기 계산하기
📌 박스 크기
박스 크기보다 콘테츠 크기다 더 큰 경우에는 콘텐츠가 박스 바깥으로 빠져나온다.
이 경우에는 박스 크기에 맞게 콘텐츠를 더 이상 표시하지 않거나, 혹은 박스 안에 스크롤을 추가하여 콘텐츠를 확인할 수 있게 만든다.
p 태그에 overflow 속성을 지정해 박스보다 큰 콘텐츠에는 스크롤을 표시
p {
height: 40px;
overflow: auto;
}overflow 속성의 auto 값은, 콘텐츠가 넘치는 경우 스크롤을 생성하도록 한다.
넘치는 콘텐츠의 내용을 보여주고 싶지 않을 때에는 overflow 속성에 hidden 값을 사용하자.
overflow 속성은 x축과 y축을 지정해 가로 방향으로 스크롤 하거나 세로 방향으로 스크롤 할 수 있게끔 지정할 수 있다.
overflow-x 속성과 overflow-y 속성을 이용하면 두 방향을 모두 지정할 수 있다.
📌 처음 레이아웃을 디자인 할 때 가장 많이 하는 실수
: 박스에 적용할 여백을 고려하지 않고 박스의 크기를 디자인 하는 경우
박스의 크기를 디자인할 때 콘텐츠 영역만 고려하면, 개발 과정에서 처음 생각한 레이아웃을 벗어날 수 있다. 여백을 고려하지 않은 계산 방식은 레이아웃 디자인을 어렵게 만든다.
레이아웃 디자인을 조금 더 쉽게 하는 방법
여백과 테두리 두께를 포함한 박스 계산법
*은 모든 요소를 선택하는 셀렉터다.
모든 요소를 선택해 box-sizing 속성을 추가하고, border-box라는 값을 추가한다.
* {
box-sizing: border-box;
}이렇게 모든 요소에 box-sizing: border-box를 적용하면, 모든 박스에서 여백과 테두리를 포함한 크기로 계산된다.
content-box는 박스의 크기를 측정하는 기본값이다.
그러나 대부분의 레이아웃 디자인에서 여백과 테두리를 포함하는 박스 크기 계산법인border-box를 권장한다.
