[2023.03.03] 블록 vs 인라인, 콘텐츠 카테고리

블록 레벨 요소 🆚 인라인 레벨 요소

블록 레벨과 인라인 요소의 분류는 HTML 4.01까지 사용되었다.

현재 표준 HTML5에서는 콘텐츠 카테고리 집합으로 대체되었다.

[출처: 위니브(Weniv)]

 

block

• 부모 요소의 전체 공간을 차지하여 블록을 만듬.
• 언제나 새로운 줄에서 시작, 좌우 양측으로 가능한 모든 너비를 차지한다.
• 앞뒤 요소 사이에 새로운 줄을 만든다.
• 이전 이후 요소 사이에 줄 바꿈이 일어남.
• 페이지의 구조적 요소를 나타낼 때 사용
• 블록요소는 인라인 요소 안에 중첩 될 수 없지만, 인라인 요소는 블록 요소 안에 중첩될 수 있다.
• width, height 크기를 지정할 수 있고, padding, border, margin 속성을 사용할 수 있다.
• div, p, li, nav, footer

inline

• 항상 블록 레벨 요소 내에 포함됨.
• 콘텐츠의 흐름을 끊지 않으며, 콘텐츠에 따라 할당된 공간만 차지
• 문장, 단어 같은 작은 부분에 대해서 적용
• 새로운 줄을 만들지 않는다.
• width, height 크기를 지정할 수 없고, padding, border, margin 속성을 사용할 수 있지만,
  상하 margin 속성은 사용할 수 없다.
• a, em, strong

 

 

콘텐츠 카테고리

 

[출처: 위니브(Weniv)]

 

[출처: 위니브(Weniv)]

🖐️참고 사이트

콘텐츠 카테고리 - HTML: Hypertext Markup Language | MDN