HTML5 Tag의 기본, 다양한 HTML의 tag들(with head)

2018. 1. 4. 10:54ㆍ화면 속/HTML5

반응형
SMALL

'태그'의 개념에 대해서는 앞서 종종 설명하곤 했었는데요,

요소들을 포함하여 하나의 기능을 하게되는 것 이라고 생각하셔도 좋을 것 같습니다.


tag의 종류를 다 외울 필요는 없지만,

자주 쓰는 것과 기본 틀이 되어주는 것은 이해하고, 외워두면 좋겠죠 :)


html5 문서라는 것을 알려주는 tag는


<!DOCTYPE html>

입니다.


이전에는 훨씬 긴 tag가 뒤를 이었다고 하는데,

간결해진 셈이죠 :)


뒤를이어서, html영역을 표현하는 tag는


<html>

</html>


진짜로, html tag입니다.

기억하기도 쉽고, 인지하기도 쉽네요 :)

이제 이렇게 생긴 문서를 본다면, html 문서로군! 할 수 있겠죠? :)



html을 구성하는 tag는 head와 body tag가 있는데,

<html>
<head>
</head>
<body>
</body>
</html>


html tag사이에 위치하게 됩니다. 사람의 형상을 생각하시면 될 것 같아요 :)


여기까진 이미 말씀드렸던 부분인 것 같아서, 가볍게 넘어왔습니다.



자주 쓰는 tag들과 사용법을 소개해 드릴게요.


<head>
<meta charset="utf-8">
<title>문서 제목</title>
</head>


먼저 meta tag와 title tag에요,

meta tag는 어트리뷰트만 들어가 있네요 :)

대표적인 빈 요소 tag이죠!


2018/01/01 - [광고쟁이의 IT_study/HTML5] - HTML5 기본 문법, 요소(element), 속성(attribute)


charset = "utf-8" 로서 인코딩 방식을 결정합니다.


<head>
<meta charset="utf-8">
<title>문서 제목</title>
<link rel="stylesheet" href="style.css">
</head>


link tag 입니다.

link tag는 rel(relation)가 stylesheet에 있고,

href(hyper reference)는 style.css 파일이라는 의미를 가지고 있습니다.


style 파일을 불러오는 셈이에요.


<script>
document.addEventListener('click', function () {
alert('Clicked!');
});
</script>


script tag입니다.


'동적인 부분'을 담당하며,

위와같은 방식으로 JavaScript를 작성할 경우

html 문서를 클릭 시 'Clicked!' 라는 메세지를 포함한 알람을 띄우게 됩니다.



이런식으로요.



문서의 style을 지정하는 tag도 있는데요,

link tag에서 소개해드린 것처럼 외부의 css파일을 불러오기도 하지만,

html에서 바로 적용해주기도 합니다.


<head>
<meta charset="utf-8">
<title>문서 제목</title>
<style>
body {
background-color: red;
color: white;
}
</style>
</head>
<body>
hahahaha
</body>


이런식으로 head 영역에서 style tag를 이용해, 문서의 style을 변형시킬 수 있습니다.


위와같이 설정하시면,

눈이.. 아픕... 니다..




이렇게요. (크게 보면 어마어마 합니다!)


추후에 css나 JS에 대한 내용도 작성할 수 있으면 좋겠습니다..



다음에는 body에서 주로 쓰는 tag들을 알아보도록 하겠습니다 :)

반응형
LIST

'화면 속 > HTML5' 카테고리의 다른 글

HTML5 LINK 연결하기  (0) 2018.01.16
HTML5 Tag의 기본, 다양한 HTML의 tag들(with body)  (0) 2018.01.05
HTML5의 특징, 시맨틱 웹(Semantic Web)  (0) 2018.01.02
HTML5 기본 문법, 요소(element), 속성(attribute)  (0) 2018.01.01
HTML5로 웹 페이지 만들기, 'html 태그(html tag)' 란?  (0) 2017.12.31

관련글

티스토리툴바