기본적으로 div태그와 비슷하지만 태그 이름을 통해 어떤 용도로 쓰일 지 의미를 유추하기 쉽게 만든 태그
- e.g.) header, footer, section 등
- 상대적 단위: 절대적인 기준을 통해 만들어진 것이 아닌 대상의 크기에 따라 기준이 달라지며 그것에 비교해 만들어진 단위
- e.g.) px(픽셀, 해상도와 디스플레이의 크기에 비례해 만들어진 단위), vh(view height), %, rem, em 등
- 절대적 단위: 절대적인 기준을 통해 만들어진 단위
- e.g.) 길이 단위인 mm, m 등
- block inline inline-block none flex grid 특징 줄바꿈, 자기만의 영역이 있음. 컨텐츠 한정 영역, top, bottom margin, width, height등이 적용이 안 됨. 줄바꿈 없이 자기만의 영역이 있음. 표시 안 함 유연하게 종, 횡으로 배치 틀을 정해서 해당 틀에 맞게 배치
margin은 border 바깥 외부 영역, padding은 border 안쪽 내부 영역
위는 margin left를 100px준 것, 아래는 padding left를 100px준 것
border를 기준으로 바깥영역은 외부(margin), 안쪽 영역은 내부(border, padding, content)
default값인 box-sizing의 크기는 content-box
box-sizing의 속성 중 border-box를 적용하면 border와 margin의 경계가 크기
box-sizing을 content-box로 하면 padding과 content의 경계가 크기
content-box, border-box, initial, inherit