제수기 - 제발 수업내용을 기억해라

Box Model

모든 html 태그는 boxmole에 근거해서 화면에 배치된다.

• content : 태그의 실제내용 (text(Text Node), 자식tag(Element Node))
• padding : 내부 여백
• border : 경계선(테두리)
• margin : 외부 여백, 다른 태그와의 간격

개발도구상에서 시각화되므로, 자주 확인하면 좋다.
개발도구열기 : f12 또는 ctrl

border

padding

content와 border 사이의 여백

• padding 껐을 때
  

margin

외부와의 여백.

• 껐을 때
  

• html과 body도 margin이 있다.
  

• 마진 겹침현상

  인접한 부모/형제 요소의 margin값 중에 큰 값이 적용된다.
  

디스플레이 인라인 요소는 절대 너비와 높이를 주지 않는다.

• margin은 좌우로만 된다. 인라인 요소의 특징
  

패딩은 그런 거 없다. 다 잘 적용된다.

box의 위아래 옆을 top -> right -> bottom -> left 이렇게 부른다. 보는 순서도 이와 같다.

• 모아쓰기
• top -> right -> bottom -> left 순으로 한번에 쓰기
• 나눠쓰기
  다 가능하다.