Block level 🆚 Inline level

HTML Tag의 종류

HTML에서 Tag는 크게 Block level, inline level 2가지로 나뉜다.

• Block level : 부모요소 내에서 가질 수 있는 너비를 가지는 요소

  • 마치 Browser의 Width와 같은 크기의 Block을 위에서 부터 쌓는 것과 같다.
  • 해당 Element가 가지는 width의 default값은 auto
    • 즉, Block element는 기본적으로 부모요소의 width값 내에서 margin을 제외한 차지할 수 있는 너비를 가지게 되며 Browser / 부모 요소의 크기 변화에 동적으로 반응한다.
      • width: 100%는 부모요소의 width을 그대로 가지게 됨으로 auto/설정 안했을 때와 차이가 있음!

• inline level: 자신의 content만큼의 영역을 가지며 다음에 오는 element에 대해서는 줄바꿈이 발생하지 않는 특성을 가진다.

  • width를 설정해도 display속성을 block level로 바꾸어야 적용된다.
  • margin은 x축으로만 적용이 되며 (y축으로는 line-height가 적용) padding은 시각적으로 추가되나 실제로 공간을 차지하지 않기에 다른 element와 overlap 될 수 있다.

Height

• Height의 default는 auto로 마찬가지로 요소의 content만큼 높이를 차지한다. 주의할 점으로 block level요소는 width로만 차지할 수 있는 만큼의 영역을 차지하기만 height는 그렇지 않기에 초기 body tag의 높이는 100vh가 아니라 body 내에 있는 content들의 높이이다.

  • 초기 body에 대해 수직정렬이나 자식 item에 height: 100%를 주어도 body의 기본 height는 auto로 자식 요소들과 같은 높이이기 때문에 제대로 작동하지 않을 수 있다.

• inline-block:_ inline level과 block level의 혼합형
  • Block Element와 같이 크기를 줄 수 있으나
    • inline level처럼 줄바꿈은 일어나지 않는다.
  • 크기를 배정하지 않았을 경우 content-size를 초기 크기로 가진다.

content size

1) min-content : 요소가 가질 수 있는 최대한 작은 너비를 부여하는 속성
2) Max-content: 요소가 가질 수 있는 최대 너비를 부여하는 속성

• max-content로 준 경우 아래의 예시에서 보듯이 text간 공백과 부모요소의 크기에 상관없이 background: lightgrey로 된 부모요소를 벗어나 overflow가 발생할 수도 있다!
  

3) fit-content : max-content와 auto를 섞은 것처럼 동작한다. 남는 영역이 부족하지 않는 경우에는 max-content처럼 작동하지만 그렇지 않을 때는, auto와 같이 동작한다.

참고 사이트 링크

• https://www.daleseo.com/css-width/