HTML 의 inline 요소와 block 요소의 차이점을 설명해주세요. 예시도 들어주세요
🧶인라인(Inline) 요소 : 인라인 요소는 일반적으로 텍스트와 같은 컨텐츠를 담기 위한 것으로, 요소의 내용이 왼쪽에서 오른쪽으로 이어지는 형태로 표시됩니다. 인라인 요소는 필요한 만큼의 공간만 차지하며, 너비와 높이를 임의로 지정할 수 없습니다. 여러 개의 인라인 요소가 있을 때 수평으로 배치됩니다.
예시로는 <a>, <span>, <strong>, <em>, <img> 등이 있습니다.
🧶블록(Block) 요소 : 블록 요소는 요소 안 내용 길이와 상관없이 요소 자체가 한 줄 전체를 차지하는 요소이며, 레이아웃을 구성하거나 구획을 나누는데 사용됩니다. width, height를 지정할 수 있으며 padding, margin 적용에 제한이 없습니다. 또한, 여러개의 block요소가 있을 때 수직으로 쌓입니다.
예시로는 <div>, <p>, <h1>, <ul>, <li> 등이 있습니다.
| 속성 별 특징 | block | inline |
| 줄바꿈 | 줄바꿈 O. 새로운 라인에서 시작한다 |
줄바꿈 X. 새로운 라인에서 시작하지 않는다. 어디에서나 시작할 수 있다. |
| 요소 너비 | 사용 가능한 전체 너비를 차지한다 | 컨텐츠 너비 만큼의 너비를 차지한다 |
| 높이 및 너비 | 높이(height)과 너비(width) 크기 설정 가능 | 높이(height)와 너비(width) 설정 불가능. 컨텐츠 만큼의 크기를 차지하기 때문 |
| 상하 마진 | 상하 마진(margin-top, margin-bottom)을 가질 수 있다 | 상하 마진(margin-top, margin-bottom)을 가질 수 없다. 좌우 마진만 가능 |
| 컨텐츠 | inline, block 요소를 컨텐츠로 가질 수 있다 | block 요소를 컨텐츠로 가질 수 없다. (데이터 또는 inline 요소만 가능) |
| 대표적인 요소 | div, p, h1~h6, ul, ol | span, a, small, big, strong |
댓글