블록 요소와 인라인 요소의 차이와 태그 설명 ✔️

HTML 태그에는 블록 요소와 인라인 요소가 존재합니다. 블록 레벨 요소는 새로운 줄에서 시작하며, 차지할 수 있는 모든 가로 길이(width)를 차지합니다. 반면, 인라인 요소는 새로운 줄에서 시작하지 않으며, 자신의 콘텐츠 만큼의 길이를 차지합니다.

블록 요소를 사용하는 태그들

블록 레벨 요소는 새로운 줄에서 시작하며, 화면의 왼쪽에서 오른쪽 끝까지의 길이를 차지합니다. 다음은 블록 요소를 사용하는 일반적인 태그들입니다.

Headings

• <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Paragraphs

• <p> ... </p>
• 인라인 요소만 내부에 포함할 수 있음

Divs

• <div>...</div>
• 보통 하나의 문단보다 긴 영역을 포괄

인라인 요소를 사용하는 태그들

인라인 요소들은 새로운 줄에서 시작하지 않으며, 자신의 콘텐츠 길이만큼의 공간을 차지합니다. 다음은 인라인 요소를 사용하는 일반적인 태그들입니다.

Images

• <img src="xxx.jpg" alt="image description">
• img 태그에는 alt, title, class와 같은 속성들을 추가할 수 있음

Span

• <span>...</span>

Button

• button>...</button>