1. 글꼴 - font (퇴출)
font태그는 쓰지 말라고 알려드리는 태그입니다. 이 font 태그가 퇴출됨으로써 html이 정보로서 중요하다라는 이야기를 하고 싶습니다. 하지만 이미 많은 곳에서 쓰고 있는 태그입니다. Size는 1~7까지 있고 기본 값은 3입니다. 그리고 color라는 속성을 통해 글자색을 지정할 수 있습니다.
여기서 생기는 문제는 font라는 것은 아무런 의미를 가지고 있지 않습니다. 시각적인 디자인일 뿐이지 이 Hello라는 정보에 대해서 어떠한 설명도 하지 않습니다. Html전체에서 디자인과 관련된 코드와 어떠한 의미를 가지고 있는(h1, li 등) 코드가 혼재되면서 이 웹 페이지를 해석하기가, 정보로서 가지는 가치가 떨어지는 문제를 갖습니다.
이 문제를 해결하기 위해서 font태그를 퇴출시켰습니다. Html에서 css라는 별도의 프로그래밍 언어를 고안함으로써 그 언어가 디자인을 담당하게 하였습니다.
2. <meta> 태그
어떠한 데이터가 있으면 그 데이터를 설명하는 데이터를 meta 데이터라고 합니다. 예를 들면 html에 있는 태그들은 그 태그가 감싸고 있는 콘텐츠를 설명한다는 점에서 메타 데이터라고 할 수 있습니다.
우리가 웹페이지를 만들면 그 웹페이지 전체를 설명하는 정보를 필요로하는 경우가 있습니다. 예를 들면 웹페이지의 제목이 무엇인가?, 저자는 누구인가?, 이 웹페이지는 어떠한 내용을 담고 있는가? 등등의 정보는 글의 본문에 표현되지는 않지만 상당히 중요한 정보입니다. 이때 사용하는 태그가 <meta>입니다.
<meta charset="utf-8">
우리가 작성한 파일의 내용을 utf-8이라는 방식으로 저장을 합니다. 그러면 웹 브라우저가 정보를 읽어서 화면에 표시하려고하면 utf-8이라는 방식으로 읽어서 화면에 표시하려고 해야 잘 보일 것 입니다. 이 문서는 utf-8으로 저장된 문서입니다 라고 표기를 해주면, 웹 브라우저는 utf-8에 의해서 해석해서 보여 주는 것 입니다. 이게 없다면, 기본적으로 브라우저에 설정되 있는 방식으로 읽게 되고, 그럴 경우 화면이 깨질 수 있습니다. 이런 정보들을 컴퓨터에 저장하는 것을 "인코딩"한다고 합니다. 그리고 저장된 정보를 꺼내서 화면에 표시하는 과정을 "디코딩"이라고 생각하면 됩니다.
<meta name="description" content="생활코딩의 소개자료">
이 정보는 웹페이지 상에서는 표시가 되지 않습니다. 하지만 이 자료는 이 웹페이지에 대한 요약된 정보로 사용 될 수 있습니다. 예를 들어 검색 엔진에서 검색을 했을 때 요약된 정보를 보여주는데 그 정보에 사용될 가능성이 상당히 높습니다.
<meta name="keywords" content="코딩, coding, 생활코딩, 프로그래밍, html, css, javascript">
키워드는 이 문서를 정의하는 중요한 단어들입니다. 이 웹 페이지들을 잘 설명하는 키워드들을 정의 한 것 입니다.
<meta name="author" content="egoing">
Author는 저자를 뜻합니다.
<meta http-equiv="refresh" content="30">
자주 사용하지는 않지만 이 웹페이지는 30초 간격으로 자동으로 refresh가 됩니다.
이런식으로 meta라는 태그는 웹페이지의 내용은 아니지만 이 웹페이지를 설명하는 역할을 합니다. 이런 것들을 잘 사용하면 좀 더 가치있는 정보를 생산할 수 있습니다.
3. 의미론적 태그
Semantic은 의미론적인 뜻입니다. 웹이 발전하는 과정에서 정보로서의 가치가 중요해지고, 사람에게도 의미있고, 기계들에게도 활용하기 좋은 형태의 데이터로 발전시키려는 노력들을 하였습니다. 이 과정에서 웹의 트렌드 중 하나가 semantic web이라는게 있습니다.
문서의 정보를 보다 잘 표현하기 위해서는 의미에 맞는 태그를 잘 사용해야 합니다. 특히 HTML5에서는 웹페이지에서 통상 많이 사용하는 구조에 의미를 분명히 부여하기 위해서 의미론적 태그(semantic element)를 새롭게 정의해서 제공하고 있습니다. 그 목록은 아래와 같습니다.
<h1>부분은 header에 해당하는 부분입니다. 이 부분을 header로 감싸줍니다. 이 <header>는 아무런 기능이 없습니다. 이 웹페이지 상에서 header에 해당하는 중요한 부분이 바로 이 부분이다 라는 의미만 가지고 있는 태그입니다.
Header영역이 있다면 아주 많은 경우 footer가 있습니다. 많은 사이트가 하단에 부가적인 정보를 가지고 있습니다. <footer>를 추가해서 정보를 표시해주면 됩니다.
Html을 코딩할때는 의미에 중심을 두어야합니다. 디자인은 css를 통해 하면 됩니다.
웹페이지상의 ol은 네비게이션의 역할을 합니다. <nav>라는 태그안에 넣어 주면 됩니다.
본문에 해당하는 부분은 <article>을 사용하면 됩니다. 본문이 여러 개 나올 수 있으므로 <article>을 여러 번 사용하면 됩니다. 그리고 이것들을 <section>으로 묶어줍니다. Section은 어떤 특정한 역할로 정의하기 애매한 것들은 section으로 묶어주면 됩니다.
<!DOCTYPE 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>선행학습</h2>
본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다.
</article>
<article>
<h2>선행학습</h2>
본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다.
</article>
</section>
<footer>
<ul>
<li><a href="privacy.html">개인보호정책</a></li>
<li><a href="about.html">회사소개</a></li>
</ul>
</footer>
</body>
</html>
'HTML' 카테고리의 다른 글
| [HTML] 외부문서삽입(iframe) (0) | 2019.05.12 |
|---|---|
| [HTML] View Port (0) | 2019.05.08 |
| [HTML] <form> 태그 (0) | 2019.05.08 |
| [HTML] html table (0) | 2019.05.08 |
| [HTML] html 태그(p, br, img) (0) | 2019.05.02 |
