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

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

'Web > HTML' 카테고리의 다른 글

[HTML] 구분선(hr), 인용문(quotation) (0)	2021.11.29
[HTML] 제목, 단락, 주소 (0)	2021.11.28
[HTML] HTML의 구조 (0)	2021.11.26
[HTML] sementic(시멘틱) (0)	2021.11.06
[HTML] grouping - <div>, <span> (0)	2021.11.05

'Web > HTML' 카테고리의 다른 글

티스토리툴바