반응형
Q>
본문에서 구현된 작은 웹 사이트에서는 아직 완성하지 못한 페이지가 많다.
페이지를 작성하여 전체 사이트를 완성하여 보자.
A>
contacts - 회사 위치 정보 페이지
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회사정보</title>
<link rel="stylesheet" href="css/mystyle.css">
</head>
<body>
<div id="center">
<h1>회사 위치 정보</h1>
</div>
<div
style="font:normal normal 400 12px/normal dotum, sans-serif; width:640px; height:392px; color:#333; position:relative; margin: 0 auto; padding-bottom: 30px;">
<div style="height: 360px;"><a
href="https://map.kakao.com/?urlX=520774.0&urlY=1023647.0&name=%EA%B2%BD%EA%B8%B0%20%ED%99%94%EC%84%B1%EC%8B%9C%20%EC%98%A4%EC%82%B0%EB%8F%99%20962-85&map_type=TYPE_MAP&from=roughmap"
target="_blank"><img class="map"
src="//t1.daumcdn.net/roughmap/imgmap/9c64da6619bd7a800ee6ee73b8d060746de6239620f1631563485f8725baf222"
width="638px" height="358px" style="border:1px solid #ccc;"></a></div>
<div
style="overflow: hidden; padding: 7px 11px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 0px 0px 2px 2px; background-color: rgb(249, 249, 249);">
<a href="https://map.kakao.com" target="_blank" style="float: left;"><img
src="//t1.daumcdn.net/localimg/localimages/07/2018/pc/common/logo_kakaomap.png" width="72"
height="16" alt="카카오맵" style="display:block;width:72px;height:16px"></a>
<div style="float: right; position: relative; top: 1px; font-size: 11px;"><a target="_blank"
href="https://map.kakao.com/?from=roughmap&eName=%EA%B2%BD%EA%B8%B0%20%ED%99%94%EC%84%B1%EC%8B%9C%20%EC%98%A4%EC%82%B0%EB%8F%99%20962-85&eX=520774.0&eY=1023647.0"
style="float:left;height:15px;padding-top:1px;line-height:15px;color:#000;text-decoration: none;">길찾기</a>
</div>
</div>
</div>
<div id="back">
<a href="index.html">Back to Home</a>
</div>
</body>
</html>
* {
/*border: 1px solid red;*/
padding: 0px;
margin: 0px;
}
body {
background-color: #f3f1e9;
height: 100%;
}
a,
#back {
text-decoration: none;
color: #3f3f3f;
}
a:hover {
color: #ff088f;
text-shadow: 4px 2px 2px gray;
}
#center {
margin: 20px;
text-align: center;
}
#back {
text-align: center;
}
R>
 |
|
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| [부스트코스]CSS 이해하기 - 선택자 퀴즈 2 (0) | 2021.01.08 |
|---|---|
| [부스트코스]CSS 이해하기 - 선택자 퀴즈 1 (0) | 2021.01.08 |
| [Ch7]HTML과 CSS로 웹 사이트 만들기 연습문제 9 (0) | 2020.12.19 |
| [Ch7]HTML과 CSS로 웹 사이트 만들기 연습문제 8 (0) | 2020.12.19 |
| [Ch7]HTML과 CSS로 웹 사이트 만들기 연습문제 7 (0) | 2020.12.19 |
