본문 바로가기
  • 코딩, 허쌤이 떠먹여 줄게
FrontEnd/웹디자인기능사

대한은행 사이트 정리 (웹디자인기능사)

by 허쌤 2026. 4. 1.

대한은행 사이트 정리 (웹디자인기능사)

 

대한은행 바로가기

 

1. 폴더/파일 구성

핵심 파일

  • index.html: 대한은행 메인 페이지
  • css/style.css: 전체 레이아웃, GNB 메뉴, 슬라이드, 콘텐츠, 배너/바로가기, 푸터, 팝업 스타일
  • js/script.js: 전체메뉴 드롭다운, 좌우 슬라이드, 탭(공지/갤러리), 팝업 제어
  • js/jquery-1.12.3.js: jQuery v1.12.3

주요 이미지 (예상)

  • 로고/푸터: images/logo.png, images/f_logo.png
  • 메인 슬라이드: images/slide1.jpg, images/slide2.jpg, images/slide3.jpg
  • 갤러리: images/gallery1.jpg, images/gallery2.jpg, images/gallery3.jpg
  • 배너: images/banner1.jpg, images/banner2.jpg, images/banner3.jpg
  • 바로가기(숏컷): images/s1.png, images/s2.png, images/s3.png

2. index.html 구조

공통 설정

  • 언어: <html lang="ko">
  • 인코딩: <meta charset="utf-8"/>
  • 제목: 대한은행
  • 리소스 포함 순서
    • CSS: ./css/style.css
    • JS: ./js/jquery-1.12.3.js, ./js/script.js

전체 레이아웃

  • #wrap: 사이트 전체를 감싸는 컨테이너
    • header: 상단 로고 + GNB(전체메뉴)
    • .img_slide: 메인 비주얼 슬라이드
    • section: 공지/갤러리/배너/바로가기
    • footer: 하단 메뉴 + 저작권
    • .pop: 공지사항 상세 팝업

헤더(header)

  • .h_cover: 가로 1200px 중앙 정렬
    • h1.logo 안에 logo.png
    • nav 안에 GNB와 풀다운 배경 .full_bg

GNB 메뉴

  • 1차 메뉴: 개인 / 기업 / 금융상품 / 카드
    • 각 1차 메뉴(li) 안에 2차 메뉴 ul (조회, 이체, 공과금, 예금/신탁 등)
  • .full_bg
    • 전체 2차 메뉴 영역 뒤에 깔리는 큰 배경 레이어

메인 슬라이드 (.img_slide)

  • 구조
    • .img_slide > ul.cf > li 3개 (각 슬라이드)
      • img (배경 이미지)
      • .txt 안에 홍보 문구 + a("바로가기")
    • 양쪽 화살표 버튼
      • .btn.next : >
      • .btn.prev : <
  • 기능
    • JS에서 next/prev 클릭으로 좌우 슬라이드 전환

섹션 (section)

1) 공지/갤러리 탭 (article.contents)

  • 탭 메뉴 (ul.menu)
    • 항목: “공지사항”, “갤러리”
    • 기본 상태: “공지사항”에 class="on"
  • 내용 영역 (.btn_cover)
    • .btn.btn1 (공지사항)
      • table > tbody > tr
      • 첫 번째 tr은 class="t1" → 팝업 열기 트리거
    • .btn.btn2 (갤러리)
      • 갤러리 이미지 3장

2) 배너 (article.banner)

  • .img_box.i1 ~ .img_box.i3
    • 각각 배경 이미지(banner1~3.jpg) + 중앙 텍스트(span)
    • “대한환전서비스”, “대한정기예금”, “이동통신서비스 Dh M”

3) 바로가기 (article.shortcut)

  • 각종 서비스 바로가기 버튼
    • a > img 3개 (s1.png ~ s3.png)

푸터 (footer)

  • .f_cover.cf (1200px)
    • .f_logo: 하단 로고 이미지
    • .f_r.menu: 하단 메뉴 링크 (이용상담, 보안프로그램, 사고신고, 보호금융상품등록부)
    • .f_r.copy: 저작권 문구

팝업 (.pop)

  • 사이트 전체를 덮는 레이어
    • .pop_cover
      • h3: 공지 제목(약관 변경 안내)
      • p: 약관 변경 상세 내용
      • button: “닫기” 버튼

3. css/style.css 요약

기본 스타일

  • 리셋: *{margin:0; padding:0; box-sizing:border-box;}, ul,li{list-style:none;}, a{text-decoration:none; color:#333;}
  • body: 글자색 #333, 배경 흰색

헤더/GNB

  • header: 높이 100px, 배경 lightblue
  • .h_cover: 1200px 중앙 정렬
  • 로고: 폭 200px, 이미지 상단 여백 30px
  • nav:
    • 폭 500px, 오른쪽 정렬, 상단 패딩 25px
    • 1차 메뉴 nav>ul>li: 폭 25%, 높이 50px
    • hover 시 배경 #e66b27, 글자색 흰색
  • 2차 메뉴 nav>ul>li>ul:
    • position:absolute; top:100%; left:0;, 기본 display:none
    • 항목 hover 시 배경 #0076be, 글자색 흰색
  • .full_bg:
    • 전체 폭, 높이 200px, position:absolute; top:100%;, 연노랑 배경
    • GNB 전체 드롭다운 배경 역할

메인 슬라이드

  • .img_slide:
    • 폭 1200px, 높이 300px, 중앙 정렬, position:relative, overflow:hidden
  • 각 슬라이드 li:
    • 절대 위치, 기본 left:100%, 첫 번째만 left:0
  • .txt:
    • 슬라이드 내 텍스트 박스, 왼쪽 15% 위치, 세로 중앙
    • line-height 45px, font-size 24px, text-shadow로 가독성 강화
  • 좌우 버튼 .btn.prev/.btn.next:
    • 세로 중앙, 글자 크기 50px, 커서 포인터

콘텐츠/배너/숏컷

  • section: 폭 1200px, 높이 200px
  • section article: 폭 400px씩 3등분, 높이 200px
  • 탭(공지/갤러리)
    • .contents .menu li: 2개(50%씩), 회색 배경, 클릭 가능
    • .menu li.on: 흰 배경, border-bottom 제거
    • .btn_cover: 테두리 박스, 안에 .btn1/.btn2
    • .btn1 table: 글자 크기 14px
    • .t1: cursor:pointer (팝업용)
    • .btn2: 기본 display:none, 이미지 높이 139px
  • 배너
    • .banner .img_box:
      • 높이 60px, background:no-repeat center / cover;, 둥근 모서리
    • .i1~i3: 각각 banner1~3.jpg 지정
  • 바로가기
    • .shortcut img: 높이 200px, 가로 비율 유지, 좌우로 나란히 배치

푸터/팝업

  • footer: 전체 폭, 높이 100px, 배경 #ccc
  • .f_cover: 1200px 중앙 정렬
  • .f_logo: 폭 200px, 로고 위쪽 여백 30px
  • .f_r.menu/.f_r.copy: 각각 높이 50px, 중앙 정렬 텍스트
  • .pop:
    • 전체 화면 fixed, 반투명 검정 배경, 기본 display:none
  • .pop_cover:
    • 중앙 정렬, 흰 배경, 둥근 모서리, 패딩 30px
    • p: 줄간격 2, margin 10px

4. js/script.js 동작 정리

1) GNB 전체 드롭다운

  • mouseenter nav
    • $("nav>ul>li>ul, .full_bg").stop().slideDown();
    • → 모든 2차 메뉴 + 전체 배경이 아래로 펼쳐짐
  • mouseleave nav
    • slideUp()으로 다시 접힘

2) 메인 슬라이드 (좌우 버튼)

  • 전역 변수 var i = 0;
  • 다음 버튼 .next 클릭
    • i++, 3이 되면 0으로 초기화
    • 새 슬라이드: .img_slide ul li.eq(i)
      • left:100% → 0으로 오른쪽에서 들어옴
    • 이전 슬라이드: .img_slide ul li.eq(i-1)
      • left:0 → -100%로 왼쪽으로 나감
  • 이전 버튼 .prev 클릭
    • i--
    • 새 슬라이드: .eq(i)를 left:-100% → 0 (왼쪽에서 들어옴)
    • 다음 슬라이드: .eq(i+1)를 left:0 → 100% (오른쪽으로 나감)
    • i가 -1이면 2로 되돌려 마지막 슬라이드에서 순환

3) 공지/갤러리 탭 전환

  • 대상: .contents .menu li 클릭
  • 동작:
    • 클릭 인덱스 i 구함
    • .btn_cover .btn 전부 hide() 후, .eq(i).show()
    • .menu li의 on 제거 후, 클릭한 요소에 on 추가
    • 기본: 공지사항(btn1) 보임, 갤러리(btn2) 숨김

4) 팝업

  • 열기: .t1 클릭 시 .pop fadeIn(400)
  • 닫기: 모든 button 클릭 시 .pop fadeOut(400)
    • (현재 페이지에서는 팝업 안의 “닫기” 버튼이 대상)

5. 웹디자인기능사 포인트 정리

  • GNB 전체메뉴: nav 전체에 mouseenter/leave 이벤트 + .full_bg로 배경 처리
  • 슬라이드: 좌우 버튼으로 인덱스 증감, left 값 변경을 이용한 가로 슬라이드
  • 탭 전환: 인덱스 기반으로 .btn show/hide + on 클래스 토글 패턴
  • 팝업: 특정 행 클릭 → 전체 화면 오버레이 팝업 → 버튼으로 닫기
  • 레이아웃: 1200px 고정 폭, header/슬라이드/3컬럼 section/footer 구조 이해

'FrontEnd > 웹디자인기능사' 카테고리의 다른 글

대한투어 사이트 정리 (웹디자인기능사)  (0) 2026.04.02
남도맛기행 축제 사이트 정리 (웹디자인기능사)  (0) 2026.03.31
웹디자인 기능사 - 김치연구소  (0) 2026.03.26
Vallery Festival 웹사이트 - 웹디자인기능사  (0) 2026.02.15
강원천문대 - 웹디자인기능사  (0) 2026.02.09

관련글

티스토리툴바