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

남도맛기행 축제 사이트 정리 (웹디자인기능사)

by 허쌤 2026. 3. 31.

남도맛기행 축제 사이트 정리 (웹디자인기능사)

남도맛기행 바로가기

 

 

1. 폴더/파일 구성

핵심 파일

  • index.html: 남도맛기행 축제 메인 페이지
  • css/style.css: 전체 레이아웃, GNB 메뉴, 슬라이드, 콘텐츠, 팝업 스타일
  • js/script.js: GNB 드롭다운, 자동 이미지 슬라이드, 탭 메뉴, 팝업 동작
  • 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/banner.png

2. index.html 구조

공통 설정

  • 언어: <html lang="ko">
  • 인코딩: <meta charset="utf-8"/>
  • 제목: 남도맛기행 축제
  • 포함 리소스
    • 상단에 ./js/jquery-1.12.3.js, ./js/script.js
    • CSS: ./css/style.css

전체 레이아웃

  • #wrap
    • header: 좌측 고정 영역 (로고 + GNB 메뉴)
    • section: 우측 콘텐츠 영역 (이미지 슬라이드 + 3컬럼 콘텐츠 + 푸터)
  • .pop: 화면 전체를 덮는 팝업 레이어 (공지사항 상세)

헤더 (header)

  • 로고
    • h1.logo 안에 logo.png 이미지
  • GNB 네비게이션 (ul.gnb)
    • 1차 메뉴 4개: 협회소개 / 행사안내 / 홍보마당 / 회원마당
    • 각 1차 메뉴 안에 2차 메뉴 ul 존재 (인사말, 명인, 오시는길 등)
    • 마우스를 올리면(hover) 2차 메뉴가 오른쪽으로 펼쳐지는 구조 (JS + CSS)

섹션 (section)

2-1) 이미지 슬라이드 (.img_slide)

  • 구조
    • .img_slide > ul > li 3개
      • 각 li 안에 slide1~3.jpg와 텍스트 박스 .txt 포함
      • 문구 마지막에 “바로가기” 텍스트
  • 기능
    • script.js에서 setInterval로 3초마다 자동 슬라이드
    • 슬라이드 방식: 새 슬라이드 left:100% → 0, 이전 슬라이드 left:0 → -100%

2-2) 콘텐츠 영역 (.contents)

  • 3개의 컬럼(.c1, .c2, .c3)으로 구성
  • .c1 – 공지사항
    • 상단 탭 영역: .menu > ul > li.on (현재 탭: 공지사항)
    • 내용 영역: .btn_cover > .btn.btn1
    • 공지사항 테이블
      • 첫 번째 행(tr.t1) 클릭 시 팝업 띄움
  • .c2 – 갤러리
    • 탭 영역: .menu / 기본 탭 갤러리 활성
    • 내용 영역: .btn_cover > .btn.btn2
      • 갤러리 이미지 3장 (gallery1~3.jpg)
  • .c3 – 소개 배너
    • 배경: banner.png (CSS에서 background로 지정)
    • 내용: 남도관광 테마기행 소개 문장 + “자세히보기” 텍스트

2-3) 푸터 (.footer)

  • .f_logo: 하단 로고 (f_logo.png)
  • .f_menu: 링크 3개
    • 남도맛기행 소개
    • 개인정보취급방침
    • 이메일무단수집거부
  • .f_copy: 사업자 정보/주소/전화/팩스/사업자번호/개인정보담당자/저작권 문구

팝업 (.pop)

  • 화면 전체 덮는 오버레이 레이어
  • .pop_cover
    • 제목 h3: “숙박코스 추가 운행 안내”
    • 본문 pre: 숙박코스 운행/예약 관련 안내 텍스트
    • 닫기 버튼: <button>닫기</button>

3. css/style.css 요약

레이아웃

  • #wrap: 가로 1000px
  • header: 가로 200px, 높이 650px, 좌측 고정(float:left)
  • section: 가로 800px, 높이 650px, 우측(float:right)

GNB 메뉴

  • .gnb: 중앙 정렬, 너비 180px
  • 1차 메뉴(.gnb>li)
    • 높이 50px, hover 시 배경 #87c54f, 글자색 흰색
  • 2차 메뉴(.gnb>li>ul)
    • position:absolute; left:100%; top:0;
    • 기본 display:none, 배경 lightgray
    • a hover 시 background: yellow

이미지 슬라이드

  • .img_slide
    • position:relative; overflow:hidden; height:350px;
  • 각 슬라이드 li
    • position:absolute; left:100%; (화면 밖에서 시작)
    • 첫 슬라이드만 left:0;
  • .txt
    • 중앙 정렬(translate), 반투명 흰 배경, 둥근 모서리

콘텐츠 3컬럼

  • .contents>div: 각각 33.33%, 높이 200px
  • 탭 메뉴
    • .contents .menu li: 회색 배경, li.on은 흰색 배경
    • .btn_cover: 테두리 박스, 내부에 각 탭 내용(.btn1, .btn2)
  • 공지사항
    • .btn1 table: 작은 폰트, 글자 간격 -1px
    • .btn1 .t1: cursor:pointer (팝업 트리거)
  • 갤러리
    • .btn2 img: 높이 100px, 가로 비율 유지
  • 소개 배너
    • .c3: banner.png를 no-repeat bottom center / contain으로 배경 지정

푸터/팝업

  • .footer: 높이 100px, 배경 tan
  • .pop
    • position:fixed, 전체화면 오버레이, display:none
    • .pop_cover: 중앙 정렬 박스, 흰 배경, 라운드, word-break:keep-all

4. js/script.js 동작 정리

1) GNB 드롭다운 메뉴

  • 대상
    • 마우스 진입: .gnb>li>a
    • 마우스 이탈: .gnb>li
  • 동작
    • mouseenter 시 모든 2차 메뉴 숨김 후, 해당 메뉴의 ul만 display:block
    • mouseleave 시 모든 2차 메뉴 display:none

2) 자동 이미지 슬라이드

  • 변수: var i = 0;
  • setInterval(3초)
    • i++ 후, 3이 되면 0으로 초기화
    • 새 슬라이드: .img_slide>ul>li.eq(i)
      • left:100% → 0 애니메이션
    • 이전 슬라이드: .img_slide>ul>li.eq(i-1)
      • left:0 → -100% 애니메이션

3) 탭 메뉴(공지/갤러리 등)

  • 대상: .menu ul li 클릭
  • 동작
    • 클릭한 인덱스 i 기준으로
      • .btn들을 모두 display:none
      • 해당 인덱스의 .btn만 display:block
      • .menu ul li에서 on 제거 후, 클릭한 요소에 on 추가

4) 팝업

  • 열기
    • .t1 (공지사항 첫 번째 행) 클릭 → .pop fadeIn()
  • 닫기
    • $("button") 클릭 → .pop fadeOut()
      (현재 페이지에서 모든 버튼이 대상이므로, 필요하다면 .pop button 등으로 범위를 좁혀도 됨)

5. 웹디자인기능사 대비 포인트

  • 레이아웃: 좌측 고정 GNB + 우측 콘텐츠 구조, float 기반 레이아웃 이해
  • 메뉴 구현: GNB 2단 드롭다운 구조(hover/마우스 진입/이탈 이벤트)
  • 슬라이드: position:absolute + left 값을 이용한 가로 슬라이드 효과
  • 탭/팝업: 클래스 토글(on), display 제어, fadeIn/fadeOut 활용 패턴
  • 마크업: 의미 있는 구조(header, section, footer)와 텍스트/표 구조 이해

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

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

관련글

티스토리툴바