html html file <!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/style.css">
<script src="js/jquery-1.12.3.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="wrap">
<header id="header" class="flx j_spc_btw">
<div class="header_wrap flx j_spc_btw">
<h1 class="logo"><a href="#"><img src="images/logo.png" alt="로고"></a></h1>
<nav>
<ul class="dep1 flx j_flx_end">
<li><a href="#">조회</a></li>
<li><a href="#">이체</a></li>
<li><a href="#">공과금</a></li>
<li><a href="#">외환</a></li>
</ul>
<div class="sub_menu">
<div class="flx j_flx_end">
<ul>
<li><a href="#">계좌조회</a></li>
<li><a href="#">거래내역조회</a></li>
<li><a href="#">휴먼계좌조회</a></li>
<li><a href="#">수표/어음 조회</a></li>
</ul>
<ul>
<li><a href="#">계좌이체</a></li>
<li><a href="#">다계좌이체</a></li>
<li><a href="#">자동이체</a></li>
<li><a href="#">예약이체</a></li>
</ul>
<ul>
<li><a href="#">지로/생활요금</a></li>
<li><a href="#">지방세</a></li>
<li><a href="#">국세/관세</a></li>
<li><a href="#">벌칙금/벌과금</a></li>
</ul>
<ul>
<li><a href="#">금리</a></li>
<li><a href="#">환율/외화예금</a></li>
<li><a href="#">글로벌뱅킹</a></li>
<li><a href="#">외화송금</a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<main id="main">
<div class="slide">
<ul class="slide_wrap flx a_center">
<li><a href="#"><img src="images/slide1.png" alt="슬라이드1"><span>오픈뱅킹 슬라이드이미지1</span></a></li>
<li><a href="#"><img src="images/slide2.png" alt="슬라이드2"><span>오픈뱅킹 슬라이드이미지2</span></a></li>
<li><a href="#"><img src="images/slide3.png" alt="슬라이드3"><span>오픈뱅킹 슬라이드이미지3</span></a></li>
</ul>
</div>
<div class="conts">
<ul class="link flx j_spc_btw a_center">
<li><a href="#" class="flx a_center"><img src="images/link_1.png" alt="바로가기1"><span>계좌조회</span></a></li>
<li><a href="#" class="flx a_center"><img src="images/link_2.png" alt="바로가기2"><span>계좌이체</span></a></li>
<li><a href="#" class="flx a_center"><img src="images/link_3.png" alt="바로가기3"><span>예약이체</span></a></li>
<li><a href="#" class="flx a_center"><img src="images/link_4.png" alt="바로가기4"><span>환율/외화예금</span></a></li>
<li><a href="#" class="flx a_center"><img src="images/link_5.png" alt="바로가기5"><span>외화송금</span></a></li>
</ul>
<div class="banner flx a_center">
<a href="#"><img src="images/banner.png" alt="배너이미지"></a>
<div class="txt">
<h3>오픈뱅킹 1주년 이벤트</h3>
<p>2024-06-03</p>
<p>오픈뱅킹 1주년을 맞이하여 수수료를 면제해드립니다. 자세한 사항은 메인 홈페이지 참고 부탁드립니다.</p>
</div>
</div>
<div class="board">
<div class="flx a_center">
<h4 class="b01 on">공지사항</h4>
<h4 class="b02">갤러리</h4>
</div>
<div class="board_conts">
<ul class="notice">
<li class="flx j_spc_btw"><a href="#" class="flx j_spc_btw">오픈뱅킹 사이트의 1번 공지사항입니다.<span>2024-06-03</span></a></li>
<li class="flx j_spc_btw"><a href="#" class="flx j_spc_btw">오픈뱅킹 사이트의 2번 공지사항입니다.<span>2024-06-03</span></a></li>
<li class="flx j_spc_btw"><a href="#" class="flx j_spc_btw">오픈뱅킹 사이트의 3번 공지사항입니다.<span>2024-06-03</span></a></li>
<li class="flx j_spc_btw"><a href="#" class="flx j_spc_btw">오픈뱅킹 사이트의 4번 공지사항입니다.<span>2024-06-03</span></a></li>
</ul>
<ul class="gallery flx j_spc_btw">
<li><a href="#" class="flx flx_col j_center"><img src="images/gallery1.png" alt="갤러리1"><span>2024-06-03</span></a></li>
<li><a href="#" class="flx flx_col j_center"><img src="images/gallery2.png" alt="갤러리2"><span>2024-06-03</span></a></li>
<li><a href="#" class="flx flx_col j_center"><img src="images/gallery3.png" alt="갤러리3"><span>2024-06-03</span></a></li>
</ul>
</div>
</div>
</div>
</main>
<footer id="footer">
<div class="footer_wrap flx a_center">
<a href="#"><img src="images/f_logo.png" alt="footer로고"></a>
<div class="flx flx_col">
<ul class="family flx a_center">
<li><a href="#">footerMenu1</a></li>
<li><a href="#">footerMenu2</a></li>
<li><a href="#">footerMenu3</a></li>
<li><a href="#">footerMenu4</a></li>
<li><a href="#">footerMenu5</a></li>
</ul>
<div class="copyright">
COPYRIGHT © by WEBDESIGN. ALL RIGHTS RESERVED
</div>
</div>
</div>
</footer>
<div class="modal_bg">
<div class="modal">
<div class="modal_tit">오픈뱅킹 공지사항</div>
<div class="modal_conts">
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세.
무궁화 삼천리 화려강 대한 사람 대한으로 길이 보전하세.
남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세.
</div>
<button type="button">닫기</button>
</div>
</div>
</div>
</body>
</html>