[HTML 시맨틱] 블록 vs 인라인 요소 (대표: div, span)

블록 요소

• 블록 요소는 새 줄로 시작하며 부모 요소의 전체 너비를 차지한다.
• 한 줄을 100% 사용하며, 사용하지 못하는 공간은 margin으로 채운다.
• width, height, padding, margin, border 속성을 지정할 수 있다.

div

• 콘텐츠 분할(division) 요소를 말한다.
• 여러 요소를 하나로 그룹화하는 제네릭 블록 컨테이너이다.
• CSS를 적용하기 전까지는 content나 layout에 영향을 주지 않는다.
• 플로우 콘텐츠를 그룹화하거나 스타일을 적용하기 위해 사용한다.

블록 요소의 종류

• <div>, <table>, <h1>~<h6>, <p>, <form>, <ul>, <ol>, <li>, <dl>, <dt>, <dd>, <pre>,<blockquote>

인라인 요소

• 인라인 요소는 새 줄을 만들지 않고, 요소의 내용만큼의 너비를 차지하며, 다른 요소들과 가로로 나란히 배치된다.
• 인라인 요소는 자신이 포함한 콘텐츠의 크기만큼만 공간을 차지하며, 높이와 너비를 직접 조정할 수 없다.
  • width, height 속성 지정 불가!

span

• div와 마찬가지로 여러 요소를 하나로 그룹화하는 제네릭 인라인 컨테이너이다.
• 자체적으로 특별한 의미가 전혀 없는 인라인 컨테이너로 단순 텍스트나 인라인 콘텐츠 등에 스타일이나 속성, 스크립트를 위한 범위를 위해 감싸주는 태그이다.

인라인 요소의 종류

• <span>, <a>, <br>, <em>, <strong>, <input>, <label>, <img>

특징 및 주의점

• 블럭 요소는 내부에 블럭요소와 인라인요소를 포함할 수 있다.
• 인라인 요소는 내부에 블럭 요소를 포함할 수 없다.
• 블럭 요소 중 인라인 요소만 포함할 수 있는 태그가 있다(<h1>~<h6>, <p>).