0. HTML(Hypertext Markup Language)이란?
HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 이외의 다른 기술은 일반적으로 웹 페이지의 모양/표현 (CSS), 또는 기능/동작 (JavaScript)을 설명하는데 사용됩니다.
HTML은 웹 브라우저에 표시되는 글과 이미지 등의 다양한 콘텐츠를 표시하기 위해"마크업"을 사용합니다.
HTML 요소는"태그"를 사용해서 문서의 다른 텍스트와 구분합니다. 태그는"<", 태그 이름,">"로 이루어집니다.
-출처: MDN_HTML: Hypertext Markup Language
1. HTML의 기본 구조
<!-- html태그로 시작해서 태그로 끝난다. -->
<!DOCTYPE html>
<!-- 브라우저에게 이 문서는 HTML5버전으로 작성된 것이라고 선언하는 부분 -->
<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>Doctype & Document Structure</title> <!-- 문서의 대제목 -->
<link rel="stylesheet" href="" />
<!-- link태그: CSS스타일시트를 첨부하는 태그 -->
<link href='//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css' rel='stylesheet' type='text/css'>
<!-- font를 사용할때도 link태그를 사용 -->
<style> /* HTML문서내에서 CSS코드를 작성할 때 사용 */
/* CSS코드 */
* { font-family: 'Spoqa Han Sans Neo', 'sans-serif'; }
</style>
</head>
<body>
<!-- 웹 문서에 들어갈 내용 -->
<script src="js경로">
//JavaScript코드
//html문서 내에 JavaScript파일을 첨부할 때 사용
//script의 위치는 body안의 맨 마지막부분에 넣는다.
</script>
</body>
</html>2. Sectioning Elements 사용 방법
① section
② article
③ nav
④ aside
👩💻 참고) Sectioning Elements 내에는 반드시 heading태그를 작성해야 한다.
<section>
<h1>section의 제목</h1>
<p>...</p>
...
</section>
<nav>
<h1>nav의 제목</h1>
<ul>
<li>
<a href="#">링크</a>
</li>
</ul>
</nav>
✨프론트엔드 개발자가 되기 위한 독학러✨