[HTML5] block요소와 inline요소

DEVRANG·2023년 2월 7일
0

블럭요소 (Block element)

하나의 태그가 브라우저에서 좌우공간을 다 차지하면서 독립적인 공간을 가지는 요소
한줄 다 차지

인라인요소 (inline element)

하나의 태그가 브라우저에서 실제로 코딩된 그 영역만 차지하여 좌우로 다른 태그가 나란히 위치할 수 있는 요소
행 안의 일부분
텍스트 레벨요소라고도 함

블럭요소와 인라인요소의 종류

블럭요소

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

인라인요소

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

특징 및 주의점

블럭요소: 내부에 블럭요소, 인라인요소 포함할 수 있음
인라인요소: 내부에 블럭요소 포함 X

블럭요소들 중에서도 인라인 요소만 포함할 수 있는 것들 있음 :

<h1>~<h6>, <p>

인라인 요소를 css로 블럭화하여 내부에 블럭요소를 포함시킬 수 있음
브라우저에 보여지는데는 문제 없으나 유효성에 어긋남

참고 : https://sdsupport.cafe24.com/reference/html/block-inline.html

profile
완주가 목표인 호랑이

0개의 댓글