HTML | BLOCK와 INLINE

새니·2023년 6월 8일

목록 보기

3/5

- block

"block" 요소는 기본적으로 수직 방향으로 전체 가로 너비를 차지합니다.
한 줄에 하나의 "block" 요소만 표시됩니다.

address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, noscript, ol, output, p, pre, section, table, ul, video,

- inline

"inline" 요소는 콘텐츠의 흐름에 따라 가로 너비만 차지합니다.
한 줄에 여러 개의 "inline" 요소가 나란히 표시될 수 있습니다.

width, height, margin-top, margin-bottom 등 세로 방향의 크기와 여백을 설정할 수 없습니다. 단, margin-left, margin-right는 설정할 수 있습니다.

a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, small, script, select, span, strong, sub, sup, textarea, tt, var,

block와 inline의 관계

block" 요소는 "inline" 요소와 함께 사용될 수 있습니다.
"block" 요소는 기본적으로 수직 으로 쌓이며, "inline" 요소는 "block" 요소 안에 포함될 수 있습니다.
"block" 요소는 기본적으로 수직으로 쌓이기 때문에 다른 "block" 요소의 영역을 차지하거나 다른 "block" 요소 위 또는 아래에 배치될 수 있습니다.
"inline" 요소는 "block" 요소 안에서 줄의 일부로 표시되며, 다른 "inline" 요소와 나란히 표시될 수 있습니다.
"block" 요소 안에서 "inline" 요소는 줄 바꿈 없이 나란히 표시될 수 있지만, - "inline" 요소 안에서 "block" 요소는 줄 바꿈이 발생합니다. 이 경우 "block" 요소는 display: inline-block으로 설정하여 줄 바꿈 없이 나란히 표시할 수 있습니다.

😶 예시를 통해서 알아보기 !

<!DOCTYPE html>
<html>
<head>
	<title>Inline vs Block Example</title>
	<style>
		.inline {
			display: inline;
			background-color: yellow;
			padding: 5px;
			margin: 5px;
		}
		
		.block {
			display: block;
			background-color: lightblue;
			padding: 10px;
			margin: 10px;
		}
	</style>
</head>
<body>
	<h1 class="block">블록 요소</h1>
	<p class="block">블록 요소는 수직으로 전체 가로 너비를 차지합니다. 한 줄에 하나의 블록 요소만 표시됩니다.</p>
	<span class="inline">인라인 요소</span><span class="inline">인라인 요소</span><span class="inline">인라인 요소</span>
	<p class="block">블록 요소 안에서는 인라인 요소도 줄 바꿈 없이 나란히 표시될 수 있습니다.</p>
	<div class="block">
		인라인 요소 안에서는
		<p class="block">블록 요소가 들어가면 줄 바꿈이 발생합니다.</p>
		인라인 요소와 블록 요소는 서로 다른 특성을 가지고 있습니다.
	</div>
</body>
</html>