코딩 복습
2020/06/03 웹 디자인 기능사 진행 중
개발경범
2020. 6. 3. 17:54
<Html>
<!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/main.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/jquery.js"></script>
</head>
<body>
<header>
<!--------헤더영역--------->
<div class="con">
<div class="logo"><img src="image/logo.png" alt=""></div>
<nav>
<ul class="gnb">
<li><a href="#">개인</a></li>
<li><a href="#">기업</a></li>
<li><a href="#">금융상품</a></li>
<li><a href="#">카드</a></li>
</ul>
</nav>
<div class="drop_box">
<ul class="sub">
<li><a href="#">조회</a></li>
<li><a href="#">이체</a></li>
<li><a href="#">공과금</a></li>
<li><a href="#">예금/신탁</a></li>
</ul>
<ul class="sub">
<li><a href="#">조회</a></li>
<li><a href="#">이체</a></li>
<li><a href="#">전자결제</a></li>
<li><a href="#">수표/어음</a></li>
</ul>
<ul class="sub">
<li><a href="#">저축상품</a></li>
<li><a href="#">대출상품</a></li>
<li><a href="#">투자상품</a></li>
</ul>
<ul class="sub">
<li><a href="#">카드 정보</a></li>
<li><a href="#">카드 신청</a></li>
<li><a href="#">이용내역조회</a></li>
</ul>
</div>
</div>
</header>
<div class="visual">
<img src="image/b_img1.jpg" alt="">
</div>
<section>
<!---------컨텐츠영역 --------->
<article>
<ul class="tab_menu">
<li class="bt_not on"><a href="#">공지사항</a></li>
<li class="bt_gall"><a href="#">갤러리</a></li>
</ul>
<ul class="tab_con">
<li class="notice">
<table>
<tr>
<th>내용</th>
<th>날짜</th>
</tr>
<tr>
<td><a href="#">공지사항입니다</a></td>
<td>2020-06-02</td>
</tr>
<tr>
<td>공지사항입니다</td>
<td>2020-06-02</td>
</tr>
<tr>
<td>공지사항입니다</td>
<td>2020-06-02</td>
</tr>
<tr>
<td>공지사항입니다</td>
<td>2020-06-02</td>
</tr>
<tr>
<td>공지사항입니다</td>
<td>2020-06-02</td>
</tr>
</table>
</li>
<li class="gallery">
<div class="g_group">
<img src="image/g1.jpg" alt="갤러리1">
<img src="image/g2.jpg" alt="갤러리2">
<img src="image/g3.jpg" alt="갤러리3">
</div>
</li>
</ul>
</article>
<article>
<img src="image/banner1.jpg" alt="">
</article>
<article>
<div class="icon"></div>
<div class="icon"></div>
</article>
</section>
<footer>
<!--------푸터영역---------->
<div class="logo2"></div>
<div class="con"><div class="f_left"><img src="image/logo.png" alt=""></div>
<div class="f_right">
<ul>
<li><a href="#">이용약관</a></li>
<li><a href="#">이용약관</a></li>
<li><a href="#">이용약관</a></li>
<li><a href="#">이용약관</a></li>
<li><a href="#">이용약관</a></li>
</ul>
<span>Copyright 대한은행 Allright reserved</span>
</div>
</div>
</footer>
</body></html>
<CSS>
/* 초기화 명령 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
color: inherit;
text-decoration: none;
}
ul,
li {
list-style: none;
}
img {
border: 0;
}
body {
color: #333;
}
/* 레이아웃 영역 */
header {
width: 100%;
height: 100px;
background: #0076be;
}
header .logo {
width: 200px;
height: 40px;
position: absolute;
}
.con {
width: 1200px;
height: 100px;
margin: 0 auto;
position: relative;
}
header nav .gnb {
width: 600px;
height: 40px;
/* outline: 1px solid black;*/
float: right;
display: flex;
justify-content: space-between;
background-color: tomato;
margin-top: 30px;
}
header nav .gnb li {
width: 25%;
height: 40px;
}
header nav .gnb li a:hover {
background: brown;
color: orange;
}
header nav .gnb li a {
display: block;
/* outline: 1px solid black;*/
text-align: center;
line-height: 40px;
color: white;
}
header .drop_box {
width: 600px;
height: 200px;
position: absolute;
background: rgba(0, 0, 0, 0.8);
right: 0;
top: 70px;
}
header .drop_box .sub {
width: 25%;
height: auto;
/* outline: 1px solid white;*/
float: left;
}
header .drop_box .sub li a:hover {
color: black;
background: gray;
}
header .drop_box .sub li a {
display: block;
text-align: center;
color: white;
line-height: 35px;
font-size: 15px;
}
.visual {
width: 1200px;
height: 300px;
margin: 0 auto;
}
.visual img {
width: 100%;
}
section {
width: 1200px;
height: 200px;
margin: 0 auto;
outline: 1px solid black;
}
section article {
width: 33.33%;
height: 200px;
/* background: tomato;*/
outline: 1px solid black;
float: left;
}
section .tab_menu {
width: 160px;
height: 40px;
margin-left: 20px;
margin-top: 7px;
position: absolute;
z-index: 100;
}
section .tab_menu li {
width: 80px;
height: 40px;
background: orange;
float: left;
line-height: 50px;
text-align: center;
border-radius: 20px 20px 0 0;
display: inline-block;
cursor: pointer;
border: 1px solid black;
}
section .tab_menu li.on {
background: white;
border-bottom: 1px solid white;
}
section .tab_menu li:first-child {
z-index: 2;
}
section .tab_menu li:last-child {
z-index: 3;
}
section .tab_con {
width: 350px;
height: 140px;
background: white;
position: relative;
margin-left: 20px;
margin-top: 45px;
}
section .tab_con li {
width: 100%;
height: 140px;
background: white;
border: 1px solid blue;
position: absolute;
}
section .tab_con table a {
width: 330px;
height: auto;
}
section .tab_con table th {
font-size: 14px;
}
section .tab_con table th,
table td {
padding: 0 5px;
}
section .tab_con table td {
line-height: 22px;
font-size: 14px;
}
section .tab_con table td a {
font-size: 14px;
}
section .tab_con table td:hover {
text-decoration: underline;
}
section .tab_con table td:first-child {
width: 75%;
}
section .tab_con table td:nth-child(2) {
font-size: 13px;
color: #bbb;
}
/* 갤러리 부분 */
section .g_group {
width: auto;
height: 100px;
background: orange;
text-align: center;
margin-top: 15px;
}
section .g_group img {
width: 100px;
}
section .g_group img:first-child {
margin-left: 0;
}
/* 바로가기 부분 */
section article .icon {
width: 130px;
height: 130px;
border-radius: 50%;
background-color: #0076be;
float: left;
margin-top: 35px;
margin-left: 45px;
}
footer {
width: 100%;
height: 100px;
background: #e66b27;
}
footer .f_left {
width: 200px;
height: 40px;
float: left;
margin-top: 30px;
}
footer .f_right {
width: 1000px;
height: 100px;
outline: 1px solid black;
float: right;
}
footer .logo2 {
margin-left: 165px;
}
footer .f_right ul {
width: 500px;
height: auto;
display: inline-block;
/* outline: 1px solid black;*/
display: flex;
justify-content: space-between;
transform: translate(30%);
}
footer .f_right ul li {
width: 70px;
text-align: center;
display: block;
float: left;
}
footer .f_right span {
width: 500px;
height: auto;
text-align: center;
clear: both;
display: block;
margin: auto;
transform: translate(40px,20px);
}
<JS>
//자바스크립트
$(document).ready(function () {
$(".drop_box").hide();
$(".gnb li a, .drop_box").hover(function () {
$(".drop_box").stop().slideToggle(700);
});
//탭 부분
// 클릭시 하얀메뉴로 변경
$(".bt_not").click(function () {
$(".notice").show();
$(".gallery").hide();
$(".bt_not").addClass("on");
$(".bt_gall").removeClass("on");
});
$(".bt_gall").click(function () {
$(".gallery").show();
$(".notice").hide();
$(".bt_gall").addClass("on");
$(".bt_not").removeClass("on");
});
});