시맨틱태그실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>22.10.14시맨틱 태그 실습</title>
<style>
/* https://meyerweb.com/eric/tools/css/reset/ 에서 복사 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video
{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* https://meyerweb.com/eric/tools/css/reset/ 여기 까지 */
body{font-size: 16px; font-weight: bold;}
#wrap{width: 1000px; height: 700px; border: 3px solid rgb(69, 66, 230); margin: 0 auto; padding: 10px; box-sizing: border-box;}
header{width: 100%; height: 100px; border: 3px solid rgb(245, 42, 42); box-sizing: border-box; text-align: center; padding: 10px;}
header .logo{width: 100px; height: 100%; background: rgb(38, 209, 181); float:left;}
header nav{float: right; width: 660px; height: 100%; background: yellow; padding: 10px; box-sizing: border-box;}
header nav ul{list-style: none; height: 100%;}
header nav ul li:last-child{margin-right: 0;}
header nav ul li{width: 120px; height: 100%; background: pink; float: left; margin-right: 10px;}
main{width: 100%; height: 453px; border: 3px solid rgb(28, 92, 73);
box-sizing: border-box;margin: 10px 0; padding: 10px;}
main article{width: 68%; height: 100%; float: left; border: 3px solid rgb(38, 209, 181); box-sizing: border-box; padding: 10px;}
main article .article_box{width: 100%; height: 50px; background: red; margin-bottom: 10px;}
main article .article_box1{width: 100%; height: 135px; border: 3px solid rgb(69, 66, 230); box-sizing: border-box; padding: 10px;}
main article .article_box1 .box{background: rgb(216, 33, 33); width: 100%; height: 100%;}
main article .article_box1_b{margin-bottom: 10px;}
main aside{width: 30%; height: 100%; float: right; border: 3px solid rgb(28, 92, 73); box-sizing: border-box; text-align: center; line-height: 427px;/* line-height 은 %로 쓰면안됨 */}
footer{width: 100%; height: 100px; border: 3px solid rgb(245, 42, 42); box-sizing: border-box; text-align: center; line-height: 100px;}
</style>
</head>
<body>
<div id="wrap"><!-- 시맨틱태그 header -->
<header>
<div class="logo"></div>
<nav>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</header>
<main>
<article>
<div class="article_box"></div>
<div class="article_box"></div>
<div class="article_box1 article_box1_b">
<div class="box"></div>
</div>div class="article_box1">
<div class="box"></div>
</div>
</article>
<aside>Aside</aside>
</main>
<footer>Footer</footer> <!-- ???화면에 나타내야할때만? id를 만드나? -->
</div>
</body>
</html>- PX<->EM 단위변환 홈페이지
http://pxtoem.com/
시맨틱태그 실습
시맨틱 요소를 이용한 마크업
<!DOCTYPE HTML>
<html>
<head>
<title> 와인의 시음 방법 </title>
<meta charset="UTF-8" />
</head>
<body>
<!-- 내용을 입력합니다. -->
<header><h1>와인의 시음 방법</h1></header>
<nav>
<ul>
<li>와인의 역사</li>
<li>와인 맛 보기</li>
<li>세계의 와인</li>
<li>이달의 와인</li>
</ul>
</nav>
<section>
<article>
<h2>와인을 좀 더 맛있게 마시는 방법</h2>
<ol>
<li>와인에 <strong>알맞은 잔</strong>을 선택한다.</li>
<li>와인을 <strong>적당한 온도</strong>로 마신다.</li>
<li>필요하면 <strong>디캔더<sub>Decanter:와인 병 속에 담긴 와인을 옮겨 붓는 투명한 유리병</sub></strong>에 따라 마신다.</li>
</ol>
</article>
<article>
<h2>와인 품종에 따른 글래스 선택</h2>
<dl>
<dt><em>리즐링 글래스</em></dt>
<dd>글래스의 입구가 넓게 퍼지지 않은 잔으로 와인이 입속으로 부드럽게 들어 가도록 해 준다.
<br />이 잔에 마시는 와인은 <mark>리즐링, 쇼비뇽 블랑, 피노 그라고</mark> 등이다.</dd>
<dt><em>샤도네 글래스</em></dt>
<dd>샤도네는 리즐링보다 알코올 도수나 향기가 강한 와인으로 리즐링보다는 큰 잔에 마셔야 한다.
<br />이 잔에 마시는 와인은 <mark>알바리노, 버건디 화이트, 샤도네, 애미따지 블랑, 피노 블랑, 쇼비뇽 블랑</mark>등이다.</dd>
<dt><em>버건디 글래스</em></dt>
<dd>버건디 와인의 경우 산과 탄닌의 함량이 높아 입안에서 확 퍼지지 않도록 오므라든 글래스로 깊숙이 마시는 게 좋다.
<br />이 잔에 마시는 와인은 <mark>바바레스코, 바롤로, 버건디 레드, 그라나샤, 에미따지 레드, 피노누아, 시라</mark> 등이다.</dd>
</dl>
</article>
</section>
<aside>
<ul>
<li>와인 쇼핑몰</li>
<li>추천 와인 사이트</li>
<li>세계의 와인</li>
</ul>
</aside>
<footer><address style="font-style:normal">
<p>©1999-2011 by WineStroy. All Rights Reserved.</p>
</address>
</footer>
</body>
</html>img: 이미지 삽입 요소
- HTML img 요소는 문서에 이미지를 넣습니다.
- ex) img src="경로" alt="웹접근성"
figure 와 figcaption 요소로 캡션 표시
- figure는 사진, 이미지, 다이어그램 등을 감싸는 태그이다.
- figcaption은 figure 요소에 캡션을 만든다. figure 요소의 자식 요소이며, 제일 처음 또는 제일 마지막에 위치시킨다.
<!DOCTYPE HTML>
<html>
<head>
<title> 이미지 캡션 달기 </title>
<meta charset="UTF-8" />
</head>
<body>
<header>
<h1>이미지 캡션 달기</h1>
</header>
<hr />
<section>
<!-- figure와 figcaption 요소로 캡션 표시 -->
<figure>
<figcaption>북카페</figcaption>
<img src="images/cafe1.jpg" width="316" height="241" alt="북 카페" />
</figure>
<figure>
<img src="images/cafe2.jpg" width="316" height="241" alt="동물 테마 카페" />
<figcaption>음악이 있는 카페</figcaption>
</figure>
</section>
</body>
</html>audio 태그
- 음성 콘텐츠 재생. (현재, mp3, ogg, wav 형식만 지원)
<audio controls loop preload="">
<!-- loop : 반복재생 -->
<source src="./media/music.mp3" type="audio/mp3">
<source src="./media/music.ogg" type="audio/ogg">
</audio>
<!-- <audio> <source src=""> </audio> 옛날 방식 -->video 태그
- video는 HTML 문서에 동영상을 삽입하는 태그이다. HTML 5에서 추가된 것이므로, HTML 5를 지원하지 않는 웹브라우저(예를 들어 IE 8 이하)에서는 작동하지 않는다.
<!DOCTYPE HTML>
<html>
<head>
<title> video 요소를 이용한 동영상 무비 삽입하기 </title>
<meta charset="UTF-8" />
<link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet" />
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>
<body>
<!-- 내용을 입력합니다. -->
<h1>video 요소를 이용한 동영상 무비 삽입하기</h1>
<video id="my-video" class="video-js" data-setup="{}" src="./media/dog.mp4" controls autoplay muted poster="./media/dog.PNG" width="1920" height="1080"></video>
<script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
</body>
</html>a 태그(하이퍼링크)
- a태그는 하이퍼링크를 사용하게끔 도와주는 태그다.
- 사용할수 있는 속성
- href: 속성으로 이동할 링크를 설정할 수 있다.
- target: 속성을 사용하면 링크를 여는 방법을 설정 / _self : 기본으로 설정된 값 , _blank : href로 링크되어있는 페이지를 새 창에 띄움
<!DOCTYPE HTML>
<html>
<head>
<title> 하이퍼링크 요소 다루기 </title>
<meta charset="UTF-8" />
</head>
<body>
<h1>하이퍼링크 연결하기</h1>
<hr />
<h2>a 요소를 이용한 하이퍼링크 텍스트 </h2>
<!-- a 요소를 이용하여 글자에 하이퍼링크를 지정합니다. -->
<ul>
<li><a href="http://www.naver.com" title="http://www.naver.com" target="_blank">네이버이동</a></li>
<li><a href="./gallery_car.html" title="./gallery_car.html" target="_blank">자동차 박람회 갤러리</a></li>
</ul>
<hr />
<h2>a 요소를 이용한 하이퍼링크 이미지 </h2>
<!-- a 요소를 이용하여 이미지에 하이퍼링크를 지정합니다. -->
<ul>
<li><a href="http://www.infopub.co.kr/index.asp" target="_blank"><img src="images/banner_jungbo.gif" width="99" height="27" alt="정보문화사" /></a></li>
<li><a href="./gallery_car.html"><img src="images/banner_gallery.gif" target="_blank" width="203" height="27" alt="갤러리" /></a></li>
</ul><!-- ul>li / il>a는 안됨 구동은 되지만 잘못만든것 ul>li>a 로 해야함 -->
</body>
</html>
a 태그 네임앵커 페이지내 이동
위치 지정
<a href=“#top”>**</a>
네임앵커 지정 도착지점에
id=“top”ex)
<body>
<!-- 내용을 입력합니다. -->
<h1 id="top">네임앵커 이용하기</h1>
<hr>
<ul>
<li><a href="#toy1">Toy1</a></li><!-- id를 지정한다 -->
<li><a href="#toy2">Toy2</a></li>
<li><a href="#toy3">Toy3</a></li>
</ul>
<hr>
<h2 id="toy1">회전 동물 알파벳</h2>
<img src="images/toy1.jpg" width="267" height="516" alt="회전 동물 알파벳" />
<hr />
<h2 id="toy2">애벌레</h2>
<img src="images/toy2.jpg" width="516" height="391" alt="애벌레" />
<hr />
<h2 id="toy3">스스로 움직이는 공</h2>
<img src="images/toy3.jpg" width="347" height="516" alt="스스로 움직이는 공" />
<hr />
<p><a href="#top">위로 이동하기</a></p>
</body>map태그, area태그, usemap속성
- map태그로 정의되는 이미지맵에서 개별 링크 영역을 지정. *이미지맵: 링크 영역을 가진 이미지
area 태그는 반드시 이미지맵을 정의하는 map태그 안에서 사용해야 함. (단독x) - img태그 안의 usemap 속성은 map 태그 안의 name 속성과 연계해, 이미지와 맵간의 관계를 형성
<!DOCTYPE HTML>
<html>
<head>
<title> 이미지맵 </title>
<meta charset="UTF-8" />
</head>
<body>
<!-- 내용을 입력합니다. -->
<h1>이미지맵을 이용한 하이퍼링크 연결</h1>
<div>
<img src="images/banner_map.gif" width="200" height="200" alt="배너" usemap="#bannerImg"/>
</div>
<map name="bannerImg">
<area shape="rect" coords="0,0,100,100" href="http://www.maroniebooks.com/" alt="마로니에북스" target="_blank">
<area shape="rect" coords="100,0,200,100" href="https://namu.wiki/w/%ED%86%A0%EC%A7%80" alt="토지" target="_blank">
<area shape="rect" coords="0,100,100,200" href="https://namu.wiki/w/1001%20%EC%8B%9C%EB%A6%AC%EC%A6%88" alt="1001가지 시리즈" target="_blank">
<area shape="rect" coords="100,100,200,200" href="https://product.kyobobook.co.kr/detail/S000060309914" alt="타셴" target="_blank">
</map><!-- usemap 써준다 -->
<div>
<img src="./images/book2.jpg" alt="책" usemap="#imgs">
</div>
<map name="imgs">
<area shape="circle" coords="98,126,88" href="http://www.maroniebooks.com/bookinfo/detail.asp?sku=02001808" alt="Science Illustration. A History of Visual Knowledge from the 15th Century to Today">
</map>
<div>
<img src="./images/book3.jpg" alt="책" usemap="#imgs1">
</div>
<map name="imgs1">
<area shape="poly" coords="3,105,22,107,79,118,79,231,25,230,7,240,10,110" href="http://www.maroniebooks.com/bookinfo/detail.asp?sku=01000501&s_text=%B3%AA%B4%C2%20%B9%CC%BC%FA%B0%FC%BF%A1%20%B0%A3%B4%D9" alt="나는 미술관에 간다 | 전문가의 맞춤 해설로 내 방에서 즐기는 세계 10대 미술관">
</map>
</body>
</html>
※Shape의 맵좌표 구하는 방법
- rect(사각형) : 좌측상단 꼭짓점 x, y 좌표값과 우측하단 x, y 좌표값
- circle(원) : 원의 중심정 x, y 좌표값과 원의 반지름값
- poly(다각형) : 각 꼭짓점의 x, y 좌표값
HTML iframe 요소
- 중첩 브라우징 맥락을 나타내는 요소로, 현재 문서 안에 다른 HTML 페이지를 삽입합니다.
<!-- iframe 요소를 삽입합니다. -->
<iframe src="http://www.maroniebooks.com/" width="80%" height="400">
</iframe>