HTML4 vs HTML5
HTML4에서는 화면 구성하는 역할을 대부분 <div>태그가 맡았고 수많은 <div>태그가 다시 id 속성으로 구분됨.
그런데 그 태그들의 이름에 제약이 없었기 때문에 개발자 개인의 생각에 따라 지정되었음.
id="header"나 id="content"를 보고 '이 부분에는 헤더가 있겠구나', '이 부분에는 사이트 내용이 있겠구나' 라고 추측 가능
=> 헤더나 사이트 내용, 메뉴 등 반드시 필요한 요소에 맞는 태그를 미리 약속해 놓는다면?
--------> HTML5에서는 웹 문서 레이아웃을 표준화하는 태그들이 새롭게 추가됨. 이것이 "시맨틱 태그"
왜 시맨틱 태그로 레이아웃을 만들어야 할까?
-시맨틱 태그로 작성한 소스를 보면 태그만 보고도 어느 부분이 제목이고 메뉴이고 실제 내용인지 쉽게 알 수 있음.
-웹 접근성 시각에서 볼때도 중요함(시각장애인들은 화면 낭동기를 이용하는데 이때 시맨틱 태그를 통해 어느 부분이 제목이고 내용인지 구별할 수 있음)
HTML5 시맨틱 태그로 웹 표준에 맞는 문서 만들기
<!DOCTYPE html>
<html lang = 'ko'>
<head>
<meta charset="utf-8">
<title>애완견 돌보기</title>
<link rel="stylesheet" href="css/layout.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href = "#">애완견 종류</a></li>
<li><a href = "#">입양하기</a></li>
<li><a href = "#">건강돌보기</a></li>
<li><a href = "#">더불어살기</a></li>
</ul>
</nav>
</header>
<article>
<h2>애완견 종류</h2>
<section>
<h3>활달한 강아지</h3>
<dl>
<dt>요크셔 테리어</dt>
<dd>생기있고 활달한 성질을 가지고 있으며 자신보다 몸집이 큰 개나 집에 들어온 침입자를 어쩌구저쩌구</dd>
<dt>말티즈</dt>
<dd>애정이 많고 활발한 성격을 어쩌구 저쩌구</dd>
<dt>폭스테리어</dt>
<dd>가정에서 키우기에 적합한 품종이다. 보호본능이 강하고 정이 많다. 하지만 사냥을 하면 어쩌구 저쩌구</dd>
</dl>
</section>
<section>
<h3>활달한 강아지</h3>
<dl>
<dt>요크셔 테리어</dt>
<dd>생기있고 활달한 성질을 가지고 있으며 자신보다 몸집이 큰 개나 집에 들어온 침입자를 어쩌구저쩌구</dd>
<dt>말티즈</dt>
<dd>애정이 많고 활발한 성격을 어쩌구 저쩌구</dd>
<dt>폭스테리어</dt>
<dd>가정에서 키우기에 적합한 품종이다. 보호본능이 강하고 정이 많다. 하지만 사냥을 하면 어쩌구 저쩌구</dd>
</dl>
</section>
<section>
<h3>활달한 강아지</h3>
<dl>
<dt>요크셔 테리어</dt>
<dd>생기있고 활달한 성질을 가지고 있으며 자신보다 몸집이 큰 개나 집에 들어온 침입자를 어쩌구저쩌구</dd>
<dt>말티즈</dt>
<dd>애정이 많고 활발한 성격을 어쩌구 저쩌구</dd>
<dt>폭스테리어</dt>
<dd>가정에서 키우기에 적합한 품종이다. 보호본능이 강하고 정이 많다. 하지만 사냥을 하면 어쩌구 저쩌구</dd>
</dl>
</section>
</article>
<aside>
<h3>건강한 강아지는</h3>
<ul>
<li>코가 젖어있고 눈꼽이 없어야합니다.</li>
<li>털에 윤기가 있는 것을 골라야 합니다.</li>
<li>입에서 고약한 냄새가 나면 병이 있다는 증거입니다.</li>
<li>가장 활발하게 움직이는 녀석을 고르는게 좋습니다.</li>
</ul>
</aside>
<footer>
<p>Copyright 2012 funnycom</p>
</footer>
</body>
스타일 시트(CSS)적용해보기
body{
font-family:"맑은 고딕", "고딕", "굴림";
}
header {
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: #069;
padding: 10px;
overflow: hidden;
}
header h1{
width:40%;
float:left;
color:#ffffff;
}
header nav {
width:60%;
float:right;
}
nav ul{
list-style-type:none;
}
nav ul li{
display: inline;
float: left;
margin: 15px;
}
nav ul li a{
color:white;
text-decoration:none;
}
p {
font-size:15px;
line-height:20px;
}
h1{
font-size:2em;
}
article{
width: 80%;
margin-right: auto;
margin-left: auto;
border:5px solid #333;
padding:5px;
overflow:hidden;
}
aside{
clear:both;
margin:0 auto;
width:80%;
height:auto;
padding:10px;
background-color:#99cc33;
}
footer{
clear:both;
width: 80%;
margin-right: auto;
margin-left: auto;
margin-top:0;
padding:10px;
background-color:#333;
color:white;
text-align:center;
}'웹 프로그래밍 > HTML+CSS' 카테고리의 다른 글
| 가변 그리드 레이아웃 (2) | 2024.11.16 |
|---|---|
| 반응형 웹 (0) | 2024.11.15 |
| 가상 클래스와 가상 요소 (1) | 2024.11.15 |
| CSS 포지셔닝 (2) | 2024.11.13 |
| CSS와 박스 모델 (1) | 2024.11.12 |