HTML문서의 기본 골격
HTML문서의 기본 골격은 다음과 같다.
<!DOCTYPE html>
<html>
<head>
<!-- 웹 문서에 관한 메타 데이터 -->
</head>
<body>
<!-- 웹 문서에 들어갈 내용 -->
</body>
</html>위 코드처럼 <!DOCTYPE html>을 사용하여 작성된 문서는 HTML5 버전을 사용하겠다고 선언한 뒤 루트태그인 <html>을 시작으로 마크업을 시작한다.
이전 포스팅에 소개했던 태그들은 <body>에 사용되어 웹 문서에 직접적으로 내용을 마크업한다.
그리고 이제 <head>에 사용되어 웹 문서에 관한 메타 데이터를 구성하는 Tag들을 확인해보자.
<head>태그 안에 사용되는 태그들
Title Tag
HTML문서에 대제목을 표시하는 태그
HTML의 <title>은 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의한다.
이는 검색 최적화에 매우 중요하며 텍스트만 포함할 수 있다. 태그를 포함하면 무시된다.
<!DOCTYPE html>
<html>
<head>
<!-- 웹 문서에 관한 메타 데이터 -->
<title>Shopping Mall Web Site</title>
</head>
<body>
<!-- 웹 문서에 들어갈 내용 -->
</body>
</html><title>을 효과적으로 작성하는 방법으로는 크게 3가지가 있다.
-
단순 키워드 나열은 비효율적
-
각각의 페이지에 맞게 변경
-
단순한 문장보다는 무엇에 관한 내용인지 자세하게 서술
Link Tag
CSS Style Sheet를 첨부하는 태그
HTML의 <link>은 현재 문서와 외부 리소스의 관계를 명시한다.
주로 <link>는 CSS 스타일 시트를 연결할 때 제일 많이 사용하지만, 사이트 아이콘("파비콘"과 홈 화면 아이콘) 연결 등 범용적으로 사용될 수 있다.
<!DOCTYPE html>
<html>
<head>
<!-- 웹 문서에 관한 메타 데이터 -->
<title>Shopping Mall Web Site</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<!-- 웹 문서에 들어갈 내용 -->
</body>
</html>Style Tag
문서나 문서 일부에 대한 스타일 정보를 포함하는 태그
HTML의 <style>은 HTML문서 내에서 CSS코드를 작성할 때 사용하는 태그다.
하지만 특수한 경우가 아니라면 사용을 지양하고 CSS코드는 CSS파일에 직접 작성하는 것이 좋다.
<!DOCTYPE html>
<html>
<head>
<!-- 웹 문서에 관한 메타 데이터 -->
<title>Shopping Mall Web Site</title>
<link rel="stylesheet" href="./styles.css">
<style>
body {
font-size: 20px;
}
</style>
</head>
<body>
<!-- 웹 문서에 들어갈 내용 -->
</body>
</html>Script Tag
HTML문서 내에 JavaScript파일을 첨부할 때 사용하는 태그
HTML의 <script>는 데이터와 실행 가능한 코드를 문서에 포함할 때 사용하며 보통 JavaScript 코드와 함께 사용한다.
WebGL의 GLSL 셰이더 프로그래밍 언어, JSON 등 다른 언어와도 사용할 수 있다.
<script>는 상대경로, HTML문서내 직접적 코드작성 2가지의 방법이 있다.
특수한 경우가 아니라면 HTML과 Java Script코드를 분리해서 작성하기 위해 상대경로 방법을 사용하는 것이 좋다.
<!DOCTYPE html>
<html>
<head>
<!-- 웹 문서에 관한 메타 데이터 -->
<title>Shopping Mall Web Site</title>
<link rel="stylesheet" href="./styles.css">
<style>
body {
font-size: 20px;
}
</style>
</head>
<body>
<!-- 웹 문서에 들어갈 내용 -->
<!-- 상대경로를 지정해서 사용하는 방법 -->
<script src="./app.js"></script>
<!-- HTML문서에서 Java Script코드를 작성하는 방법 -->
<script>
let h1 = document.querySelector('h1');
h1.addEventListener('click', function (event) {
this.textContent = 'hi'
})
</script>
</body>
</html>Meta Tag
앞선 Tag들로 표현할 수 없는 데이터들을 표현하는 태그
HTML의 <meta>는 <link>, <script>, <style>, <title>과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타낸다.
<meta>는 name, content속성을 사용하여 메타데이터의 종류, 값을 표현한다.
<meta name="메타데이터 종류" content="메타데이터 값">
<!-- viewport는 사용하고 있는 기계의 화면 전체사이즈 -->
<!-- width=device-width는 화면사이즈의 가로는 디바이스의 가로크게 맞춤 -->
<!-- initial-scale=1.0는 처음 화면을 보여줄 때 디바이스의 원래사이즈에 맞게 보여줘라 -->
<!-- 디바이스의 사이즈에 맞게 변형되는 반응형 웹사이트 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- author는작성자 명시 -->
<meta name="author" content="mirrer">
<!-- keywords는 브라우저에게 키워드를 알려주고 다른사람이 해당키워드를 검색할 때 잘 보여줌 -->
<meta name="keywords" content="mirrer, HTML, front-end">
<!-- description은 해당 웹페이지에 대한 설명(웹접근성적 측면에서 좋은 효과) -->
<meta name="description" content="">참고 자료
<head>- HTML: Hypertext Markup Language - MDN Web Docs
<title>- HTML: Hypertext Markup Language - MDN Web Docs
<link>- HTML: Hypertext Markup Language - MDN Web Docs
<style>- HTML: Hypertext Markup Language - MDN Web Docs
<script>- HTML: Hypertext Markup Language - MDN Web Docs
<meta>- HTML: Hypertext Markup Language - MDN Web Docs
