본문 바로가기
컴퓨터자격증/웹디자인기능사

웹디자인기능사 실기 | 문제 풀이 C-3 (남도맛기행 축제)

by KISCH 2022. 3. 15.
반응형

 

웹디자인기능사 실기 B-3 (세계의 미술작품)의 유형은 다음과 같습니다.

  • 메뉴 : 가로형 서브메뉴 하단
  • 슬라이드 : 아래에서 위
  • 공지사항 / 팝업창 : 공지사항/갤러리 분리형, 일반 팝업창
  • 갤러리 : 마우스 오버 시 투명도
  • 배너
  • 푸터 : SNS

 

아래 첨부된 이미지는 "세계의 미술작품"와 아무상관 없는 문제풀이용 더미이미지입니다. (출처 : 미리캔버스)

images.zip
0.03MB

 

웹디자인기능사 실기

 

 

기본설정 / 레이아웃

 

파일 및 폴더

폴더 — css, images, js

파일 — index.html, css파일, js파일, jQuery파일, 이미지 파일(images폴더)  

 

저는 헤더(네비), 섹션(슬라이드, 공지사항, 갤러리, 배너), 푸터(네비, 패밀리사이트) 등 레이아웃을 먼저 잡아놓고 합니다.

 

HTML 

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/common.css">
        <script src="js/jquery-1.12.3.js"></script>
        <script src="js/common.js"></script>
    </head>
    <body>
        <header>
            <h1></h1>
            <!-- 메뉴 -->
            <nav class="nav_header">  </nav>                         
        </header>
        
        <section>
            <div class="slide"> </div>   
            <div class="notice"></div> 	
            <div class="gallery"></div>  
            <div class="banner"> </div>   
            <div class="shortcut"></div>       
        </section>
        
        <!-- 푸터 -->
        <footer>
            <h1>  </h1>                    
            <nav class="nav_footer"> </nav>   
            <p>  </p>   
        </footer> 
    </body>
</html>

 

CSS 

*{
    padding: 0; margin: 0;
    font-family: "맑은 고딕", sans-serif;
    font-size: 14px; color: #333333;
}
li { list-style: none; }
a { text-decoration: none; }
img { border: none; }
body { width: 1000px; height: 650px; }         

header { float: left; width: 200px; height: 650px; background-color: antiquewhite; }
section { float: left; width: 800px; height: 550px; background-color: aqua; }
footer { float: left; width: 800px; height: 100px; background-color: aquamarine; }

header h1 {  width: 200px; height: 100px; }

.slide { overflow: hidden; width: 800px; height: 350px; background-color: azure; }
.notice { float: left; width: 266px; height: 200px; background-color: beige; }
.gallery { float: left; width: 266px; height: 200px; background-color: cadetblue; }
.banner { float: left; width: 266px; height: 200px; background-color: chartreuse; }

영역이 잘 나누어졌는지 확인하신 뒤 백그라운드컬러는 꼭 빼주세요.

 

웹디자인기능사실기

 

 

로고 / 하단 메뉴 / 카피라이트

 

HTML

<header>
    <h1><a href="#"><img src="images/logo_header.png" alt="헤더로고"></a></h1>
</header>

<!-- 푸터 -->
<footer>
    <h1> <a href="#"><img src="images/logo_footer.png" alt="푸터로고"></a> </h1>                    
    <nav class="nav_footer">                                 
        <ul>
            <li><a href="#">개인정보취급방침 </a></li>
            <li><a href="#">제휴문의 </a></li>
            <li class="last"><a href="#">RSS</a></li>
        </ul>
    </nav>   
    <p> Copyright. 남도 All rights reserved. </p>   
</footer>

 

CSS

/*푸터*/
footer h1 { 
    float: left; width: 200px; height: 40px; padding-top: 30px;
}
.nav_footer { 
    float: left; width: 600px; height: 50px; 
    font-size: 18px; line-height: 49px;
    text-align: center;
    box-sizing: border-box;
}
.nav_footer li { display: inline-block; }
.nav_footer li:after { content: '|'; position: relative; }
.nav_footer .last { padding-right: 0; }
.nav_footer .last:after { content: ''; }
footer p { 
    float: left; width: 600px; height: 50px; 
    font-size: 16px; line-height: 49px;
    text-align: center;
    box-sizing: border-box;
}

 

웹디자인남도맛기행

 

 

갤러리 / 배너

 

HTML

<div class="gallery">
    <h3>갤러리</h3>
    <ul>
        <li><a href="#"><img src="images/gallery1.png" alt="갤러리이미지1"></a></li>
        <li><a href="#"><img src="images/gallery2.png" alt="갤러리이미지2"></a></li>
        <li><a href="#"><img src="images/gallery3.png" alt="갤러리이미지3"></a></li>
    </ul>
</div>  
<div class="banner">
    <a href="#"><img src="images/banner.png" alt="배너"></a>
</div>

 

CSS

.gallery { 
    float: left; width: 266px; height: 200px; 
    padding: 5px;
    box-sizing: border-box;
}
.gallery h3 {
    width: 100%; height: 50px; 
    font-size: 18px; line-height: 49px;
    box-sizing: border-box;
    border-bottom: 1px solid #999999;
}
.gallery ul { padding: 25px 0; }
.gallery li { 
    float: left; 
    width: 75px; height: 75px;
    padding: 5px;
}
.gallery li img { transition: 0.3s; }         
.gallery li a:hover img { opacity: 0.5s; }    
.banner { 
    float: left; width: 266px; height: 200px; 
    text-align: center;
}

 

남도맛기행

 

 

 

공지사항 / 팝업창

 

HTML

<body>
    <!-- 팝업창 --> 
    <div class="popup">                                             
        <h2> 남도의 유래 </h2>
        <p>
        남도는 원래 왕성이 있는 경기이남을 의미합니다. <br />
            <br />
        서울에서 충청도, 경상도, 전라도로 가는 길을 '삼남대로'라고 표현하기도 하죠. <br />
            <br />
        남과 북으로 되어 있는 도에서 남쪽에 있는 도를 이르는 말이기도 합니다.
            <br />
        </p>
        <a href="#"> 닫기 X </a>
    </div>
    
    <section>
        <!-- 슬라이드 -->
        <div class="slide"> </div>   
        <div class="notice">
            <h3>공지사항</h3>
            <ul>
                <li><a href="#" class="popupOpen">• 남도는 어디인가? </a><span class="date">2022.03.15</span></li>
                <li><a href="#">• 전라남도 맛 기행 </a><span class="date">2022.02.11</span></li>
                <li><a href="#">• 경상남도 맛 기행 </a><span class="date">2022.01.05</span></li>
                <li><a href="#">• 여가 충청남도여? </a><span class="date">2022.01.01</span></li>
            </ul>
        </div>

 

CSS

/*공지사항*/
.notice { 
    float: left; width: 266px; height: 200px; 
    padding: 5px;
    box-sizing: border-box;
}
.notice h3 { 
    width: 100%; height: 50px; 
    font-size: 18px; line-height: 49px;
    box-sizing: border-box;
    border-bottom: 1px solid #999999;
}
.notice ul { padding: 25px 0; }
.notice li { 
    width: 100%; height: 20px; 
    padding-top: 5px;
    font-size: 12px; line-height: 19px;
    box-sizing: border-box;
}
.notice li a { float: left; display: block; }
.notice li .date { float: right; display: block; }

.popup { 
    display: none;
    position: fixed; 
    width: 300px; height: 300px;
    top: 150px; left: 0; right: 0;
    margin: 0 auto; padding: 10px;
    background-color: #fff;
    border: 1px solid #999999;
}
.popup h2 { 
    height: 30px;
    font-size: 18px; line-height: 20px;
    margin-bottom: 10px;
    border-bottom: 1px solid #999999;
}
.popup p { font-size: 12px; }
.popup a { 
    display: block; 
    position: absolute;
    text-align: right;
    bottom: 10px; right: 10px;
}

 

JAVASCRIPT 

$(document).ready(function(){
    // 팝업창
    $('.popupOpen').click(function(){
        $('.popup').fadeIn(0); 
     });
     $('.popup a').click(function(){
         $('.popup').fadeOut(0);
     });
});

 

웹디자인기능사팝업창

 

 

슬라이드

 

HTML

<!-- 슬라이드 -->
<div class="slide">
    <ul>
        <li><a href="#"><img src="images/slide1.png" alt="슬라이드이미지1"></a></li>
        <li><a href="#"><img src="images/slide2.png" alt="슬라이드이미지2"></a></li>
        <li><a href="#"><img src="images/slide3.png" alt="슬라이드이미지3"></a></li>
    </ul>
</div>

 

CSS

/* 슬라이드 */
.slide { 
    overflow: hidden; 
    position: relative; 
    width: 800px; height: 350px; 
}
.slide ul { 
    position: absolute; 
    width: 2400px; height: 350px;
}
.slide li { 
    float: left; left: 0;
    width: 800px; height: 350px; 
}

 

JAVASCRIPT 

// 슬라이드
var num = 0;
setInterval(function(){

    if(num<2){
        $('.slide ul').animate({
            left: '-=' + 800
        },"slow");
        num++;
    } else {
        $('.slide ul').animate({
            left: 0
        },"slow");
        num = 0;
    }
}, 3000);

 

 

메뉴

 

HTML

<header>
    <h1><a href="#"><img src="images/logo_header.png" alt="헤더로고"></a></h1>
    <!-- 메뉴 -->
    <nav class="nav_header">                                    
        <ul>
            <li>
                <a href="#" class="mainMenu"> 협회소개 </a>     
                <ul class="subMenu">
                    <li><a href="#">인사말</a></li>
                    <li><a href="#">명인</a></li>
                    <li><a href="#">오시는길</a></li>
                </ul>           
            </li>
            <li>
                <a href="#" class="mainMenu"> 행사안내 </a>     
                <ul class="subMenu">
                    <li><a href="#">요리경연대회</a></li>
                    <li><a href="#">전시참가</a></li>
                    <li><a href="#">참가신청</a></li>
                </ul>           
            </li>
            <li>
                <a href="#" class="mainMenu"> 홍보마당 </a>     
                <ul class="subMenu">
                    <li><a href="#">축제소식</a></li>
                    <li><a href="#">보도자료</a></li>
                    <li><a href="#">레시피</a></li>
                </ul>           
            </li>
            <li>
                <a href="#" class="mainMenu"> 회원마당 </a>     
                <ul class="subMenu">
                    <li><a href="#">Q&amp;A</a></li>
                    <li><a href="#">사진갤러리</a></li>
                    <li><a href="#">공지사항</a></li>
                </ul>           
            </li>
        </ul>
    </nav>                         
</header>

 

CSS

/* 메뉴 */
/*전체영역*/
.nav_header { 
    width: 200px;
    overflow: hidden;
    padding: 20px; box-sizing: border-box;
}
.nav_header > ul > li { 
    width: 100%;
    overflow: hidden; 
}
/*메인메뉴영역*/
.mainMenu { 
    display: block; 
    width: 100%; height: 40px;
    line-height: 40px;
    color: #000; font-weight: bold; font-size: 18px;
    border-bottom: 1px solid #000;
    position: relative;
}
.nav_header > ul > li:hover .mainMenu { color: #fff; background-color: hotpink; }
/*서브메뉴영역*/
.subMenu { 
    display: none;
    width: 180px; height: 200px; z-index: 5000; 
    position: absolute; top: 100px; left: 180px;
    padding: 20px;
    box-sizing: border-box;
    background-color: hotpink;
}
.subMenu li { 
    border-bottom: 1px solid #000;
    width: 140px; height: 40px;
    line-height: 39px;
    font-weight: bold; font-size: 12px;
}
.subMenu li a { display: block; }
.subMenu li a:hover { color: #fff; }

 

JAVASCRIPT 

// 메뉴
$('.subMenu').slideUp(0);
$('.mainMenu').mouseenter(function(){
    $(this).find('+ .subMenu').stop().slideDown('fast');
    $(this).parent().mouseleave(function(){
        $(this).find('.subMenu').stop().slideUp('fast');
    });
});

 

 

관련포스트

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

웹디자인기능사 실기 | 문제 풀이 A-2 (Green 복지재단)

웹디자인기능사 실기 | 문제 풀이 A-3 (강원천문대)

웹디자인기능사 실기 | 문제 풀이 A-4 (유진건설)

웹디자인기능사 실기 | 문제 풀이 B-1 (대한은행)

웹디자인기능사 실기 | 문제 풀이 B-2 (대한투어)

웹디자인기능사 실기 | 문제 풀이 B-3 (세계의 미술작품)

웹디자인기능사 실기 | 문제 풀이 C-1 (해운대 빛축제)

 

남도맛기행

반응형
저작자표시

'컴퓨터자격증 > 웹디자인기능사' 카테고리의 다른 글

웹디자인기능사 실기 | 유형별 CSS 총정리  (0) 2022.03.19
웹디자인기능사 실기 | 유형별 jQuery 총정리  (0) 2022.03.18
웹디자인기능사 실기 | 문제 풀이 B-3 (세계의 미술작품)  (0) 2022.03.14
웹디자인기능사 실기 | 문제 풀이 B-2 (대한투어)  (0) 2022.03.11
웹디자인기능사 실기 | 문제 풀이 C-1 (해운대 빛축제)  (0) 2022.03.08
웹디자인기능사 실기 | 문제 풀이 A-4 (유진건설)  (0) 2022.03.04
웹디자인기능사 실기 | 문제 풀이 A-2 (Green 복지재단)  (0) 2022.02.23
웹디자인기능사 실기 | 메뉴, 슬라이드, 본문 유형  (0) 2022.02.17

관련글

댓글

티스토리툴바