meta
meta 데이터는 어떠한 데이터를 설명하는 데이터이다. 웹 페이지를 만들 때 웹 페이지의 전체를 설명하는 메타 데이터가 있다.(웹 페이지의 저자, 제목 등)
이러한 정보들을 표현할 때 쓰는 것이 <meta>태그이다.
지금까지 <meta> 태그의 charset속성에서 "utf-8"을 지정해 준 것은 해당 문서를 저장할 때 인코딩 방식을 utf-8으로 저장된 문서라고 알려주는 것이고, 웹 브라우저는 저 태그를 보고 utf-8으로 해석하여 웹 페이지를 보여준다.
<meta>태그의 name 속성에 "description" 을 지정하고, content속성에 요약된 정보를 작성하면 웹 페이지에는 표현하지 않지만 검색엔진 등에서 사용하는 요약 자료로 사용하도록 할 수 있다.
<meta>태그의 name 속성에 "kewords"를 지정하고, content 속성에 키워드들을 작성하면 웹 페이지를 분류할 때 키워드를 참고해서 분류할 수 있다
<meta>태그의 name 속성에 "author"을 지정하면 content 속성에 웹 페이지의 저자를 작성하여 저자를 설명할 수 있다.
<meta>태그의 http-equiv 속성에 "refresh"를 지정하고, content 속성에 숫자를 지정하면 지정한 숫자 초 만큼 시간이 지난 후에 웹 페이지를 리프레쉬 하는 효과를 사용할 수 있다.
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="생활코딩의 소개 자료">
<meta name="kewords" content="코딩, 생활코딩, 프로그래밍, html">
<meta name="author" content="phulasso">
<meta http-equiv="refresh" content="30">
</head>
<body>
생활 코딩은 일반인에게 ~~~~~~ 입니다.
</body>
</html>
의미론적 태그
semantic은 '의미론적인' 이라는 뜻이다. html에 표현되는 정보들이 의미에 맞게 표현할 수 있도록 해주는 태그들을 semantic 태그라고 한다.
html5에서 추가된 sementic 태그들은 다음과 같다.
<html>
<head>
<title>HTML - 수업</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">HTML</a></h1>
<ol>
<li><a href=1.html>기술소개</a></li>
<li><a href=2.html>기본문법</a></li>
<li><a href=3.html>하이퍼텍스트와 속성</a></li>
<li><a href=4.html>리스트와 태그의 중첩</a></li>
</ol>
<h2>hello world</h2>
</body>
</html>위 html 문서를 의미론적 태그를 사용하여 작성하면 다음과 같다.
<html>
<head>
<title>HTML - 수업</title>
<meta charset="utf-8">
</head>
<body>
<header>
<h1><a href="index.html">HTML</a></h1>
</header>
<nav>
<ol>
<li><a href=1.html>기술소개</a></li>
<li><a href=2.html>기본문법</a></li>
<li><a href=3.html>하이퍼텍스트와 속성</a></li>
<li><a href=4.html>리스트와 태그의 중첩</a></li>
</ol>
</nav>
<section>
<article>
<h2>hello world</h2>
본문~~~~~~~~~~~~~~~~~~~
</article>
<article>
<h2>hello world</h2>
본문~~~~~~~~~~~~~~~~~~~
</article>
<article>
<h2>hello world</h2>
본문~~~~~~~~~~~~~~~~~~~
</article>
<article>
<h2>hello world</h2>
본문~~~~~~~~~~~~~~~~~~~
</article>
</section>
<footer>
<ul>
<li><a href="privacy.html">개인 보호 정책</a></li>
<li><a href="about.html">회사소개</a></li>
</ul>
</footer>
</body>
</html>
의미론적 태그들을 사용하면서 시각적으로 달라지는 부분들은 없다. 시각적인 기능은 없고 의미만을 갖고 있는 태그들이다.
<header>태그는 웹 페이지에서 헤더에 해당하는 부분, 사이트의 전체의 정보가 표현된 부분에서 사용한다.
<footer>태그는 header 태그가 있는 웹 페이지에는 대부분 있는데 웹 페이지에 대한 부가적인 설명들이 들어가며 웹사이트 제일 하단에 사용한다.
<nav> 태그는 웹 페이지에서 컨텐츠를 탐색할 때 사용하는 네비게이션 역활을 하는 부분에 사용된다.
<article> 태그는 웹 페이지의 본문에 해당하는 부분에서 사용된다. 웹 페이지에 따라서 본문이 여러개이면 article태그를 여러개 사용할 수 도 있다.
<section>태그를 이용하여 여러개의 article태그를 같은 섹션으로 묶어줄 수 있다. section 태그는 header, nav등과 달리 특정한 역할로 정의하기 어려운 섹션들을 묶어줄 때 사용한다.
'Project H4C Study Group' 카테고리의 다른 글
| [Project H4C] C언어 코딩도장(1) (0) | 2021.02.16 |
|---|---|
| [Project H4C] opentutorials HTML(6) (0) | 2021.02.12 |
| [Project H4C] opentutorials HTML(4) (0) | 2021.02.11 |
| [Project H4C] opentutorials HTML(3) (0) | 2021.02.09 |
| [Project H4C] opentutorials HTML(2) (0) | 2021.02.06 |