박스 모델

박스의 구성

• content
• padding
• border
• margin

box-sizing 속성

• box-sizing: content-box
  • 패딩과 보더를 뺀 순수 컨텐트 박스의 폭과 높이를 지정
• box-sizing: border-box
  • 패딩과 보더를 포함하고 마진만 제외한 전체 박스의 폭과 높이를 지정

image.png

• 항상 border-box 값을 사용하게 설정하는 법

  *, ::before, ::after {
    box-sizing: border-box;    
  }

마진

인라인 레벨

• 인라인 레벨 요소는 위/아래 마진이 적용 안됨
• 위/아래 마진을 적용하려면 inline-block 레벨로 지정. 이때 주변의 인라인 요소에도 같이 적용됨

음수 마진

• 음수 마진을 주면 부모요소 바깥 또는 주변 요소와 겹치면서 튀어나올 수 있음
• 어떤 식으로 튀어나오는가는 경우에 따라 다름
• 왼쪽 가로 음수 마진
  • 자기 자신을 왼쪽으로 이동
  • 왼쪽의 요소와 겹칠 수 있음
• 오른쪽 가로 음수 마진
  • 인라인 레벨 요소인 경우
    • 자기 자신이 아닌 다음(오른쪽) 요소를 왼쪽으로 끌어올림
    • 오른쪽의 요소와 겹칠 수 있음
  • 블럭 레벨 요소인 경우
    • 자기 자신의 오른쪽 크기를 더 크게 만듬
    • 왼쪽, 오른쪽 마진을 모두 음수로 만들면 양쪽으로 튀어나옴
• 위쪽 세로 음수 마진
  • 자기 자신을 위쪽으로 이동
  • 위쪽의 요소와 겹칠 수 있음
• 아래쪽 세로 음수 마진
  • 자기 자신이 아닌 다음(아래쪽) 요소를 위쪽으로 끌어올림

마진 통합

• 위/아래 마진이 붙어있는 경우에는 (아래 마진 값 + 위 마진 값) 이런 식으로 합이 적용되는 것이 아님
  • 통합되어 둘 중 더 큰 값만 적용
• 위/아래 마진은 절대적인 마진이 아님
  • 다음 요소와 최소한 이 정도 떨어져 있어야 한다는 표시임
• 붙어 있는 형제 요소 뿐 아니라 부모 자식간에도 적용
  • 부모가 위 패딩이 0이면 첫번째 자식의 위 마진과 부모의 위 마진이 통합
  • 자식의 위 마진이 부모의 위 마진처럼 작동
• 부모-자식간 위 마진 통합을 막는 방법
  • 부모 overflow: auto
  • 부모 border: 1px solid;

배경색

• 마진에는 색상을 지정할 수 없고 항상 투명
  • 따라서 마진 영역의 배경색은 항상 부모의 배경색
• 보더 및 패딩 내부에는 색상을 지정할 수 있으며 별도로 지정하지 않으면 디폴트는 투명
  • 따라서 보더 및 패딩 내부의 색상은 별도로 지정하지 않으면 부모의 배경색
• 부모와 첫번째 자식의 위 마진이 통합되는 경우 해당 마진은 부모의 마진으로 취급
  • 따라서 첫번째 자식 요소 위쪽의 배경색은 부모의 배경색이 아닌 부모의 부모의 배경색
  • 따라서 첫번째 자식 요소의 위 마진은 0으로 하는 것이 안전함
  • 첫번째 자식 요소의 배경색도 부모에 의존하지 않고 독자 배경색을 쓰는 것이 안전함