박스모델

모든 태그들은 각자의 영역을 가지며 이 영역은 너비와 높이를 가지는 박스 형태를 취한다.

너비와 높이는 width와 heigth로 설정할 수 있으며 max와 min으로 최댓값과 최솟값을 설정할 수도 있다.

max-width(heigth) : 해당 html 요소가 가질 수 있는 최대 너비 또는 높이를 설정한다.

기본 설정값은 none이며 해당 html요소의 너비 또는 높이에 제한을 두지 않는 다는 뜻이다.

min-width(heigth) : 해당 html 요소가 가질 수 있는 최소 너비 또는 높이를 설정한다.

기본 설정값은 0이며 해당 html요소의 너비 또는 높이에 제한을 두지 않는 다는 뜻이다.

박스의 종류

박스의 종류에는 줄바꿈이 되는 박스와 줄바꿈이 없는 옆으로 붙는 박스로 구분 된다.

줄바꿈이 되는 박스(block), 줄바꿈이 일어나지 않고 크기 지정을 할 수 없는 박스(inline), 줄바꿈이 일어나지 않는 동시에 block박스의 특징을 가지는 inline-block 박스가 그 종류이다.

block박스와 다르게 inline박스는 width, height 속성이 적용되지 않는다.

대표적인 block 박스는 h태그와 p태그 등이 있으며 inline 박스는 span태그가 그 예이다.

박스 구성 요소

박스의 구성 요소는 border를 기준으로 padding(안쪽 여백)과 margin(바깥 여백)이 존재한다.

테두리(border)

border 속성은 content와 padding 영역을 둘러싸는 테두리의 스타일을 설정한다.

테두리 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color)을 설정 할 수 있다.

border-style

border-style 속성은 border를 다양한 모양으로 설정할 수 있다.

속성값으로는 dotted(점선), dashed(약간 긴 점선), solid(실선), none(테두리를 없앰), hidden(테두리가 존재하지만 표현되지는 않음)값이 있다.

border-width

border-width 속성은 border의 두께를 설정할 수 있다.

속성값으로는 css의 크기 단위를 이용하여 설정한다.

border-color

border-color 속성은 border의 색상을 설정할 수 있다.

속성값으로는 css의 color를 이용하여 설정한다.

바깥 여백(margin) & 안쪽 여백(padding)

margin에서의 각각의 값은 top, right, bottom, left로 시계 방향으로 나타낸다.

값이 두개만 있으면 첫 값이 top과 bottom이며 두번째 값이 left와 right가 된다.
값이 한개만 있으면 모든 방향에 여백이 적용된다.
특정 위치만 여백을 주고싶으면 margin뒤에 각 위치와 값을 적어주면 된다.

안쪽 여백인 padding 또한 margin과 똑같이 사용 하면 된다.

overflow

overflow는 요소의 컨텐츠가 너무 커서 요소의 박스 서식에 맞출 수 없을 때의 처리방법을 지정한다.

overflow의 속성값으로는 auto, hidden, visible, scroll 등이 있다.

auto : 컨텐츠가 넘어가는 경우 스크롤을 생성하여 보여준다
scroll : 컨텐츠가 넘어가지 않던 넘어가던 스크롤을 항상 생성한다.
hidden : 넘어가는 컨텐츠를 보여주지 않는다
visible : 넘어가는 컨텐츠를 보여준다.

content-box 와 border-box

레이아웃 디자인을 할때 content 영역만 생각하고 만들면 여백의 변수가 생길 수 있다.
만약 여백의 관리가 힘들다면 여백과 테두리 두께를 포함한 박스 계산방법인 box-sizing 속성의 border-box값을 넣어주면 된다.

*{
  box-sizing: border-box;
}