.jpeg)
Box model
모든 콘텐츠는 고유한 영역이있다.
하나의 콘텐츠로 묶이는 엘리먼트(요소)들이 하나의 박스가 된다.
박스는 항상, 직사각형이고, 너비(width)와 높이(height)를 가진다.
줄바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)
바꿈이 되는 박스는 block 박스, 줄바꿈이 일어나지 않고, 크기지정을 할 수 없는 박스는 inline 박스라고 부른다.
줄바꿈이 되는 태그: <h1> <p>
줄바꿈이 되지 않는 태그: <span>
block 박스와는 다르게 inline 박스는 width, height 속성이 적용되지 않는다.
박스를 구성하는 요소
border(테두리)를 기준으로 padding(안쪽 여백)과 margin(바깥 여백)
border (테두리)
테두리는 심미적인 용도 외에도, 개발 과정에서도 매우 의미있게 사용된다. 각 영역이 차지하는 크기를 파악하기 위해, 레이아웃을 만들면서 그 크기를 시각적으로 확인할 수 있도록 만든다.
<div style="border: 1px solid #ddd;"></div>테두리 굵기(border-width), 스타일(border-style), 색(border-color) 중 선택하여 사용할 수 있으며, 순서는 영향을 주지 않는다.
테두리 경계의 모서리를 둥글게 만들고자 할 때는 border-radius를 사용한다.
margin (바깥 여백)
박스를 구성하는 요소중 가장 바깥쪽에 위치했다.
<div style="margin: 10px 20px 30px 40px;"></div>상하 좌우 여백의 값을 각각 줄수있다.
각각의 값은 top,right,bottom,left로 시계방향이다.
<div style="margin: 10px 20px;"></div>값을 두개만 넣으면 top과 bottom이 10px, left 및 right가 20px
<div style="margin: 10px;"></div>값을 하나만 넣으면 모든 방향의 바깥 여백에 적용
padding (안쪽 여백)
padding은 border를 기준으로 박스 내부의 여백을 지정,
값의 순서에 따른 방향은 margin과 동일하게 top, right, bottom, left
<div style="padding: 10px 20px 30px 40px;"></div>절대 단위: px, pt 등
상대 단위: %, em, rem, ch, vw, vh 등
