1. HTML 이란?
하이퍼 텍스트 마크업 언어는 웹페이지를 위한 지배적인 마크업 언어이다. 또한, HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다.
2. HTML 기본구조
vscode에서 작성한 html 기본 구조는 아래와 같다. html 파일 생성한 후 '!' 입력하고 엔터를 누르면 나타난다.
<!DOCTYPE html>
<html lang="ko">
<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>
</body>
</html><html> : HTML 문서의 루트 요소를 정의
<head> : HTML 문서의 메타데이터를 정의,
여기서 메타데이터란 HTML 문서에 대한 정보로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미한다.
<title>, <style>, <meta>, <link>, <script> 등이 있다.
<body> : 웹 브라우저를 통해 보이는 내용 부분이다. 대부분의 시맨틱 태그들이 이 영역에서 사용된다.
3. HTML5 시맨틱 태그
HTML5부터는 시맨틱 태그 (Semantic Tag)를 지원한다. 이전에는 div태그를 사용하여 영역을 나눴다면 HTML5 에서는 좀 더 직관적이고 이해하기 쉬운 시맨틱 태그를 사용은 것이 좋다.
<haeder> : 제목, 로고, 검색바, 내비게이션 등 을 나타내는 요소 나타낼 때 사용.
<nav> : 웹사이트의 메뉴, 목차 등을 표현할 때 사용.
<section> : 맥락이 같이 요소들을 주제별로 그룹화. article의 그룹화에 많이 쓰임
<article> : 독립적인 내용을 표현할 때 사용.
<aside> : 본문 옆 사이드 메뉴 또는 사이드 바를 표현할 때 사용.
<footer> : 웹사이트 하단의 부가적인 정보나 링크 등이 있을 때 사용
왜? 시맨틱 태그를 사용해야 할까? 그 이유는 아래와 같다.
1. SEO 검색엔진 최적화를 위해
2. 웹 접근성이 좋음.
3. div 태그로 짜는 것보다 보기에 직관적이고 협업하기에 좋음
위 영역들을 코드로 구현해 봤다. 그리는 건 쉬웠는데.. 코드로 작성하려니 정신없다ㅠ... 대충 막 작성해서 틀린 부분도 있을 수 있다. 앞으로 좀 더 깔끔한 코딩을 작성할 수 있길..!
<!DOCTYPE html>
<html lang="ko">
<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>
<style>
body {
background-color: red;
text-align: center;
}
header {
height: 80px;
display: flex;
justify-content: space-around;
align-items: center;
background-color: orange;
}
nav {
width: 600px;
height: 50px;
background-color: green;
}
section {
float: left;
width: 80%;
height: 400px;
background-color: skyblue;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
article {
width: 90%;
height: 100px;
background-color: gray;
margin-bottom :10px;
display: flex;
justify-content: center;
align-items: center;
}
aside {
height: 400px;
background-color: yellow;
}
footer {
height: 80px;
display: flex;
justify-content: center;
align-items: center;
background-color: purple;
}
</style>
<body>
<div id="header_wrap">
<header>
header
<nav>nav</nav>
</header>
</div>
<div id="content_wrap">
<section>
section
<article>article1</article>
<article>article2</article>
<article>article3</article>
</section>
<aside>aside</aside>
</div>
<footer>footer</footer>
</body>
</html>
