<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>시맨틱 태그로 구조화 연습</title>
</head>
<body>
<header>
<h1> 볼프강 아마데우스 모차르트</h1>
<p>1756년 1월 27일 잘츠부르크에서 태어난 천제적인 오스트리아의 작곡가 모자르트를 소개한다</p>
<figure>
<img width="140" height="200" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Wolfgang-amadeus-mozart_1.jpg/800px-Wolfgang-amadeus-mozart_1.jpg">
<figure> 1770년대 초상화</figure>
</figure>
<!-- <figure> 요소는 독립적인 콘텐츠를 표현한다.
<figure> 태그는 삽화나 다이어그램, 사진등과 같이 문서의 주요 흐름과는 독립적인 콘텐츠를
정의할때 사용한다.
<figcation> 요소를 사용해 설명을 붙일 수 있다.-->
</header>
<nav>
<h2>목차</h2>
<ul> <!-- # 을 쓰게되면 이 아이디로 찾겠다는 말 -->
<li><a href="#life"> 생애</a></li>
<li><a href="#death"> 죽음</a></li>
<li><a href="#music"> 음악</a></li>
</ul>
</nav>
<section>
<article id ="life">
<h2>생애</h2>
<p> 모자라트는 1756년 1월 27일 잘츠부르크에서 태어나서 궁정음아각였던 아버지에게
피아노와 바이올린을 배웠고 다섯살에 이미 작곡을 하기 시작했으며, 1764년에서 1765년 사이에
바흐로 부터 처음 교향곡을 작곡하는 법을 배웠는데 이것이 모자르트가 수많은
교향곡을 남기는 계기가 되었다. 모자르트는 빈에서 1784년에 14세인 베토벤을만나
베토벤을 교육시키는데 전념하기도 했다.
</p>
</article>
<article id ="death">
<h2>죽음</h2>
<p>모자르트는 1791년 12월 5일 오전 0시 55분경에 갑자기 병으로 죽었으며
모자르트가 완성하지 못한 작품 레퀴엠은 프란츠크사어 쥐스마이어가 완성시켰다.
</p>
</article>
<article id ="music">
<h2>음악</h2>
<p> 오페라, 교향곡, 행진곡, 관현악 무용, 피아노 협주곡, 바이올린 협주곡, 교회용 성악곡,
칸타타, 미사곡등 다양한 장르를 아우르며 600여곡을 작곡하여 후대에 남겼다.
</p>
</article>
<!--<article> 요소는 문서,페이지, 어플리케이션 또는 사이트 안에서 독립적으로
구분해서 배포하거나 재사용 할수있는 구획을 나타낸다.
사용 예제로 게시판과 블로그 글, 메거진이나 뉴스기사등이 있다.-->
</section>
<aside id ="legend">
<h3>모자르트의 죽음에 얽힌 전설</h3>
<p>모자르트의 장례식 날 비가오고 천둥이 쳤다고 하나 new groove 에 따르면 사실은 구름한점 없는 쾌청한
날이었다고 한다.
</p>
</aside>
<footer>
<p>2022년 1월 7일 작성, 위키피디아 참고 </p>
</footer>
</body>
</html><nav> : 다른페이지 또는 페이지 내의 부분에 연결되는 섹션으로 넘어가는 링크가 있는 섹션을 나타낸다.
<article> 태그는 해당 문서나 페이지 또는 사이트와는 완전히 독립적으로 구성할 수 있는 요소를 정의할 때 사용한다.
내용이 각기 독립적이고, 홀로 설 수 있는 내용을 담는다.
<article>요소에 포함 될수 있는 내용
포럼 포스트, 블로그 포스트, 보도기사, 논평 등
<float : left>
: 정렬을 위해 사용하는 속성 . 일반적인 정렬과는다르게 float 정렬된 것 주위로 다른 컨텐츠가 흐르듯이 배치가 된다.
clear : both
: float 속석을 사용하면 주변으로 컨텐츠가 흐르듯이 배치되는데 , 이를 해제하기 위해 clear 속성을 사용한다.
clear 속성이 지정된 영역 이후로는 더 이상 float가 작동하지 않는다.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>html5 문서구조 시멘틱 태그 사용</title>
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.header {
width: 100%;
height: 15%;
background: yellow;
}
.nav {
width: 15%;
height: 70%;
float: left;
background: orange;
}
.section {
width: 70%;
height: 70%;
float: left;
background: olivedrab;
}
.aside {
width: 15%;
height: 70%;
float: left;
background: orange;
}
.footer {
width: 100%;
height: 15%;
clear: both;
background: plum;
}
</style>
</head>
<body>
<header class="header">hearder</header>
<nav class="nav">nav</nav>
<section class="section">section</section>
<aside class="aside">aside</aside>
<footer class="footer">footer</footer>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>인라인 시맨틱 태그</title>
</head>
<body>
<h3>인라인 시맨특 태그 사례</h3>
<hr>
<p> 오늘 <mark> HTML5 시험</mark><br>
시간은 <time>16:00</time><br>
난이도<meter value="0.8" max="1.0">80%</meter><br>
자료 업로딩(20%)
<progress value="2" max="10"></progress><br>
</p>
</body>
</html>
'KH > HTML' 카테고리의 다른 글
| # 14 iframe (0) | 2022.09.14 |
|---|---|
| # 13 Form Tag (0) | 2022.09.13 |
| # 11 오디오,비디오 태그하기 ,details (0) | 2022.09.13 |
| # 10 다운로드, 이미지맵 (2) | 2022.09.08 |
| # 9 META DATA (0) | 2022.09.08 |