🧡CSS 박스모델
웹 페이지 내에 모든 콘텐츠는 고유의 영역을 가지고 있는데, 항상 직사각형으로 이루어져 있어 박스라고 부릅니다. 박스는 항상 너비(width)와 높이(height)를 가지고 CSS를 이용해 속성과 값으로 크기를 설정합니다.
(출처 : codestates)
💚 block vs inline vs inline-block
-
block 박스 : 줄바꿈이 되는 박스 (HTML
<h1>,<p>,<div>요소) -
inline 박스 : 줄바꿈이 일어나지 않고 크기 지정을 할 수 없는 박스 (
<span>요소 - ) -
inline-block 박스 : 줄바꿈이 일어나지 않고 block박스의 특징을 가지는 박스
-
inline 박스 요소의 경우,
width,height속성이 적용되지 않습니다. -
inline-block 박스는 inline박스처럼 다른 요소 옆에 붙으면서, 자체적으로 고유의 크기를 가집니다.
💚 박스를 구성하는 요소
content(콘텐츠 영역)
콘텐츠 경계가 감싼 영역으로, 요소의 실제 내용을 포함합니다. 콘텐츠의 너비와 높이가 영역의 크기이며 배경색과 배경이미지를 가지기도 합니다. box-sizing 속성값이 기본값인 content-box이면 속성을 사용해 영역의 크기를 명시적으로 설정할 수 있습니다.
padding (안쪽 여백)
콘텐츠 영역을 요소의 안쪽 여백까지 포함하는 크기로 확장합니다. border 박스 내부의 여백을 지정합니다.
border (테두리)
안쪽 여백 영역을 요소의 테두리까지 포함하는 크기로 확장합니다. 박스의 배경이나 이미지는 테두리 바깥 경계까지 늘어납니다. 심미적 외에도, 개발과정에서 각 영역이 차지하는 크기를 파악하기 위해, 레이아웃을 만들며 시각적으로 확인할 수 있도록 만듭니다. 속성으로 테두리 두께(border-width), 테두리 스타일, 테두리 색상을 가집니다.
🎀
border-readius속성을 사용하면 테두리의 모서리를 둥글게 표현할 수도 있다.
margin (바깥 여백)
요소와 인근 요소 사이의 빈 공간까지 포함하도록 테두리 요소를 확장합니다. 여백 영역의 크기는 top, right, bottom, left 순서의 값으로 구성됩니다(border 또한 같다). 음수 값을 지정하면 다른 요소와 간격이 줄어들고, 극단적으로 적용하면 겹치게 하거나 아예 사라지게 만들 수도 있습니다.
🎀 margin 과 padding 지정 순서
💚 박스 크기 측정 기준
- 박스의 크기를 디자인할 때 콘텐츠 영역만 고려하면 박스여백 때문에 레이아웃을 벗어날 수 있습니다. 따라서 여백과 테두리 두께를 포함해서 박스 크기를 계산해야 합니다.
*{
box-sizing : border-box;
}*는 모든 요소를 선택하는 셀렉터 입니다. 모든 요소를 선택해box-sizing: border-box를 추가하면 모든 박스에서 여백과 테두리를 포함한 크기로 계산됩니다. 여백에 의한 레이아웃의 틀어짐을 방지합니다.
(출처 : codestates)
💚 박스를 벗어나는 콘텐츠 처리
- 콘텐츠 크기가 더 큰 경우 박스 바깥으로 빠져나옵니다. 박스 크기에 맞춰 콘텐츠를 더 이상 표시하지 않거나, 박스 안에 스크롤을 추가해 확인할 수 있게 해야합니다.
overflow : auto;
콘텐츠가 넘치는 경우 스크롤을 생성하도록 합니다.
overflow: hidden;
넘치는 콘텐츠의 내용을 숨겨줍니다.
overflow-x, overflow-y 의 속성을 이용
가로방향, 세로방향, 두방향의 스크롤 방향을 설정할 수 있습니다.
