태그 보관물: <a>

HTML 블록 및 인라인 요소(Block and Inline Elements)

HTML 요소의 타입

HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가지게 된다. 대부분의 HTML 요소는 이러한 display 속성값으로 블록(block), 인라인(inline) 2가지 값 중 하나를 가지게 된다.

블록(block) 타입의 요소

display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지한다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML 블록(block) 타입</title>
</head>

<body>
	<h2>display 속성값 : 블록</h2>
	<p style="border: 2px solid blue">
		현재 p 요소의 블록 스타일로 바꾼것이다. style 속성값을 변경해주면 된다.
	</p>
</body>

</html>

HTML display 속성값이 블록인 요소

<address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form><h1>-<h6><header><hr><li><main><nav><noscript><ol><p><pre><section><table><tfoot><ul><video>

위 요소들은 HTML display 속성값이 블록인 대표적인 요소들이다.

인라인(inline) 타입의 요소

display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않는다. 또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지한다. <span> 요소안에 사용된다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML 인라인(inline) 타입</title>
</head>

<body>

	<h2>display 속성값 : 인라인</h2>
	<p><span style="border: 2px solid red">span요소</span>는 display 속성값이 인라인인 요소로 사용된다.</p>

</body>

</html>

※<span>, <a>, <img> 요소는 display 속성값이 인라인(inline)인 대표적인 요소이다.

<div> 요소

< iv> 요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소이다. <div> 요소는 주로 여러 요소들의 스타일을 한 번에 적용하기 위해 사용된다.

일반적으로 style, class, id 속성을 사용하며, CSS와 함께 사용도 가능하다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML <div> 요소</title>
</head>

<body>
	<div style="background-color:black;color:white;padding:20px;">
		<h2>div요소를 이용한 스타일 적용한 모습</h2>
		<p>에펠탑은 1889년 만국박람회장에 건립된 프랑스 파리의 상징적 건축물이다.</p>
	</div>	

</body>
</html>

<span> 요소

<span> 요소는 텍스트(text)의 특정 부분을 묶는 데 자주 사용되는 인라인(inline) 요소이다. <span> 요소는 주로 텍스트의 특정 부분에 따로 스타일을 적용하기 위해 사용된다.

<span> 요소 또한, style, class, id 속성을 사용하며, CSS와 함께 사용도 가능하다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML <span> 요소</title>
</head>

<body>
	<h2>span 요소를 적용한 모습</h2>
	<p>에펠탑은 <span style="color: red">1889년 만국박람회장</span>에 건립된 프랑스 파리의 상징적 건축물이다.</p>
</body>
</html>

HTML 블록 및 인라인 태그

태그내용
<div>문서의 섹션을 정의한다. (블록 기준).
<span>문서의 섹션을 정의한다. (인라인 기준).