웹표준 CSS 실습 #3
구글지도 삽입하기 방법
1) 구글지도 왼쪽에서 공유 아이콘 클릭, 지도 퍼가기를 선택한다.
2) 지도 퍼가기 탭을 누르면 html 코드에 넣을 iframe이 표시된다. 크기는 왼쪽에서 작게-중간-크게로 변경 가능하다.
1) HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>YM</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style type="text/css">
</style>
</head>
<body>
<div id="skipNav">
<a href="#contents">본문 바로가기</a>
</div>
<hr class="hidden">
<div id="wrap">
<div id="header">
<h1 id="logo"><img src="img/ym.gif" width="145" height="48" alt="YM LOGO" /></h1>
<h2 class="noVisible">메인메뉴</h2>
<ul id="menu">
<li><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="portfolio.html">PORTFOLIO</a></li>
<li class="current"><a href="contact.html" >CONTACT</a></li>
</ul>
</div>
<hr class="hidden">
<div id="contents">
<h1>contact</h1>
<div class="onehalf">
<!-- 여기에 지도를 넣어주세요. -->
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.jp/maps?f=q&source=s_q&hl=ko&geocode=&q=%EC%9D%B4%EB%8C%80%EC%97%AD&aq=&sll=37.556392,126.945916&sspn=0.004618,0.010568&brcurrent=3,0x34674e0fd77f192f:0xf54275d47c665244,0&ie=UTF8&hq=&hnear=%EB%8C%80%ED%95%9C%EB%AF%BC%EA%B5%AD+%EC%84%9C%EC%9A%B8%ED%8A%B9%EB%B3%84%EC%8B%9C+%EB%A7%88%ED%8F%AC%EA%B5%AC+%EB%8C%80%ED%9D%A5%EB%8F%99+%EC%9D%B4%EB%8C%80%EC%97%AD&t=m&z=14&iwloc=A&output=embed"></iframe><br /><small><a href="https://maps.google.co.jp/maps?f=q&source=embed&hl=ko&geocode=&q=%EC%9D%B4%EB%8C%80%EC%97%AD&aq=&sll=37.556392,126.945916&sspn=0.004618,0.010568&brcurrent=3,0x34674e0fd77f192f:0xf54275d47c665244,0&ie=UTF8&hq=&hnear=%EB%8C%80%ED%95%9C%EB%AF%BC%EA%B5%AD+%EC%84%9C%EC%9A%B8%ED%8A%B9%EB%B3%84%EC%8B%9C+%EB%A7%88%ED%8F%AC%EA%B5%AC+%EB%8C%80%ED%9D%A5%EB%8F%99+%EC%9D%B4%EB%8C%80%EC%97%AD&t=m&z=14&iwloc=A" style="color:#0000FF;text-align:left">크게 보기</a></small>
</div>
<div class="twohalf">
<form method="post" action="">
<ul>
<li>
<p><label for="pname">Name <em>(필수)</em></label></p><!-- label을 넣어줘야 label부(전체)를 눌러도 인식함. 웹접근성에 따른 label의 명시적 사용! -->
<p><input type="text" name="pname" id="pname" /></p>
</li>
<li>
<p><label for="pemail">E-mail <em>(필수)</em></label></p>
<p><input type="text" name="pemail" id="pemail" /></p>
</li>
<li>
<p>Gender</>
<p><label for="man">male</label> <input type="radio" name="pgender" id="man" value="man" />
<label for="woman">female</label> <input type="radio" name="pgender" id="woman" value="woman" />
</p>
</li>
<li>
<p>Message</p>
<p><textarea name="message" rows="10" cols="30"></textarea></p>
</li>
<li>
<input type="submit" name="submit" value="Send Message" />
</li>
</ul>
</form>
</div> <!-- end of onehalf -->
</div> <!-- end of contents -->
<hr class="hidden" />
<address id="footer">
Copyright © 2013 YM. All rights reserved <br />
(02)000-0000 팩스(02)000-1111
</address>
</div>
</body>
</html>
@charset "utf-8";
@font-face {
font-family: 'Nanum Gothic';
src: url('../font/nanum.ttf') ;
}
@font-face {
font-family: 'Yanone';
src: url('../font/Yanone.woff') ;
}
html, body {
width: 100%; height: 100%;
}
body, div, p, ul, ol, li, h1, h2, h3, h4 {
padding: 0; margin: 0;
}
ol, ul, li {
list-style: none;
}
img {
border: none;
}
body {
font-family: 'Nanum Gothic', '맑은 고딕', Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #676767;
border-top: 7px solid #7CC0CB;
}
.hidden {
display: none;
}
.noVisible {
visibility: hidden;
position: absolute;
font-size: 0;
width: 0;
height: 0;
line-height: 0;
margin: 0;
padding: 0;
background: none;
}
#skipNav a {
display:block; height:1px; width:1px; margin:0 -1px -1px 0; overflow:hidden; font-size:0; line-height:0;
}
#skipNav a:hover, #skipNav a:active, #skipNav a:focus {
width:100%; height:auto; margin:0; padding:5px;
font-size:12px; line-height:1; text-decoration:none; text-align: center;
}
#wrap {
width: 960px;
margin: 0 auto;
}
#header {
width: 100%;
padding: 30px 0;
}
#logo, #logo a {
float: left;
}
#menu {
z-index: 999;
float: right;
margin: 23px 0 0 0;
}
#menu li {
display: inline;
margin: 0 0 0 20px;
}
#menu li a {
font-family: 'Yanone', 'Nanum Gothic', '맑은 고딕', Helvetica, Arial, sans-serif;
font-size: 24px;
color: #999;
text-decoration: none;
text-transform: uppercase;
}
#header:after {
display: block;
content: "";
clear: both;
}
#campaign {
position: relative;
}
#campaign .caption {
z-index: 500;
position: absolute;
bottom: 72px;
left: 0;
padding: 20px;
background: #7CC0CB;
background: rgba(124,192,203,0.7);
color: #FFF;
font-size: 22px;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
}
#campaign img {
display: block;
}
#footer {
padding: 20px 0 15px;
margin-top: 70px;
background-color: #7CC0CB;
font-size: 0.9em;
text-align: center;
font-style: normal;
color: #fff;
clear: both;
}
#contents:after {
display: block;
content: "";
clear: both;
}
/* 메뉴에 현재 문서 표시 */
/* 타이틀 */
#contents h1 {
font-family: 'Yanone', 'Nanum Gothic', '맑은 고딕', Helvetica, Arial, sans-serif;
}
/* contact li 레이아웃 잡기 */
.oneharf, .twohalf{float:left;width:480px;}
'웹접근성과 웹표준' 카테고리의 다른 글
| CSS3를 쉽게 사용할 수 있는 CSS 3.0 MAKER (0) | 2013.08.21 |
|---|---|
| CSS 하위브라우저 대응기법 (0) | 2013.08.20 |
| 웹표준 사이트 실습 예제 #3 PORTFOLIO 화면 (0) | 2013.08.19 |
| 웹표준 사이트 실습 예제 #2 ABOUT 화면 (0) | 2013.08.19 |
| CSS3: 텍스트/박스에 그림자 효과, 박스 테두리 라운드 효과 (0) | 2013.08.18 |
