📝 HTML 설계
- HTML의 구조는 기존의 방식은 매우 복잡하다.
- body 태그 이후 수많은 div 태그를 통해 작성을 하게 되면 가독성이 떨어진다.
- 그래서 수많은 페이지에서는 시맨틱 HTML이라고 해서 각 태그를 분류해서 태그를 적어서 사용한다.
💾 기존의 HTML
- 기존의 HTML 코드를 예시를 통해 확인해보자
- 아래의 예시를 보면 페이지가 나타내는 부분이 어떤 부분인지 한눈에 들어오지 않는다.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>
<h1>JunExpert</h1>
</div>
<div>
<p>hello</p>
</div>
<div>© 2022 H.J</div>
</body>
</html>💾 시맨틱 HTML
- 시맨틱 HTML을 사용하면 코드의 가독성이 올라간다.
- 코드가 나타내고자 하는 부분을 단번에 알아차릴 수 있다.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<header>
<h1>JunExpert</h1>
</header>
<main>
<p>hello</p>
</main>
<footer>© 2022 H.J</footer>
</body>
</html>📑 시맨틱 HTML 태그 정리
- 시맨틱 태그는 자주 사용하는 태그만 외우는 것이 좋다.
- 그 외 필요한 태그는 그때 그때 찾아서 사용하는 것이 좋을 것 같다.
| 태그 | 설명 |
|---|---|
| header | 소개 및 탐색에 도움을 주는 콘텐츠 표시 (제목,로그,검색 폼) |
| main | body 태그의 주요 컨텐츠를 나타내는 태그 |
| footer | 구획 콘텐츠를 표시할 때 사용하는 태그 (작성자, 저작권 정보) |
| nav | 웹페이지의 메뉴, 목차를 만들 때 사용하는 태그 |
| aside | 웹페이지의 사이드바를 만들 때 사용하는 태그 |
📌 다양한 추가정보 작성
- 웹페이지의 탭의 이미지 삽입, 검색포털의 추가 설명 부분 등을 HTML 코드에 추>가가 가능하다.
- 추가 방법은 아래의 예시코드를 통해 확인해보자
- 예시의 link="shortcut icon" 부분이 탭의 이미지 추가하는 코드이다.
<head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="shortcut icon" sizes="16x16 32x32 64x64" href="https://assets.nflxext.com/us/ffe/siteui/common/icons/nficon20 16.ico" /> <link rel="stylesheet" href="styles.css" /> <title>Assignment 6 - CSS Flexbox Challenge</title> </head>
준이의 취미저장소