문서구조화
HTML 문서 구조화는 웹페이지를 의미 있는 블록으로 분할하고 구성하는 과정을 말합니다.
콘텐츠를 조직화 하고 가독성을 높이는데 도움을 줍니다.
div 태그
- <div> 태그로 공간을 블록 형식으로 분할할수 있습니다.
- 문서 내에서 영역을 구분하거나 그룹화 하기 위해 사용합니다.
<!DOCTYPE html>
<html>
<head>
<title>loui3</title>
</head>
<body>
<div>div태그로 분할</div>
<div>div태그로 분할</div>
<div>div태그로 분할</div>
<div>div태그로 분할</div>
<div>div태그로 분할</div>
</body>
</html>
span 태그
- <span>태그로 공간을 인라인 형식으로 분할합니다.
- 특정 부분을 그룹화 하기위해 사용됩니다.
<!DOCTYPE html>
<html>
<head>
<title>loui3</title>
</head>
<body>
<span>span 태그로 분할</span>
<span>span 태그로 분할</span>
<span>span 태그로 분할</span>
<span>span 태그로 분할</span>
<span>span 태그로 분할</span>
</body>
</html>
각 태그 형식
시맨틱 태그
- 특정 태그에 의미를 부여한 것입니다.
- <header>, <nav> ,<section> <article>, <aside> <footer> 로 영역을 나누어 코드를 짠다고 생각하시면 됩니다.
사용 예시)
<!DOCTYPE html>
<html>
<head>
<title>loui3</title>
</head>
<body>
<header>
<h1>Loui3 Html</h1>
</header>
<nav>
<a href="https://loui3.tistory.com/">루이3</a>
<hr>
</nav>
<section>
<article>
<h1>1.공간 분할 태그</h1>
<p><div>태그로 공간을 블록 형식으로 분할</p>
</article>
<article>
<h1>2. 시맨틱 태그</h1>
<p> 특정 태그에 의미를 부여한 것이다</p>
</article>
<footer>
<div><h5>출처: loui3</h1></div>
</footer>
</section>
</body>
</html>
class 속성 + id 속성 + <hgroup>
- class 속성은 웹페이지들을 만들다보면
스타일을 확 바꾸는 경우가 생기는데 이때 한번에 모든 스타일을 바꾸기 위해 사용합니다. - id속성은 클래스와 별도로 고유성을 가지고 있어 클래스를 바꿀때도 바뀌지 않습니다 .
- <hgroup>은 h1 ~h6 의 요소들이 한개 이상일 경우 묶을때 사용하며 다단계 제목등을 나타날때 사용한다
예시)
<!DOCTYPE html>
<html>
<head>
<title>루이3의 블로그</title>
</head>
<body>
<div id="page">
<header id="main-header">
<hgroup>
<h1 class="title">LOUI3 Example HTML</h1>
<h2 class="description">루이3</h2>
</hgroup>
</header>
</body>
</html>
'WEB > HTML5' 카테고리의 다른 글
| [HTML5] placehorder 와 required 속성 에 대해 알아보자 (0) | 2022.12.22 |
|---|---|
| [HTML5] Emmet 으로 작업흐름을 개선해보자 (0) | 2022.12.20 |
| [HTML5] 간단한 입력 양식을 만들어보자 (0) | 2022.12.08 |
| [HTML5] HTML 태그들에 대해 알아보자 (0) | 2022.12.07 |
| [HTML5] HTML에 제목 ,본문, 특수문자를 표기해보자. (0) | 2022.12.07 |
