모든 콘텐츠는 고유한 영역(box)가 있다
모든 콘텐츠는 각자의 영역을 가지고 일반적으로 하나의 콘텐츠로 묶이는 요소들이 하나의 박스가 된다. 박스는 항상 직사각형이며 너비와 높이를 가진다.
block vs inline vs inline-block
박스는 줄 바꿈이 되는 block, 줄 바꿈 없이 옆으로 붙고 크기를 지정 할 수 없는 inline, 줄 바꿈이 없지만 크기 지정이 가능한 inline-block으로 구분 할 수 있다.
block
- 줄 바꿈이 일어남
- 기본적으로 상위 요소의 100%의 너비를 가짐
- 크기 지정이 가능함
<div>,<p>,<article>등
inline
- 줄 바꿈이 일어나지 않음
- 기본적으로 컨텐츠의 크기만큼 차지함
- 크기 지정이 불가능함
<span>,<img>,<a>등
inline-block
- 줄 바꿈이 일어나지 않음
- 기본적으로 컨텐츠의 크기만큼 차지함
- 크기 지정이 가능함
박스를 구성하는 요소
border (테두리)
ex. border: 1px solid black;
심미적 용도로 많이 쓰이지만 개발 과정에서 각 영역이 차지하는 크기를 파악하기 위해 레이아웃을 만들면서 그 크기를 시각적으로 확인 할 수 있도록 만든다.
border-width: 테두리 두께
border-style: 테두리 스타일
border-color: 테두리 색상
margin (바깥 여백)
ex. margin: 0 0 0 0;
테두리를 기준으로 박스 외부의 여백을 지정한다. 요소 간의 여백을 만들 때 많이 사용된다. 음수 값 지정도 가능하여 적용하게 되면 다른 요소와 간격이 줄어든다.각각 top, right, bottom, left 순으로 작성하며 몇 개의 값을 넣느냐에 따라 적용이 달라진다.
margin: 0;: 4면 모두 적용
margin: 0 0;: 상하, 좌우로 적용
padding (안쪽 여백)
ex. padding: 0 0 0 0;
테두리를 기준으로 박스 내부의 여백을 지정한다. 박스 내부의 컨텐츠와 여백을 만들 때 많이 사용된다. 각각 top, right, bottom, left 순으로 작성하며 몇 개의 값을 넣느냐에 따라 적용이 달라진다.
padding: 0;: 4면 모두 적용
padding: 0 0;: 상하, 좌우로 적용
박스를 벗어나는 콘텐츠 처리 overflow
박스의 height 값보다 콘텐츠가 차지하는 공간이 큰 경우 박스 바깥으로 콘텐츠가 빠져나오게 된다. 이 경우, 박스 크기에 맞춰 콘텐츠를 표시하지 않거나 스크롤바를 추가하여 콘텐츠를 확인 할 수 있게 만들 수 있다. overflow-x나 overflow-y를 사용해 한 축에만 적용도 가능하다.
auto: 넘치는 경우에 스크롤을 생성
hidden: 크기에 맞춰 콘텐츠를 가림
박스 크기 측정 기준
박스에 width, height 값을 지정하더라도 실제 표시되는 결과는 이와 달라 질 수 있는데, 이는 padding과 border값이 박스의 크기에 포함되는 점을 고려하지 않아서 발생하는 문제이다. 이 때, box-sizing: border-box; 속성을 적용하면 여백과 테두리 값을 포함하여 박스크기를 계산하게 된다. 일반적으로 레이아웃을 짤 때는 문서 전체에 해당 속성을 적용하여 혼란을 줄인다. (
*{
box-sizing: border-box; /* 기본 속성은 content-box */
}Uploaded by N2T