Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | 31 |
Tags
- grid
- Javascript
- js
- html #css #샘표
- 서울 나눔카 #html #css #jq
- 웹디자인 기능사 #하나은행
- HTML #CSS #JQ
- JQ
- CSS
- 남도맛기행
- HTML
- 웹디자인 기능사 예제
- JQuery
- Html #CSS #연두
Archives
- Today
- Total
개발이지만 살아남기
2020/06/03 웹 디자인 기능사 진행 중 본문
<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");
});
});
'코딩 복습' 카테고리의 다른 글
| 2020/06/09 제이쿼리 이미지 이벤트 효과 (0) | 2020.06.09 |
|---|---|
| 2020/06/09 자바 스크립트 공부 (0) | 2020.06.09 |
| 2020/06/06 마우스 호버효과 연습 (0) | 2020.06.06 |
| 2020/06/04 자바스크립트 공부 (0) | 2020.06.04 |
| 2020/06/02 웹디자인 기능사 진행 중 (0) | 2020.06.02 |