자격증

[웹디자인기능사] 웹디자인 기능사 실기 C-1 해운대빛축제

이레의 개발노트 2022. 6. 3. 16:09
728x90
반응형

1) 와이어프레임을 참고하여 html과 css 기초 구조를 잡아줍니다.

 

2) 앞서 했던 A유형과는 달리 nav 영역이 왼쪽에 있고 세로로 떨어지는 형태입니다.

<header class="header">
    <h1 class="logo"><a href="#"><img src="./images/logo.png" alt="로고"></a></h1>
    <nav class="nav">
        <ul class="nav-menu-group">
            <li class="nav-menu-list">
                <a href="#">이용안내</a>
                <ul class="sub-menu-group">
                    <li class="sub-menu-list">
                        <a href="#">이용방법</a>
                    </li>
                    <li class="sub-menu-list">
                        <a href="#">이용시간</a>
                    </li>
                    <li class="sub-menu-list">
                        <a href="#">이용요금</a>
                    </li>
                </ul>
            </li>
            <li class="nav-menu-list">
                <a href="#">이벤트정보</a>
                <ul class="sub-menu-group">
                    <li class="sub-menu-list">
                        <a href="#">현장이벤트</a>
                    </li>
                    <li class="sub-menu-list">
                        <a href="#">온라인이벤트</a>
                    </li>
                    <li class="sub-menu-list">
                        <a href="#">이벤트예약</a>
                    </li>
                </ul>
            </li>
            <li class="nav-menu-list">
                <a href="#">프로그램</a>
                <ul class="sub-menu-group">
                    <li class="sub-menu-list">
                        <a href="#">프로그램안내</a>
                    </li>
                    <li class="sub-menu-list">
                        <a href="#">온라인예약</a>
                    </li>
                    <li class="sub-menu-list">
                        <a href="#">단체예약상담</a>
                    </li>
                </ul>
            </li>
            <li class="nav-menu-list">
                <a href="#">고객센터</a>
                <ul class="sub-menu-group">
                    <li class="sub-menu-list">
                        <a href="#">공지사항</a>
                    </li>
                    <li class="sub-menu-list">
                        <a href="#">자주묻는질문</a>
                    </li>
                    <li class="sub-menu-list">
                        <a href="#">자료실</a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</header>
.header {width:200px;background:rgb(218, 218, 248);}
.logo {width:200px;height:40px;}
.nav {width:180px;margin:0 auto;}
.nav a {display:inline-block;width:100%;height:100%;font-weight:bold;}
.nav-menu-group {text-align:center;line-height:2.5;}
.nav-menu-list {border:1px solid rgb(55, 55, 128);}
.nav-menu-list:hover {background:skyblue;}
.nav-menu-list:hover a {color:#fff;}
.sub-menu-group {display:none;}
.sub-menu-list {background:rgb(100, 125, 236);}
.sub-menu-list:hover {background:skyblue;}
.sub-menu-list:hover a {color:#fff;}
 //menu
$('.nav-menu-list').mouseover(function () { 
    $(this).find('.sub-menu-group').slideDown(800);
});

$('.nav-menu-list').mouseleave(function () { 
    $(this).find('.sub-menu-group').slideUp(800);
});

3) 슬라이드 부분은 페이드인, 페이드아웃입니다.

 <div class="slide-wrap">
    <ul class="slide-group">
        <li class="slide-list">
            <a href="#"><img src="./images/slide1.png" alt="slide1"></a>
        </li>
        <li class="slide-list">
            <a href="#"><img src="./images/slide2.png" alt="slide2"></a>
        </li>
        <li class="slide-list">
            <a href="#"><img src="./images/slide3.png" alt="slide3"></a>
        </li>
    </ul>
</div>
.slide-wrap {width:800px;height:350px;}
.slide-group {position:relative;width:100%;height:100%;}
.slide-list {position: absolute;}
 //slide
$('.slide-list:gt(0)').hide();
setInterval(function () { 
    $('.slide-list:first').fadeOut(1500).next().fadeIn(1500);
    $('.slide-list:first').appendTo('.slide-group');
}, 3000);

4) 탭과 배너, 바로가기 영역의 넓이는 시험자가 정합니다.

공지사항과 갤러리는 탭으로 구성하고, 공지사항 첫번째를 누르면 팝업이 떠야합니다.

팝업은 닫기 버튼을 눌렀을때 닫혀야합니다.

<div class="article-box">
    <div class="tap-box">
        <ul class="tab-group">
            <li class="tab-list active"><a href="#">공지사항</a></li>
            <li class="tab-list"><a href="#">갤러리</a></li>
        </ul>
        <div class="notice-box tab-item">
            <ul class="notice-group">
                <li class="notice-list first"><a href="#">공지사항입니다.</a><span>2022.06.03</span></li>
                <li class="notice-list"><a href="#">공지사항입니다.</a><span>2022.06.03</span></li>
                <li class="notice-list"><a href="#">공지사항입니다.</a><span>2022.06.03</span></li>
            </ul>
        </div>
        <div class="gallery-box tab-item">
            <a href="#"><img src="./images/gal1.png" alt="gal1"></a>
            <a href="#"><img src="./images/gal2.png" alt="gal2"></a>
            <a href="#"><img src="./images/gal3.png" alt="gal3"></a>
        </div>
    </div>
    <div class="banner">
        <a href="#"><img src="./images/banner.png" alt="banner"></a>
    </div>
    <div class="direct">
        <a href="#"><img src="./images/link.png" alt="direct"></a>
    </div>
</div>
<div class="modal-bg"></div>
<div class="modal-wrap">
   <div class="modal-head">
       <h2>타이틀</h2>
   </div>
   <div class="modal-body">
       <p>여기 내용이 들어갑니다.</p>
       <button type="button" class="btn-close">닫기</button>
   </div>
</div>
.article-box {display:flex;width:100%;height:200px;}
.tap-box {width:41%;}
.tab-group {}
.tab-group:after {display:block;content:'';clear:both;}
.tab-list {float:left;width:120px;height:30px;font-weight:bold;text-align:center;line-height:2;background:#fff;}
.tab-list.active {background:rgb(252, 239, 241);}
.notice-box {}
.notice-group {}
.notice-list {display:flex;justify-content:space-between;width:100%;height:50px;line-height:3;border-bottom:1px solid;}
.notice-list a {display:inline-block;padding-left:10px;}
.notice-list span {display:inline-block;padding-right:10px;}
.gallery-box {padding-top:20px;padding-left:5px;}
.gallery-box:after {display:block;content:'';clear:both;}
.gallery-box a {display:inline-block;float:left;margin-right:5px;}
.tab-item {display:none;}

.modal-bg {display:none;width: 100%;height: 100%;background:rgba(0, 0, 0, 0.7);position:fixed;top:0;right:0;left:0;}
.modal-wrap {display:none;width:500px;height:500px;padding:20px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;}
.modal-head {height:50px;}
.modal-body {height:400px;position: relative;}
.btn-close {position:absolute;bottom:30px;right:30px;}
 //tap
$('.tab-item').eq(0).show();
$('.tab-list').click(function () { 
    var tabItem = $(this);
    $('.tab-group').find('.tab-list').removeClass('active');
    $('.tab-item').hide();

    var i = tabItem.index();
    tabItem.addClass('active');
    $('.tab-item').eq(i).show();
});

//popup
$('.notice-list.first').click(function () { 
    $('.modal-bg').show();
    $('.modal-wrap').show();
});

$('.btn-close').click(function () { 
    $('.modal-bg').hide();
    $('.modal-wrap').hide();
});

[자격증] - [웹디자인기능사] 웹디자인 기능사 실기 준비

 

[웹디자인기능사] 웹디자인 기능사 실기 준비

1, 웹디자인 기능사 실기 시험장에는 보통 코드에디터가 설치되어있고, 기본적으로 emmet이 있습니다. 가끔 단축키가 지원되지 않는 시험장이 있는데, 그럴 경우에는 html 구조부터 코딩해야 합니

sevendays.tistory.com

[자격증] - [웹디자인기능사] 웹디자인 기능사 실기 문제풀이 (A-1 Just쇼핑몰)

 

[웹디자인기능사] 웹디자인 기능사 실기 문제풀이 (A-1 Just쇼핑몰)

1) html의 기본 구조를 잡은 후 요구사항에 적혀있는 것들을 토대로 css 기본을 잡아줍니다. @charset "UTF-8"; * {margin:0;padding:0;background-color:#fff;color:#333; font-family:'맑은고딕', sans-serif;fo..

sevendays.tistory.com

[자격증] - [웹디자인기능사] 웹디자인 기능사 실기 문제풀이 (A-2 그린복지재단)

 

[웹디자인기능사] 웹디자인 기능사 실기 문제풀이 (A-2 그린복지재단)

1) 기본구조 잡는 것과 css 기본 잡는 것은 A-1과 비슷합니다. A-1을 참고해주세요. 2) 이번 nav영역은 background가 깔립니다. 구조를 작성할 때 까먹지 말고 함께 해주세요. 재단소개 설립취지 연혁 찾

sevendays.tistory.com

 

728x90
반응형
저작자표시 비영리 동일조건

'자격증' 카테고리의 다른 글

[네트워크 관리사 2급] 네트워크 관리사 독학 / 네관사 2급 실기 준비 / 실기 독학  (0) 2023.01.18
[네트워크 관리사 2급] 네트워크 관리사 독학 / 네관사 2급 준비 / 공부방법  (0) 2023.01.17
[웹디자인기능사] 웹디자인 기능사 실기 문제풀이 (A-2 그린복지재단)  (0) 2022.06.02
[웹디자인기능사] 웹디자인 기능사 실기 문제풀이 (A-1 Just쇼핑몰)  (0) 2022.06.02
[웹디자인기능사] 웹디자인 기능사 실기 준비  (0) 2022.05.23

'자격증'의 다른글

  • 현재글[웹디자인기능사] 웹디자인 기능사 실기 C-1 해운대빛축제

관련글

댓글

티스토리툴바