728x90
반응형
기업은행홈페이지
1) 목표 설정 : 만들고 싶은 홈페이지의 종류와 기능을 명확히 정의합니다.
2) 구조 설계 : 페이지 구성, 메뉴 구성, 콘텐츠 배치 등을 미리 계획합니다.
3) 디자인 구상 : 전체적인 디자인 컨셉, 색상, 글꼴 등을 정합니다.
그림부분을 라이브러리로 작업합니다. (요구사항)
1) 라이브러리 : https://swiperjs.com/, https://bxslider.com/
2) 그림 무료사용 : pxels(픽셀), pixabay(픽서베이)
3) 닷홈에 홈페이지 배포(deployment)
javascript.zip
0.09MB
css.zip
0.01MB
images.zip
1.41MB
index1.html
0.01MB
index1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>기업은행</title>
<link href="css/style1.css" type="text/css" rel="stylesheet" />
<script src="javascript/jquery-1.12.3.js"></script>
<script src="javascript/script.js" defer type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.17/jquery.bxslider.min.js"></script>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.17/jquery.bxslider.min.css"
rel="stylesheet"
/>
</head>
<body>
<div id="container">
<header>
<div class="wrap">
<!-- wrap:logo와 menu 묶어줌 -->
<div class="logo">
<a href="#"><img src="images/bank.jpg" alt="로고" /></a>
</div>
<nav class="menu">
<ul class="navi">
<li>
<a href="#">개인뱅킹</a>
<ul class="submenu">
<li><a href="https://mybank.ibk.co.kr/uib/jsp/index.jsp">상품몰</a></li>
<li><a href="https://mybank.ibk.co.kr/uib/jsp/index.jsp">조회</a></li>
<li><a href="https://mybank.ibk.co.kr/uib/jsp/index.jsp">이체</a></li>
<li><a href="https://mybank.ibk.co.kr/uib/jsp/index.jsp">공과금</a></li>
<li><a href="https://mybank.ibk.co.kr/uib/jsp/index.jsp">예금/신탁</a></li>
</ul>
</li>
<li>
<a href="#">기업뱅킹</a>
<ul class="submenu">
<li><a href="https://kiup.ibk.co.kr/uib/jsp/index.jsp">조회</a></li>
<li><a href="https://kiup.ibk.co.kr/uib/jsp/index.jsp">이체</a></li>
<li><a href="https://kiup.ibk.co.kr/uib/jsp/index.jsp">전자결제</a></li>
<li><a href="https://kiup.ibk.co.kr/uib/jsp/index.jsp">수표/어음</a></li>
</ul>
</li>
<li>
<a href="#">금융상품</a>
<ul class="submenu">
<li><a href="https://mybank.ibk.co.kr/uib/jsp/index.jsp">개인상품</a></li>
<li><a href="https://kiup.ibk.co.kr/uib/jsp/index.jsp">기업상품</a></li>
<li><a href="https://www.ibk.co.kr/depo/coBondIRate.ibk?pageId=FM04010100">상품가이드</a></li>
<li><a href="https://www.ibk.co.kr/common/navigation.ibk?linkUrl=/mallbiz/prdTree/prdTreeQnA.jsp&pageId=FM09010000">상품트리</a></li>
</ul>
</li>
<li>
<a href="#">금융서비스</a>
<ul class="submenu">
<li><a href="https://www.ibk.co.kr/common/navigation.ibk?linkUrl=/financetech/efinance/mobileb/one_bank.jsp&pageId=SM01090000">스마트금융</a></li>
<li><a href="https://www.ibk.co.kr/common/navigation.ibk?pageId=SM02080200&linkUrl=/financetech/efinance/teleb/privacy_info.jsp">뱅킹서비스</a></li>
<li><a href="https://www.ibk.co.kr/fxtr/excRateList.ibk?pageId=SM03020100">상품서비스</a></li>
</ul>
</li>
<li>
<a href="#">카드</a>
<ul class="submenu">
<li><a href="https://www.ibk.co.kr/cardbiz/listBizNew.ibk?pageId=CA01010000">카드신청</a></li>
<li><a href="https://www.ibk.co.kr/common/navigation.ibk?linkUrl=/mall/card/basicdata/cash_basicdata.jsp&pageId=CA05010400">카드금융(대출)</a></li>
<li><a href="https://www.ibk.co.kr/common/navigation.ibk?linkUrl=/mall/card/mycard_info.jsp&pageId=CA02010000">나의카드관리</a></li>
<li><a href="https://www.ibk.co.kr/common/navigation.ibk?linkUrl=/mall/card/basicdata/caution1_basicdata.jsp&pageId=CA05040100">카드가이드</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<div class="bodywrap">
<section id="text1">
<!-- bodywrap:imgslide와 contents 묶어줌 -->
<div class="imgslide">
<!-- imgslide:슬라이드 이미지 -->
<div class="slidelist">
<ul>
<li>
<a href="https://www.youtube.com/watch?v=YQIBR33Gtt8">
<img src="images/IBK1.jpg" alt="이미지1" />
</a>
</li>
<li>
<a href="https://365.ibkbox.net/">
<img src="images/IBK2.jpg" alt="이미지2" />
</a>
</li>
<li>
<a href="https://www.ibk.co.kr/common/navigation.ibk?linkUrl=/financetech/efinance/fintech/pay_lounge.jsp&pageId=SM05160000">
<img src="images/IBK3.jpg" alt="이미지3" />
</a>
</li>
</ul>
</div>
</div>
</section>
<section id="text2">
<div class="contents">
<!-- contents:공지사항/갤러리,배너,바로가기 -->
<ul class="tabmenu">
<!-- tabmenu:notice와 gallery 묶어줌 -->
<li class="active">
<a href="#">보도자료</a>
<div class="notice">
<ul>
<li>
<a href="https://www.ibk.co.kr/cyber/noticeDataDetailCyber.ibk?pageId=IR03010500&srno=106407">
IBK기업은행, 2024년 상반기 경영실적 발표
<span>2024.07.29</span>
</a>
</li>
<li>
<a href="https://www.ibk.co.kr/cyber/noticeDataDetailCyber.ibk?pageId=IR03010500&srno=106406">
기업은행, IBK창공 육성기업에 투자유치 지원
<span>2024.07.26</span>
</a>
</li>
<li>
<a href="https://www.ibk.co.kr/cyber/noticeDataDetailCyber.ibk?pageId=IR03010500&srno=106389s">
IBK기업은행, ‘사기의심계좌 자동검증’ 서비스 시행
<span>2024.07.03</span>
</a>
</li>
<li>
<a href="https://www.ibk.co.kr/cyber/noticeDataDetailCyber.ibk?pageId=IR03010500&srno=106386">
기업은행, IBK나라사랑카드 할인 혜택 확대
<span>2024.07.01</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">공지사항</a>
<div class="notice">
<ul>
<li>
<a href="https://www.ibk.co.kr/cyber/newibkDetailCyber.ibk">
SC제일은행 관련 금융거래 일시중단 안내(8/25)
<span>2024.07.31</span>
</a>
</li>
<li>
<a href="https://www.ibk.co.kr/cyber/newibkDetailCyber.ibk">
우리은행 관련 금융거래 일시중단 안내(8/11)
<span>2024.07.31</span>
</a>
</li>
<li>
<a href="https://www.ibk.co.kr/cyber/newibkDetailCyber.ibk">
HSBC 관련 금융거래 일시중단 안내(7/14)
<span>2024.07.10</span>
</a>
</li>
<li>
<a href="https://www.ibk.co.kr/cyber/newibkDetailCyber.ibk">
광주은행 관련 금융거래 일시중단 안내(7/14)
<span>2024.07.10</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">상품소식</a>
<div class="notice">
<ul>
<li>
<a href="https://www.ibk.co.kr/cyber/newibkDetailCyber.ibk">
「마일앤조이」 서비스 변경 안내
<span>2024.07.30</span>
</a>
</li>
<li>
<a href="https://www.ibk.co.kr/cyber/newibkDetailCyber.ibk">
「다이아몬드카드」 브랜드서비스 변경 안내
<span>2024.07.16</span>
</a>
</li>
<li>
<a href="https://www.ibk.co.kr/cyber/newibkDetailCyber.ibk">
「인피니트카드」 브랜드서비스 변경 안내
<span>2024.07.08</span>
</a>
</li>
<li>
<a href="https://www.ibk.co.kr/cyber/newibkDetailCyber.ibk">
「마일앤조이카드」 신규 발급 중단 안내
<span>2024.06.12</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
<div class="otherwrap">
<!-- otherwrap:banner와 shortcut 묶어줌 -->
<div class="banner">
<a href="https://www.ibk.co.kr/common/navigation.ibk?linkUrl=/intro/contrib/contribute_report.jsp&pageId=IR06060000">
<h4 class="bntext">IBK기업은행ESG경영</h4>
<img src="images/IBK4.jpg" alt="배너" />
</a>
</div>
<div class="shortcut">
<a href="https://www.ibk.co.kr/inform/stDetailPgMgmt.ibk?category=L&pageId=IR01030100">
<h4 class="sctext">IBK기업은행안내</h4>
<img src="images/IBK5.jpg" alt="바로가기" />
</a>
</div>
</div>
</div>
</section>
</div>
<section id="text3">
<div class="wrap3">
<!-- wrap:btlogo와 site 묶어줌 -->
<div class="btlogo">
<div class="bottommenu">
<a href="https://www.ibk.co.kr/common/navigation.ibk?linkUrl=/financetech/efinance/mobileb/one_bank.jsp&pageId=SM01090000">
<img src="images/IBK6.jpg" alt="하단로고" />
<div class="bottomtext">i-ONE Bank<br />(개인)</div></a
>
</div>
<div class="bottommenu">
<a href="https://www.ibk.co.kr/common/navigation.ibk?linkUrl=/financetech/efinance/mobileb/kiup_onebank.jsp&pageId=SM01020000\">
<img src="images/IBK7.jpg" alt="하단로고" />
<div class="bottomtext">i-ONE Bank<br />(기업)</div></a
>
</div>
<div class="bottommenu">
<a href="https://www.ibk.co.kr/common/navigation.ibk?linkUrl=/financetech/efinance/mobileb/ibk_cube.jsp&pageId=SM01050000\">
<img src="images/IBK8.jpg" alt="하단로고" />
<div class="bottomtext">IBK 큐브</div></a
>
</div>
<div class="bottommenu">
<a href="https://www.ibk.co.kr/common/navigation.ibk?linkUrl=/financetech/efinance/coop/ibksms_01.jsp&pageId=SM01120000">
<img src="images/IBK9.jpg" alt="하단로고" />
<div class="bottomtext">i-ONE 알림</div></a
>
</div>
</div>
<div class="banner1">
<a href="https://youtu.be/xOxzNf09iIo">
<h4 class="bntext1"></h4>
<img src="images/bank2.PNG" alt="배너" />
</a>
</div>
<div class="shortcut1">
<a href="https://youtu.be/vJrqw3Vbo0g">
<h4 class="sctext1"></h4>
<img src="images/bank3.PNG" alt="바로가기" />
</a>
</div>
</div>
</section>
<footer>
<div class="bottom">
<!--bottom: 하단메뉴 + Copyright-->
<div class="btmenu">
<ul>
<li>
<a
href="https://www.ibk.co.kr/common/navigation.ibk?linkUrl=/customer/secure/private_secure_1_17.jsp&pageId=CM01070100"
>개인정보 처리방침</a
>
</li>
<li>
<a
href="https://www.ibk.co.kr/common/navigation.ibk?linkUrl=/customer/secure/private_secure_6_04.jsp&pageId=CM01070200"
>신용정보활용체제</a
>
</li>
<li>
<a
href="https://www.ibk.co.kr/common/navigation.ibk?linkUrl=/customer/counsel/counsel_minwon.jsp&pageId=CM01080400"
>전자민원접수</a
>
</li>
<li>
<a
href="https://www.ibk.co.kr/main/mainCustomerMain.ibk?pageId=CM00000000"
>고객센터</a
>
</li>
<li>
<a
href="https://ncp.clean.go.kr/cmn/secCtfcKMC.do?menuCode=acs&mapAcs=Y&insttCd=B190021"
>공익신고</a
>
</li>
<li>
<a
href="https://www.ibk.co.kr/common/navigation.ibk?linkUrl=/customer/secure/private_secure_12.jsp&pageId=CM01070900"
>위치기반서비스이용약관</a
>
</li>
</ul>
</div>
<div class="copy">
<p>IBK기업은행 | 주소: 서울특별시 중구 을지로 45</p>
<p>전화: 1588-2588 | 팩스: 02-727-1345</p>
</div>
<div class="familysite">
<select name="sitelist">
<option value="#">관련사이트</option>
<option value="1">WIN CLASS</option>
<option value="2">IBK경제연구소</option>
<option value="3">IBK블로그</option>
<option value="4">IBK사보</option>
<option value="5">IBK스포츠단</option>
<option value="6">IBK인도네시아은행</option>
</select>
</div>
<div id="sns">
<ul>
<li>
<a href="#"><img src="images/sns-1.png" /></a>
</li>
<li>
<a href="#"><img src="images/sns-2.png" /></a>
</li>
<li>
<a href="#"><img src="images/sns-3.png" /></a>
</li>
</ul>
</div>
</div>
</footer>
</div>
</body>
728x90
반응형
'HTML' 카테고리의 다른 글
| HTML(홈페이지만들기_주의사항)_2024-08-01 (0) | 2024.08.01 |
|---|---|
| HTML_현대자동차홈페이지_2024-07-15 (0) | 2024.07.16 |
| HTML(media_query)_2024-07-12 (2) | 2024.07.14 |
| HTML(Animation)_2024-07-10 (0) | 2024.07.11 |
| HTML(transition)_2024-07-10 (0) | 2024.07.10 |
