HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>semantic(시맨틱)태그를 사용하여 블로그 만들기</title>
<link rel="stylesheet" href="css/style_1.css">
</head>
<body>
<!--
== HTML5에서 사라진 태그 ==
----------------------------------------------------------
태그 속성
----------------------------------------------------------
<acronym> 영문 축약형 사용시, 예를 들면 NATO, NASA, GUI 등
<applet> 임베디드 애플릿 사용 시
<basefont> 글꼴의 형태 정의
<big> 글꼴의 크기 지정
<center> 텍스트 위치 중앙 정렬
<dir> 디렉토리 리스트
<font> 글꼴
<frame> 프레임
<frameset> 프레임 부속 태그
<noframes> 프레임 부속 태그
<strike> 글꼴 효과(글 취소 효과)
<tt> 글꼴 효과(타자기 효과)
<u> 글꼴 효과 언더라인
<xmp> pre 태그와 동일 효과
-----------------------------------
== HTML5에서 새롭게 추가된 태그 ==
----------------------------------------------------------
태그 속성
----------------------------------------------------------
<article> 웹 페이지의 본문을 정의할 때 사용
<aside> Artice의 내용을 보충해 주는 역할을 하는 컨텐츠를 넣을 때 사용. 주로 서브 메뉴를 만들 때 사용
<audio> 오디오를 재생할 때 사용
<canvas> 그래픽을 보여줄 때 사용(스크립트 언어를 사용해서 구현)
<command> 명령 버튼을 만들 때 사용
<datalist> 드롭다운 리스트를 만들 때 사용
<details> 상세한 내용을 보여줄 때 사용
<embed> 플로그인이나 플래시 요소를 보여줄 때 사용
<figcaption> <figure>와 함께 사용되며, <figure>의 캡션을 추가할 때 사용
<figure> 이미지나 사진, 코드 등을 보여줄 때 사용됨
<footer> 푸터를 정의할 때 사용
<header> 헤더를 정의할 때 사용
<hgroup> H1부터 H6의 그룹을 만들 때 사용
<keygen> 폼에서 사용되며, 로컬상에 보안키를 저장하고 공개키는 서버로 보냄
<mark> 텍스트에 마크펜으로 칠한 효과를 줌
<meter> 길이를 나타내줌. 시각적으로 어느 정도의 길이를 나타내는지 보여 줌
<nav> 메인 메뉴 및 서브메뉴를 정의할 때 사용
<output> 계산된 결과를 나타낼 때 사용
<progress> 다운로드 길이 몇 %가 남아있는지 표시할 때 사용
<section> 섹션을 정의할 때 사용
<source> 오디오 또는 비디오 태그와 같이 사용되며, 소스를 나타낼 때 사용
<summary> details 태그와 같이 사용되며, 상세한 내용의 요약을 나타냄
<time> 문서 내부에 시간을 정의할 때 사용
<video> 비디오를 재생할 때 사용
<wbr> 문서의 내용이 길어서 다음 라인으로 표시될 때, 영문인 경우 같은 라인에 문장을 표시해야 하는 경우 사용
-----------------------------------
semantic : '의미를 갖는다'는 뜻으로, 각 태그가 스스로 의미를 지닌다는 뜻
header : 사이트에 대한 소개 정보나 메인 메뉴, 사이트 로고 등이 포함됨
hgroup : 제목과 부제목을 묶는 역할
nav : 사이트의 메뉴나 링크 같은 내비게이션 요소들이 포함
section : 실제 문서 내용이 들어감
article : 문서 내용이 많을 경우 여러 개의 <article> 요소로 나눌 수 있음
aside : 문서의 주요 내용 외의 내용들을 넣어 문서의 주영역 주변에 배치
footer : 작성자 정보나 저작권 정보, 또는 관련 문서 링크 등 부가 정보들을 담고 있음
주로 문서 하단에 배치
표현을 위한 태그
mark : 특정 텍스트를 강조하고자 할 때 사용하는 태그
-->
<div id="wrap">
<!-- header 태그는 웹페이지의 제목 및 메뉴, 회사로고, 사이트로고를 알려주는 태그로 쓰인다. -->
<header id="page_header"> <!-- 기능은 div와 똑같은데 이름만 header -->
<h1>Star Blog</h1>
<!-- nav 태그는 사이트의 메뉴나 링크 같은 내비게이션 요소들이 포함 -->
<nav>
<ol> <!-- ol 태그는 순서가 있는 목록 태그이다. -->
<li>최근 글</li>
<li>이전 글</li>
<li>공헌자 글</li>
<li>연락처</li>
</ol>
<ol style="list-style-type: decimal-leading-zero;"> <!-- 숫자앞에 0 이 온다. -->
<li>최근 글</li>
<li>이전 글</li>
<li>공헌자 글</li>
<li>연락처</li>
</ol>
<ol start="101"> <!-- 시작을 101부터 하겠다 -->
<li>최근 글</li>
<li>이전 글</li>
<li>공헌자 글</li>
<li>연락처</li>
</ol>
<ol style="list-style-type: upper-alpha;"> <!-- 영문대문자 -->
<li>최근 글</li>
<li>이전 글</li>
<li>공헌자 글</li>
<li>연락처</li>
</ol>
<ol style="list-style-type: lower-alpha;"> <!-- 영문소문자 -->
<li>최근 글</li>
<li>이전 글</li>
<li>공헌자 글</li>
<li>연락처</li>
</ol>
<ol style="list-style-type: upper-roman;"> <!-- 로마숫자 대문자 -->
<li>최근 글</li>
<li>이전 글</li>
<li>공헌자 글</li>
<li>연락처</li>
</ol>
<ol style="list-style-type: lower-roman;"> <!-- 로마숫자 소문자 -->
<li>최근 글</li>
<li>이전 글</li>
<li>공헌자 글</li>
<li>연락처</li>
</ol>
<ul> <!-- ul 태그는 순서가 없는 목록태그이다. -->
<li>최근 글</li>
<li>이전 글</li>
<li>공헌자 글</li>
<li>연락처</li>
</ul>
<ul style="list-style-type: disc;"> <!-- 원반기호 -->
<li>최근 글</li>
<li>이전 글</li>
<li>공헌자 글</li>
<li>연락처</li>
</ul>
<ul style="list-style-type: circle;"> <!-- 안쪽이 투명한 원반기호 -->
<li>최근 글</li>
<li>이전 글</li>
<li>공헌자 글</li>
<li>연락처</li>
</ul>
<ul style="list-style-type: square;"> <!-- 사각형기호 -->
<li>최근 글</li>
<li>이전 글</li>
<li>공헌자 글</li>
<li>연락처</li>
</ul>
<ul style="list-style-type: none;"> <!-- 기호없음 -->
<li>최근 글</li>
<li>이전 글</li>
<li>공헌자 글</li>
<li>연락처</li>
</ul>
</nav>
<div>
<ul>
<li>카페</li>
<li>부동산</li>
<li>이메일</li>
<li>블로그사이트</li>
</ul>
</div>
</header>
</div>
</body>
</html>CSS
@charset "UTF-8";
/* 기본적인 폰트 설정하기 */
body{
font-family: Arial, "MS Trebuchet", sans-serif;
}
/* 여백 설정 */
body{
border: solid 0px red;
word-break : break-all; /* 공백없이 영어로만 되어질 경우 해당구역을 빠져나가므로 이것을 막기위해서 사용한다. */
margin: 0; /* 바깥 여백을 없는 것으로 하겠다. (default 조금 공간이 있다.)*/
padding: 0; /* 안쪽 여백을 없는 것으로 하겠다. (default 값)*/
}
header#page_header > nav > ol{
border: solid 1px red;
}
header#page_header > nav > ul{
border: solid 1px blue;
}
header#page_header > nav > ol > li
, header#page_header > nav > ul > li{
border: solid 1px gray;
width: 30%;
height:50px;
}
header#page_header > div > ul{
list-style-type:none;
border: solid 1px red;
padding: 30px 0 30px 50px;
}
header#page_header > div > ul > li{
display : inline-block;
border: solid 1px gray;
width: 150px;
height: 30px;
margin: 0 30px 0 0;
text-align: center;
background-color: #999;
font-weight: bold;
font-size: 16pt;
}
정리
- ch04_semantic -> semanticTag_1.html, style_1.css
