HTML5 기본 템플릿 코드 <head>
기본 템플릿 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="keyword" content="HTML, CSS, JavaScript">
<meta name="author" content="michael kim">
<title>HTML + CSS</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>This is a simple HTML + CSS template!</h1>
</body>
</html>
HTML:5 버전의 기본 템플릿은 보통 위와 같다.
여기서 meta 태그는 일부러 몇 개 더 추가한 것이다.
하나씩 내용을 살펴보겠다.
<DOCTYPE>
<!DOCTYPE html>- 별 다른 기능을 하진 않는다.
- '이 문서는 HTML:5로 이루어진 문서'라는 것을 선언하는 것이고, 웹 브라우저가 문서를 잘못 읽어 개발자의 의도와 다르게 렌더링 하지 않도록 도와준다.
- 닫는 태그는 필요 없다.
<html>
<html lang="ko">
...
</html>- 이 문서의 시작과 끝을 알리는 것이 <html> 태그이다.
- 이 html 태그의 주요 속성은 lang이 있고, 어떤 언어로 이 문서가 작성되었는 지를 선언하는 역할을 한다. 값으로는 en, ko 등이 있다.
- 이를 어떤 것으로 작성해도 렌더링 하는 데는 문제가 없지만, 한국인이 타겟이고 한국어가 대부분인 웹 사이트를 제작하는데 en으로 언어를 선언하면 로봇이 내 사이트를 읽을 때 영어가 기본이라고 생각하고 번역 기능 등에서 기본 값을 영어로 잡기 때문에 브라우저에서 제공하는 기능들이 오작동 할 확률이 높다. 따라서 이 부분도 그냥 지나치지 않고 신경써주는 것이 좋다.
<head>와 <body>
<head>
<title>William Kim의 블로그</title>
<meta charset="UTF-8"/>
<meta name="description" content="코딩과 컴퓨터 상식을 가장 쉽게 전달하는 블로그">
<meta name="keywords" content="코딩, HTML, CSS, JavaScript">
<meta name="author" content="Willam Kim">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,
minumum-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.png">
<style>
.myButton {
border: 1px solid black;
border-radius: 5px;
}
</style>
</head>
<body>
<script src="script.js"></script>
</body>- <html> 태그 안에는 크게 <head> 태그와 <body> 태그 두 개가 위치한다.
<head>
- <head> 태그는 이 문서의 정보를 담는 공간이고, <body> 태그는 이 문서의 실질적인 내용, 즉 본문을 담는 공간이다.
- <head> 태그 내부에는 또 아래의 태그가 주로 사용된다.
- <title> : html 문서의 제목. 브라우저에서는 브라우저 탭에 표시되는 제목을 나타내고, 검색 시에는 사이트의 제목을 나타낸다.
- <meta> : 이 문서가 어떻게 이루어졌는지 상세하게 선언해주는 태그이다.
- 주요 속성은 아래와 같다.
- charset : <body> 안에 있는 태그들이 어떤 방식으로 인코딩 되어 있는지 나타내는 태그이다.
- name, content : 보통 쌍을 이룬다. 위 예시에서 다룬 세 가지는 아래와 같다. 이것들은 검색 엔진이 이 문서를 읽을 때 참고하도록 돕는 태그이다. 하지만 google 등의 검색엔진 봇은 이것을 100% 반영하지는 않고 참고 정도만 하는 것으로 알려져 있어 HTML:5 기본 템플릿을 입력하면 이 태그들이 나오진 않는다. 하지만 모던 웹 페이지에서 이것들을 작성해주면 좋은 것 이유는, 검색 엔진에 이것을 100% 반영시키기 위함보다는 이런 메타 태그들이 전부 성실하게 작성되어 있다는 점은 분명 검색 엔진이 가산점을 주기 때문에 상위 노출될 확률이 높아지기 때문에 메타 태그는 전부 작성해주는 것이 좋다.
- description : 문서에 대한 설명, 검색 시 title과 함께 나오는 페이지 설명 부분이다.
- keywords : 검색 엔진에 사용자들이 어떤 키워드를 검색했을 때 이 페이지를 보여줄 것인지 설정하는 부분이다. 역시 100% 반영을 보장하는 것은 아니다.
- author : 페이지 제작자를 나타낸다.
- http-equiv : 인터넷 익스플로러(IE)에서 최신 표준 모드로 문서를 렌더링 하도록 명령하는 태그이다. 모던 웹 환경에서는 다양한 브라우저가 존재하기 때문에 개발자는 크로스브라우징을 신경 써야만 한다. 그런데 그 중에서도 IE는 항상 엇나가는 경향이 있어서 개발자의 의도와 다르게 렌더링을 하는 경우가 많다. 따라서 이 태그를 그대로 명시해주면, 최신 표준 모드로 렌더링 하기 때문에 크롬 퍼스트로 개발하는 개발자가 IE에 신경을 덜 쓰게 되는 이점이 있다.
- viewport : 반응형 웹과 관련된 메타 태그이다. 사용자가 내가 만든 웹 페이지를 보는 기기의 크기가 전부 다르기에 개발자가 최초 의도한 것과 다른 페이지가 보여질 수 있다. 따라서 이를 기본 설정으로 웹 페이지가 확대/축소 하지 못하도록 하는 등의 기본 설정을 하는 태그이다. 이 기본 템플릿은 특별한 경우가 아니면 전부 그대로 적어주는 것이 일반적이다.
- width=device-width : 최초 웹 페이지 너비를 사용자가 접속한 기기의 기본 너비로 설정한다는 의미.
- user-scalable=no : 사용자가 웹 페이지를 임의로 확대/축소 할 수 있냐는 설정, no로 하여 화면이 깨지지 않도록 하는 설정이 일반적.
- initial-scale=1.0 : 최초 확대 배율을 얼마로 할 것이냐는 설정이고, 100%로 두는 값이다. 뒤에 나오는 멕시멈과 미니멈도 최대배율, 최소배율인데 모두 100%로 해두어서 웹 페이지가 깨지지 않도록 설정하는 것이 일반적이다.
- <link> : html 문서에 외부 데이터(파일)을 불러오기 위해 사용하는 태그.
- rel : 이 문서와의 관계(relationship)를 설명한다.
- href : 파일의 경로를 지정한다.
- 위 예제에서는 CSS 파일과 파비콘을 설정하였고 이것이 가장 일반적인 것들이다.
- <style> : 문서를 꾸며주는 CSS 코드는 <head> 태그 내부에 작성된다. 다만 모던 웹 페이지에서는 CSS의 양이 상당하기 때문에 이렇게 <style> 태그 내에 직접 작성하지 않고 별도의 styles.css 등의 파일로 만들어 바로 위에서 설명했던 <link> 태그로 불러오는 방법이 일반적이다.
- <script> : 위 예제에서는 적지 않았지만, <head> 태그 내에 <script> 태그를 열고 닫고 이 안에 자바스크립트를 작성할 수 있다. 다만 모던 웹 페이지에서는 권장되지 않는 방법이다. <script> 태그는 <body> 태그의 마지막 부분에 넣는 것이 일반적이다. 그 이유는 자세히 알아야 하기 때문에 아래에서 설명하겠다.
- 웹 개발자는 DOM이 브라우저에 그려지는 원리를 이해해야 한다. 그래야 사용자에게 매끄러운 경험을 선사할 수 있다.
- 기본적으로 모든 코드는 작성된 첫 라인부터 마지막 라인까지 순서대로, 즉 동기적으로 읽어 나간다.
- html 문서를 보면 작성 순서 상 head가 먼저 나오고 body 태그가 뒤에 나오는데 모던 웹 페이지는 자바스크립트의 양이 결코 가볍지 않는 경우가 많다.
- 그런데 html의 body, 즉 화면에 어떠한 것도 그려지지도 않은 상태에서 이 html을 움직이게 하는 자바스크립트가 먼저 실행이 된다는 것은 순서에 맞지 않는다. 사용자가 자바스크립트를 통해 웹 페이지에서 어떠한 인터렉션을 하려면 일단 버튼이든 뭐든 뭔가가 보여야 하는데 보이기도 전에 인터렉션이 된다면 여러가지 에러를 발생시킨다. 또한 에러가 없다고 하더라도 자바스크립트를 다운로드 하는데 시간이 걸리기 때문에 화면이 그려지는 시간이 그만큼 딜레이 되어 사용자 경험이 떨어진다.
- 따라서 모던 웹 페이지에서는 <script> 를 html 내부에 직접 작성하든 외부 파일에서 불러오든 <body> 태그 내부에 작성해주는 것이 일반적이다.
- <head> 내부에 쓰는 경우는 구글 애널리틱스 스크립트 파일을 불러오는 정도이고, 이 외에 써야 할 이유가 있다면 defer 속성을 사용하여 HTML이 완전히 파싱된 후 자바스크립트를 실행하도록 강제로 속성을 추가하는 방법도 있다.
- <head> 태그 내부에는 또 아래의 태그가 주로 사용된다.
<body>
- <body> 태그를 보면 <script src="script.js"></script> 라는 태그가 있는데, 외부 스크립트를 불러오는 태그이고, 태그 안에 아무 내용이 없어도 바로 닫는 것이 관행이다.
'Programing > HTML' 카테고리의 다른 글
| HTML5 기본 템플릿 코드 <body> (2) | 2025.03.04 |
|---|---|
| 모던 HTML의 이해 (0) | 2025.01.20 |
| HTML이란? (0) | 2025.01.15 |
| 버튼에 새로고침 기능 넣기 (0) | 2024.02.29 |
| 여러 개의 div 한 열로 정렬하기 (1) | 2024.02.28 |
댓글