Web/HTML

[HTML] 블록(block) 요소 & 인라인(inline) 요소

씨네 2021. 11. 27. 09:49
728x90

우선 태그를 알아보기 전에 HTML문법의 규칙을 알아보겠습니다.

1. 요소를 정확하게 매칭

2. 요소, 속성 이름은 소문자

3. 요소는 항상 닫아야 한다 (일부 단일 태그 존재 ex ) <br> <hr> <img...> ... 등

4. 특수문자를 쓸 때는 Entity Name(code) 으로 사용

​

​

1. 블록 요소, 인라인 요소

유형 특징
블록 요소 - 줄 바꿈
- 블록 요소 안에 텍스트와 인라인 요소 포함 가능
- 블록 요소 안에 블록 요소 포함 가능(일부 불가)
인라인 요소 - 줄 바꿈X
- 인라인 요소 안에 텍스트와 인라인 요소 포 함 가능
- 인라인 요소 안에 블록 요소 포함 불가

​

​

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>block and inline</title>
</head>
<body>

	<h1>블록요소, 인라인요소</h1>
	
	<h2>블록요소</h2>
	<p>줄바꿈</p>
	<div style="background-color:lightgray">
		블록 요소 안에 텍스트, <strong>인라인요소</strong> 포함 가능
		<p>블록 요소 안에 블록요소 포함</p>
	</div>
	
	<hr/>
	
	<h2>인라인요소</h2>
	<a href="http://www.naver.com">줄바꿈</a>
	<q>인라인 요소 안에 텍스트와 <a style="background-color:yellow">인라인 요소</a> 포함 가능</q>
	<span>인라인 요소 안에 <p>블록 요소</p> 포함 불가</span>
	
	<!-- 인라인 요소 안에 블록 요소는 사용은 가능하지만, 지양하자. 
-> 브라우저마다 조금씩 다르기때문 -->
	
</body>
</html>

​

728x90