코딩 복습
2020/06/02 웹디자인 기능사 진행 중
개발경범
2020. 6. 2. 18:01
<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">
</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"><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></article>
</section>
<footer>
<!--------푸터영역---------->
<div class="logo2"><img src="image/logo.png" alt=""></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: 50px;
}
section .tab_menu li{
width: 50%;
height: 50px;
background: orange;
float: left;
line-height: 50px;
text-align: center;
border-radius: 20px 20px 0 0;
/* display: inline-block;*/
}
footer {
width: 100%;
height: 100px;
background: #e66b27;
}
footer .logo2 {
margin-left: 165px;
}