인라인 요소 태그 특징 및 종류

HTML, CSS, JS

cherrylollipop 2023. 2. 15. 11:59

728x90

인라인 태그^{inline tag}의 특징 및 종류

지난 글에 블록 태그를 간략히 알아보았습니다.

HTML 기본태그 중 블록요소 태그 특징과 종류

HTML의 기본 태그 중 블록요소 태그의 특징과 블록태그의 종류 (h1~h6태그, p태그) html의 태그는 블록요소를 가진 태그와 인라인요소를 가진 태그, 그리고 인라인과 블록요소 둘다 가진 태그로 크게

yeseobaek.tistory.com

이번 글에서는 블록태그와 다른 특징을 갖고 있는 인라인 태그 특징 및 종류에 대해 간단히 살펴보겠습니다.

더 자세한 내용은 아래 사이트에서 확인해보세요

인라인 요소 - HTML: Hypertext Markup Language | MDN

HTML(Hypertext Markup Language)의 요소는 역사적으로 "블록 레벨" 요소와 "인라인" 요소로 분류됐습니다. 인라인 요소는 콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그에 할당된 공간만 차지합니다.

developer.mozilla.org

각 태그의 콘텐츠가 갖고 있는 크기만큼(예: 너비와 높이)의 공간만 차지하는 태그입니다.

1. 줄바꿈이 자동으로 발생하지 않음

2. 태그 내 각 콘텐츠가 차지하는 크기(너비, 높이)만큼 공간 할당

3. 인라인 요소는 인라인 요소만 감쌀 수 있음

4. 너비값과 높이값을 지정할 수 없음(img 태그 제외)

현재 작성자가 아는한에서 img 태그를 제외하고 너비와 높이를 설정해도 인라인태그 요소엔 적용되지 않습니다. 아래 이미지를 보면, em태그와 strong 태그에 너비값을 설정했으나 결과 이미지에 적용되지 않음을 확인할 수 있습니다.

a, b, em, strong, img, i, iframe, label, span, textarea 등이 있습니다.

728x90