이번 장에서는 가장 기본적이고 중요한 문서 구조에 대해서 알아보자. HTML문서는 기본적으로 가장 처음에 Doctype을 선언해야한다. <!DOCTYPE html>을 통해 이 문서가 HTML5로 작성되었다고 선언하는 것이다.
이는 비주얼스튜디오 코드에서 !(느낌표)를 치고 엔터를 치면 간단하게 기본적인 문서구조와 함께 작성된다. 이는 아래와 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
HTML문서에서 가장 먼저 나와야 하는 태그는 html태그이다. 속성으로 lang을 통해 영어면 “en”을 한국어면 “ko”를 줄 수 있다. 그리고 html태그의 자식으로는 <head> 와 <body>가 오게 된다.
head태그는 말 그대로 이 문서의 머리부분이다. 뇌와 같은 기능을 한다고 볼 수 있다. 메타데이터들을 선언하는 곳이다. body는 지금까지 배웠던 태그들을 넣는 본문 부분이다.
head태그에는 title태그가 있는데 이는 문서의 대제목 역할을 한다. 눈에 보이지는 않지만 검색최적화(SEO)에 중요한 역할을 하고 있다. 페이지에 맞게 각각 하나하나 변경해주는 것이 좋다.
다음의 코드를 통해 head부분을 좀 더 자세히 알아보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="harry">
<meta name="description" content="작성 연습 중 입니다.">
<meta name="keywords" content="작성, 연습, 기초">
<title>대제목</title>
<link rel="stylesheet" href="./styles.css">
<link href='https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css' rel='stylesheet' type='text/css'>
</head>
<body>
<h1>harry</h1>
<script src="./app.js"></script>
<p style="font-family: 'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Sans-serif';">안녕하세요 해리입니다.</p>
</body>
</html>
먼저 다양한 메타데이터들을 살펴보자. 메타데이터는 타이틀이나 링크, 스타일 등으로 못받는 그야말로 잡다한 데이터들이다. name이라는 속성으로 메타데이터의 종류를 지정한다. 가장 중요한 것은 viewport이다. 이는 VScode에서 !후 엔터를 통해 자동 작성되긴 한다. 위의 코드와 같이 선언되는데, 이는 기기사이즈에 맞추고 첫 사이즈는 기존사이즈(1)와 동일하게 한다는 의미이다.
author은 말그대로 작성자를 의미한다. keywords 는 키워드들을 나열하는 것이도 description은 이 문서를 설명하는 속성이다.
다음은 link태그를 보자. 이는 주로 css 스타일을 연결하기 위해 사용한다. 이 또한 ‘link’를 입력하고 엔터 또는 tab키를 누르면 자동으로 작성되며, href에 경로를 작성하여주면 된다. 참고로 위의 코드처럼 온라인상에서 제공되는 스타일을 가져올 수도 있다.
css스타일은 위와 같은 방법외에도 <style> 태그를 통해 html문서 안에 css코드를 입력하는 방법도 있지만 매우 비효율적이고, 유지보수가 귀찮아진다. 또 위의 코드와 같이 style속성을 통해서도 줄 수 있다.
마지막으로 알아볼 태그는 script태그이다. 이는 동적인 역할을 불어넣기위한 자바스크립트 파일을 첨부하기 위한 태그이다. <script>태그의 속성으로 src에 경로만 넣어주면 된다.
이는 css와 달리 가장 마지막에 태그를 넣어준다. 그 이유는 효율성 때문이다. 브라우저는 다른 태그들은 순서대로 기다리지 않고 실행시킨다. 그러나 자바스크립트는 다 완성되기까지 기다리므로 가장 마지막에 넣어줘야 효율적인 것이다.
참고
이 글은 구름에듀에서 관련 강의를 구매하여 수강 후 공부하며 작성한 글입니다.
모든 내용과 코드 및 이미지는 직접 재구성하였습니다.
김버그의 HTML&CSS는 재밌다 - 구름EDU
HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎
edu.goorm.io
'Language > HTML' 카테고리의 다른 글
| <HTML 기초> 11. 기타 태그 (0) | 2020.11.10 |
|---|---|
| <HTML 기초> 10. 미디어 삽입 (0) | 2020.11.05 |
| <HTML 기초> 09. 테이블 (표) (2) | 2020.11.03 |
| <HTML 기초> 08. 텍스트창 · 버튼 (0) | 2020.10.29 |
| <HTML 기초> 07. 라디오 · 체크 박스 (0) | 2020.10.27 |
