1. 공간 분할 태그
· 영역(범위) 지정을 위한 태그
· 어떻게 보여줄지는 CSS로 결정
-
<div>- 블록 형식 태그
: 한 행을 모두 차지하며 끝 태그 이후 줄 바꿈 -
<span>- 인라인 형식 태그
: 내용 만큼만 영역 차지
: 끝 태그 이후 줄바꿈 하지 않고 다음 내용이 출력
1) 블록(block) 형식
- 한 행 모두 차지
<body>
<div>div 태그 - block 형식</div>
<div>div 태그 - block 형식</div>
<div>div 태그 - block 형식</div>
</body>2) 인라인(inline) 형식
- 자신의 글자 크기만큼 영역 차지
- 왼쪽에서 오른쪽으로 쌓임
<body>
<span>span 태그 - inline 형식</span>
<span>span 태그 - inline 형식</span>
<span>span 태그 - inline 형식</span>
</body>| 블록 형식 | 인라인 형식 |
|---|---|
| div | span |
| h1~h6 | a |
| p | input |
| 목록 | 글자 형식 |
| 테이블 | 입력 양식 |
2. 시맨틱 태그
시맨틱 (Semantic) : 의미론적인
-
시멘틱 웹
· 특정 태그에 의미 부여
· 컴퓨터 프로그램이 코드를 읽고 의미를 인식할 수 있는 지능형 웹 -
시멘틱 태그
· 웹 페이지의 태그에 의미를 부여하는 태그
시맨틱 태그 X
<body>
<div>
<h1>HTML 기본</h1>
</div>
<div>
<ul>
<li><a href="#">메뉴 - 1</a></li>
<li><a href="#">메뉴 - 2</a></li>
<li><a href="#">메뉴 - 3</a></li>
</ul>
</div>
<div>
<div>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div>
<span>서울 특별시 강서구 내발산동</span>
</div>
</body>시맨틱 태그 O
<body>
<header>
<h1>HTML5 기본</h1>
</header>
<nav>
<ul>
<li><a href="#">메뉴 - 1</a></li>
<li><a href="#">메뉴 - 2</a></li>
<li><a href="#">메뉴 - 3</a></li>
</ul>
</nav>
<section>
<article>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet.</p>
</article>
<article>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet.</p>
</article>
</section>
<footer>
<adress>서울 특별시 강서구 내발산동</adress>
</footer>
</body>