• 목록

CSS 요소 표시 방식: 블록 vs 인라인

1. 블록 레벨 요소 (Block-level Element)

• 특징: 항상 새로운 줄에서 시작하며, 부모 요소의 전체 너비를 차지합니다.

• 박스 모델: width, height, padding, margin 속성을 모두 완벽하게 적용할 수 있습니다.

• 대표 태그: <div>, <h1>~<h6>, <p>, <ul>, <li>, <table> 등

2. 인라인 레벨 요소 (Inline-level Element)

• 특징: 새로운 줄을 만들지 않고 문장 안의 일부처럼 흐르듯 배치됩니다. 콘텐츠의 크기만큼만 너비를 차지합니다.

• 박스 모델: width, height를 지정할 수 없으며, 상하 margin이 제대로 작동하지 않는 등 제약이 있습니다.

• 대표 태그: <span>, <a>, <img>, <strong>, <em> 등

3. 인라인-블록 (Inline-block)

• 특징: 배치는 인라인처럼 한 줄에 늘어서지만, 속성은 블록처럼 width나 height를 가질 수 있는 하이브리드 방식입니다.

• 사용법: CSS에서 display: inline-block;으로 지정합니다.

• 목록