전번에 <head> 태그에는 문서 속 메타데이터가 들어간다고 보았습니다. 특정 정보를 표현해야 하기 때문인지 <head> 태그 안에 사용될 수 있는 태그들 또한 제한적입니다. 전번에 문서 구조를 보면서 얼핏 보기는 했는데 이번에 이 <head> 태그 안에 들어갈 수 있는 태그들에 대해서 보다 자세히 다루어 보려고 합니다.
<head> 태그
계속해서 언급하고 있지만 <html> 태그 안에서 제일 먼저 등장하여 문서의 메타데이터를 담는 역할을 담당하고 있습니다. 정보를 따로 담으면서 CSS나 JavaScript와도 연결을 가능케 하고 있습니다. <head> 태그의 요소로는 대표적으로 <title> 태그, <style> 태그, <base> 태그, <link> 태그, <meta> 태그, <script> 태그, <noscript> 태그 등이 옵니다. 이 7가지 태그에 대해서 우선적으로 살펴보겠습니다.
<title> 태그
지난 번에 보았던 티스토리 글쓰기 화면 소스 창을 다시 가져왔습니다. <title> 태그의 내용으로 '글쓰기'라고 적혀있는 것(<title>글쓰기</title>)을 확인할 수 있습니다. 특별하게 title 정보가 메타데이터라고는 하나 노출이 아예 되지 않는 것은 아닙니다.
문서 내용에는 드러나지 않아도 위 화면처럼 탭 제목이나 브라우저 타이틀 바를 통해서 title을 알려주기도 합니다. 때문에 검색 엔진이 해당 사이트나 포스팅을 인식하는데 중요한 역할을 합니다. 그래서인지 모든 문서에 필요한 정보이고 문서당 하나만 입력되어야 합니다.
<style> 태그
<style> 태그는 주로 문서에 말 그대로 스타일 정보를 주는 역할입니다. 위에 글쓰기 소스 창을 이미지를 다시 붙이지 않고 빌려보면 <style type="text/css">...</style>에서 처럼 주로 css 방식을 통해서 정보를 줍니다.
위에 처럼 글자색을 주는 등의 기본적인 스타일을 입힐 수가 있습니다. 스타일을 입히는 자세한 사항들은 추후에 css를 다루면서 보겠습니다.
<base> 태그
문서에서 적용되는 링크(URL값)에 대해서 공통적으로 기본 URL과 target 속성을 지정해주는 역할을 맡고 있다는데 말이 조금 어렵습니다. 병렬 식으로 풀어나갈 수 있게 공통부분을 <head> 태그 내에 입력해두는 느낌입니다.
<head>
<base href="URL" target="_blank">
</head>
href 속성은 URL을 지정하는 것이고 target 속성은 지정된 URL이나 파일을 여는 방식에 대한 것입니다. 예컨대 [target="_blank"]이면 새로운 탭(blank)에 URL이나 파일에 대한 창을 띄우게 됩니다. 이 두 가지 속성은 <a> 태그 다루면서 더 볼 것입니다.
그래서 <head> 태그 내에서 <base> 태그를 통해서 기본값을 설정해두면 <body> 태그 내 링크들에 적용이 됩니다.
<body>
<a href="/글쓰기"> 글쓰기</a>
</body>
적용이 된다 함은 하이퍼링크가 적용된 '글쓰기'를 눌렀을 때 "/글쓰기"로 가는 게 아니라 "URL/글쓰기"로 가게 되는 것입니다. target은 _blank이기 때문에 새로운 탭으로 말입니다. 앞서 병렬 식으로 풀어나간다고 말한 것이 이것입니다. <body> 태그 내 모든 링크에 대해서 기본 URL이 앞에 붙고 target도 따로 지정하지 않는 한 <base> 태그를 통해서 설정해둔 값 그대로 가는 것입니다.
<link> 태그
문서를 만들다 보면 외부 정보를 끌어다 쓸 때도 종종 있습니다. 가령 스타일에 대해서도 누군가 만들어 놓은 스타일시트를 그대로 쓴다던가 하는 경우에 말입니다. 이럴 때는 <link> 태그를 통해서 외부 소스와 연결할 수 있습니다. 스타일시트에 대해 <style> 태그와의 차이점은 시트 정보를 <style> 태그는 해당 문서 내에서 주어야 하지만 <link> 태그는 외부에서 가져올 수 있다는 점에 있습니다.
<meta> 태그
앞에 나온 외부 소스를 담는 <link> 태그, 디자인 정보에 대한 <style> 태그 등 특정한 태그로 담을 수 없는 메타데이터를 받습니다.
<meta charset="UTF-8">
위 요소가 제일 많이 보이는 부분 중에 하나일 텐데, 이처럼 문자열 인코딩 방식을 설명하기도 하고 다양한 정보를 제공할 수가 있습니다.
<script> 태그
주로 JavaScript 정보를 담고 싶을 때 사용합니다. 외부 소스가 되었든 문서 내 코드가 되었든 해당 스크립트를 읽기 위해서 필요한 태그라고 볼 수 있습니다.
<noscript> 태그
no가 붙은 것처럼 브라우저 창이 스크립트를 읽지 못할 때 필요한 태그입니다.
<script>... </script>
<noscript> 스크립트가 지원되지 않습니다 </noscript>
스크립트에 열심히 무언가를 입력해도 해당 스크립트를 지원하지 않는 환경이 있을 수가 있습니다. 그럴 때 이용자로 하여금 상황인지를 돕기 위해 스크립트 대신 <noscript> 태그의 내용 '스크립트가 지원되지 않습니다'를 보여주는 것입니다.
'IT > 웹언어' 카테고리의 다른 글
| [HTML] 개행 태그 (p, br) (0) | 2022.10.08 |
|---|---|
| [HTML] 기본 꾸미기 태그 (b, strong, i, em, mark, u, s, del, small, big) (0) | 2022.09.29 |
| [HTML] HTML 문서 기본 구조 (0) | 2022.09.20 |
| [HTML] HTML 기본 문법 태그(tag) (0) | 2022.09.19 |
| HTML, CSS, JavaScript 간단 정리 (0) | 2022.09.18 |