[HTML/CSS] HTML 주석, head 태그 하위 요소
이번 포스트에서는 HTML 에서 주석을 작성하는 방법과 HTML 의 head 태그는 어떤 요소들을 갖고 있는지 알아보자.
HTML 주석
HTML 코드에서, 코드는 아닌데 기록을 해놓거나 코멘트를 달아 다른 사람이 알아볼 수 있는 용도로 사용하고 싶을 때 등의 주석은 다음과 같이 사용할 수 있다.
<!-- HTML 주석 사용하기 -->
<!--
HTML 여러 줄
주석 사용하기
-->주석의 내용을 ‘<!--’ 와 ‘-->’ 로 감싸면 된다.
주석은 보통 작성해놓은 코드 일부를 잠시 동작을 하지 않도록 하기 위해 사용하기도 하는데, visual studio code 같은 에디터에서 내용을 드래그 후에ctrl + / (window OS) , command + /(mac OS) 를 입력하면 드래그한 내용이 주석처리되거나 이미 주석인 내용이면 주석해제가 된다.
<head> 하위 요소
head 태그는 아래와 같은 하위 요소들을 사용할 수 있다.
<title>, <style>, <meta>, <link>, <script>,<base>
head 태그는 HTML 문서의 구조에서도 잠깐 살펴봤었다.
사용자가 구현된 웹페이지를 볼 때 head 태그에 작성된 내용은 거의 찾아볼 수 없다. head 태그는 웹 브라우저가 웹 문서를 해석할 때 사용하는 정보들을 포함하는 것이 주된 목적이다. 그럼에도 head 태그에 작성한 내용에서 사용자가 볼 수 있는 중요한 정보가 웹문서의 제목과 아이콘인데, 이번 파트에서 살펴볼 예정이다.
<title>
title 태그는 웹 문서의 제목을 나타낸다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>웹 문서의 제목입니다.</title>
</head>
</html>
<style>
style 태그는 HTML 문서의 스타일 정보를 포함한다. 이 style 태그 내에 정보를 작성해서 태그들의 기본 스타일도 변경할 수 있고, 임의의 스타일을 생성하여 특정 요소들에만 적용할 수도 있다. 스타일을 적용하는 것은 CSS 에 더 관련되어있으므로 이번 포스트에서는 head 태그의 하위 요소로 style 을 이용하여 스타일을 변경할 수 있다는 것만 알아두자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>웹 문서의 제목입니다.</title>
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
</head>
</html><meta>
웹 문서와 관련된 정보들을 지정할 수 있다. meta 태그는 속성들을 이용하여 문서에 대한 정보를 입력할 수 있다. HTML에서는 닫는 태그 없이 사용한다.
- charset 속성 : 인코딩 방식 정의
charset 속성은 웹브라우저가 텍스트를 어떤 규칙을 사용해서 그릴것인지를 명시한다. UTF-8이라는 속성값을 사용하면 영어 외에 전세계의 많은 문자들을 웹 브라우저상에 올바르게 보이도록 할 수 있다.
<meta charset="UTF-8">- name 속성을 이용하여 키워드(keyword), 웹페이지에 대한 설명 등을 정의
name 속성을 이용하면 키워드, 웹페이지에 대한 설명, 저자를 입력 검색 엔진 최적화에 사용할 수 있다. name 속성에 입력할 내용이 키워드인지, 웹페이지에 대한 설명인지에 따라 keyword, description 등이 값으로 들어가고, content 속성에 name 으로 정해진 주제의 내용들이 값으로 들어간다. 이해가 잘 되지 않는다면 조금만 더 스크롤을 내려서 예제를 확인해보면 이해가 쉬울 것이다.
근래에는 이 키워드 속성은 검색 엔진 악용 사례가 빈번하여 사용하지 않는 추세인 듯하다. 구글 검색 엔진에서 사용하는 메타 태그의 정보는 아래 사이트에서 확인할 수 있다.
<!--키워드(keyword)를 정의하는 예제-->
<meta name="keyword" content="HTML, meta, tag, element, reference">
<!--웹페이지에 대한 설명을 정의하는 예제-->
<meta name="description" content="HTML meta tag page">
<!--문서의 저자(author)를 정의하는 예제-->
<meta name="author" content="dEpayse">
<!--문서의 너비(데스크탑 제외, 모바일, 태블릿 등)를 정의하는 예제-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">이외에도 meta 태그에 name 속성으로 사용할 수 있는 다양한 값들이 있다.
- http-equiv 속성을 이용하여 pragma 지시문 설정하기
http-equiv 속성은 content 속성에 명시된 값에 대한 HTTP 헤더를 제공한다. http-equiv 속성이 명시되어 있다면, 반드시 content 속성도 함께 명시되어야만 한다.
<!--해당 문서의 문자 인코딩 방식을 텍스트(UTF-8)로 설정하는 예제(HTML5 에선 charset만 입력하여 간단하게 표현 가능)-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--5초 뒤에 다른 페이지로 리다이렉트(redirect)시키는 예제-->
<meta http-equiv="refresh" content="5;url=https://www.medium.com"><link>
해당 문서와 외부 소스(external resource) 사이의 관계를 정의할 때 사용한다. link 태그를 이용하여 여러 외부 소스를 이용할 수 있는데, 본 포스트에서는 모두 다루지는 않고, 주로 사용하는 외부 소스 종류를 예제로 살펴볼 예정이다. link 태그의 필수 속성은 rel 속성인데, 외부 소스가 현재 문서와 어떤 관계인지 나타낸다. relationship 의 줄임말이다. HTML에서는 닫는 태그 없이 사용한다.
- favicon : 웹 문서의 대표 아이콘 설정하기
favorites icon 의 줄임말인 favicon 은 웹 문서의 대표 아이콘이다. 이미지의 크기(가로, 세로)는 웹에서 16px*16px, 32px*32px 이 자주 사용된다. 이미지의 확장자는 ico, png, gif, jpg, svg 를 사용할 수 있다.
<link rel="icon" href="test_image.png">
- 외부 css 파일 (스타일을 정의한 파일) 이용하기
위에서 살펴본 것처럼 head 의 하위 요소로 style 을 이용하면 현재 파일에서 style 을 적용할 수 있지만, 해당 style 이 다른 html 파일에도 사용되어야 한다면 외부에 다른 스타일 파일을 만들어놓고 html 파일에서 해당 스타일 파일을 이용하겠다는 사실만 명시하는 것이 훨씬 생산성이 좋을 것이다. 그 파일이 css 파일인데, 본 포스트는 HTML을 배우는 것이 목적이므로 자세히 다루지 않는다.
<link rel="stylesheet" type="text/css" href="sampe.css">- 기타 link 태그 rel 속성의 다른 형식들
파비콘이나 외부 스타일 파일 외에도 다양하게 link 태그를 사용할 수 있다. 자세한 내용은 아래 링크를 참고하자.
<script>
html 은 문서나 데이터 구조를 나타내는 markup language 이지만, 이를 동적으로 제어하는 것이 javascript 와 같은 프로그래밍 언어로 가능하다. script 태그의 type 속성의 기본 값은 “application/javascript” 인데, 이 때문에 별도의 type 명시가 없으면 javascript 언어로 작성하면 된다.
head 하위 요소로 script 요소를 사용하면, 아래 예시와 같이 javascript 로 동작을 제어할 수 있다. script 태그는 body 의 하위 요소로도 사용할 수 있는데, 특별한 이유가 없다면 script 태그는 body 요소의 마지막 요소로 사용하는 것이 좋다. 그 이유에 관한 것은 아래 링크를 참고하자.
javascript 에 관한 자세한 내용은 본 포스트에서 다루지 않는다. script 태그가 어떤 역할을 하는지만 잘 알아두자.
<!--HTML head 요소 내에서 작성하기-->
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
<!--정의된 css 파일로 가져오기-->
<script src="./main.css"></script>script 태그의 더 자세한 내용은 아래 링크를 참고하자.
<base>
base 태그를 이용하면 해당 문서의 모든 상대 주소(relative URL)에 대한 기본 URL(base URL)과 target 속성값을 정의할 수 있다.
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
</body>위의 예시를 보면, head 에 상대 주소의 base url 을 지정해줬다. target 속성은 기본적으로 연결된 페이지가 어떻게 열릴 것인지에 대한 값인데, 본 포스트에서는 자세히 다루지 않는다. _blank 는 새 창에서 열리도록 설정하는 값이다.
이미지의 src 속성이 “images/stickman.gif” 로 되어있는데, base url “https://www.w3schools.com/” 으로 정해줬으므로 이 이미지의 실제 위치는 “https://www.w3schools.com/images/stickman.gif” 가 된다.
References
- [W3School] “HTML tutorial” — https://www.w3schools.com/html/default.asp
- [W3School] “HTML tags” — https://www.w3schools.com/tags/default.asp
- 고경희, 2019, HTML + CSS3 웹표준의 정석, 이지스퍼블리싱
