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

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

by KISCH 2021. 2. 8.
반응형
웹디자인기능사 실기 A유형 'JUST쇼핑몰' 기출문제 풀이입니다. 슬라이드, 탭메뉴, 팝업메뉴 등을 구현해야 합니다.

 

구현해야 할 주요 요소들

 

1. 요구사항

charset : UTF-8

 

2. 색

주조색, 보조색, 배경색, 텍스트색

 

3. 로고

가로세로 200픽셀 X 40픽셀 

심벌없는 워드 타입 (Header 폴더의 제공 된 텍스트)

 

4. 메뉴

메인 메뉴 — 마우스 올리면 하이라이트 벗어나면 하이라이트 해제

서브 메뉴 — 메인 메뉴에 마우스를 올리면 서브 메뉴 부드럽게 나타남

 

5. 슬라이드 이미지

이미지 : slide 폴더 안 이미지 제공

애니메이션 : 좌우 / 상하 / 페이드인, 아웃

 

6. 탭 메뉴

공지사항 : contents 폴더에 제공된 텍스트. 타이틀 영역과 콘텐츠 영역 구분하여 표현

갤러리 : contents 폴더에 제공된 이미지

배너 : 

바로가기 : 

 

7. 팝업레이어

열기 / 닫기

 

8. 하단

하단로고 : 로고를 grayscale로 변경

SNS : Footer 폴더에 제공된 텍스트를 사용 Copyright와 SNS 제작

 

정리

1. 와이어프레임 : header, section, footer

2. header

  • 로고
  • nav 드랍다운메뉴 구현

3. section

  • 슬라이드
  • 탭메뉴 공지사항 갤러리
  • 배너
  • 바로가기

4. footer

  • 로고
  • copyright
  • sns

 

 

 

 

 

 

 

웹디자인 간략 순서

 

1. 바탕화면에 수험자 본인의 '비번호' 이름의 폴더에 완성된 파일을 저장

  • 비번호 폴더 안에 css, js, images 폴더 생성

2. 'js'폴더에 제공받은 'jQuery'오픈소스 붙여넣기

3. 와이어프레임 파악 후 각 요소별 사이즈 지정

4. 제작할 이미지 사이즈 지정

5. 제작 이미지는 모두 'images'폴더에 저장

  • 상단로고 : header_logo.png,
  • 하단로고 : footer_logo.png (Grayscale)
  • 메인 이미지 3장
  • 갤러리 이미지 3장
  • 배너이미지
  • 바로가기 이미지

6. index.html, common.css, common.js

7. index.html 에 css 와 js 연결

<meta charset="UTF-8">
<link rel="stylesheet" href="css/common.css">
<script src="js/jquery-1.12.3.js"></script>
<script src="js/common.js"></script>

 

8. common.css에 base 설정 (문제지 요구사항 참고하여)

  • 텍스트색상, li, a, img 등
* {
    padding: 0;
    margin: 0;
    font-family: "맑은 고딕", sans-serif;
    font-size: 14px;
    color: #333333;
}
li { list-style: none; }
a { text-decoration: none; }
img { border: none; }

 

9. 와이어프레임에 맞게 전체적 태그 작성

  • <header>, <section>, <footer> 등

10. 영역작성 및 가운데 정럴

header {
	width: 1200px; height: 100px;
    	margin: 0 auto;
}
section {
	width: 1200px; height: 500px;
    	margin: 0 auto;	
}
footer {
	width: 1200px; height: 100px;
    	margin: 0 auto;
}

11. 레이아웃 태그 작성

  • <nav>
<!DOCTYPE html>
...
<header>
	<h1> </h1>
	<nav class="gnb"> </nav>
</header>
        
<section>
	<div class="slider"> </div>
	<div class="noticegallery"> </div>
	<div class="banner"> </div>
	<div class="shortcut"> </div>
</section>
        
<footer>
	<h1> </h1>
	<nav class="fgnb"> </nav>
	<p> </p> 
</footer>

 

12. common.css에 레이아웃 영역지정 및 색상처리

.gnb {
    float: right;
    width: 600px; height: 40px;
    margin-top: 30px;
}
.slider {
    width: 1200px; height: 300px;
}
.noticegallery {
    float: left;
    width: 400px; height: 200px;
}
.banner {
    float: left;
    width: 400px; height: 200px;
}
.shortcut {
    float: left;
    width: 400px; height: 200px;
}
footer h1 {
    float: left;
    width: 400px; height: 200px;
}
.fgnb {
    float: left;
    width: 950px; height: 50px;
}
footer p {
    float: left;
    width: 950px; height: 50px;
}

13. 상단과 하단에 로고 삽입

  • href="#" : 최상단 링크
<h1> 
	<a href="#"> <img src="images/header_logo.png" alt="로고" /> </a>
</h1>

 

14. 하단에 카피라이트와 하단 메뉴 태그 작성

  • © 특수문자 : 윈도우키 + 마침표
<nav class="fgnb"> 
  <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>

 

15. 하단에 카피라이트와 하단 메뉴  css 작성

  • snsNav li, snsNav .last, snsNav li a
footer h1 {
    float: left;
    width: 250px;
    height: 100px;
}
.fgnb {
    float: left;
    width: 950px;
    height: 50px;
    line-height: 50px;
    text-align: center;
}
.fgnb li {
    display: inline-block;
    padding-right: 10px;
}
.fgnb li:after {
    content: '|';
    position: relative;
    left: 7px;
    top: -2px;
}
.fgnb .last {
    padding-right: 0;
}
.fgnb .last:after {
    content: '';
}
footer p {
    float: left;
    width: 950px;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

 

16. 배너와 바로가기 이미지 코드 넣기

17. 배너와 바로가기 이미지 여백

.banner {
    float: left;
    width: 400px;
    height: 200px;
    padding: 10px 20px 0;
    box-sizing: border-box;
}
.shortcut {
    float: left;
    width: 400px;
    height: 200px;
    padding: 10px 20px 0;
    box-sizing: border-box;
}

 

18. 메뉴 사이트탭 확인 및 와이어프레임 확인

  • 마우스오버 하이라이트, 서브메뉴, 마우스 아웃

19. 메뉴 (.gnb) html 코드 작성

<div class="gnb_wrap">
	<nav>
    	<ul class="gnb">
           <li><a href="#"> 탑 </li>
            	<ul class="gnb2">
                    <li><a href="#"> 블라우스 </li>
                    <li><a href="#"> 티 </li>
                    <li><a href="#"> 셔츠 </li>
                    <li><a href="#"> 니트 </li>
                 </ul>
            <li><a href="#"> 아우터 </li>
            <li><a href="#"> 팬츠 </li>
            <li><a href="#"> 악세서리 </li>
        </ul>
	</nav>
</div>

 

20. 메뉴 (.gnb) css 코드 작성

  • 마우스오버 -> hover
.gnb {
    float: right;
    width: 600px;
    height: 40px;
    margin-top: 30px;
}
.gnb > ul > li {
    float: left;
    width: 150px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    position: relative;
}
.gnb > ul > li:hover .mainNav {
    background-color: #0066ad;
    color: #fff;
}
.mainNav {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 18px;
    font-weight: bold;
}
.subNav {
    position: absolute;
    top: 40px;
    z-index: 5000;
    width: 100%;
    height: 120px;
    background-color: #fff;
}
.subNav li {
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
}
.subNav li a {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 14px;
}
.subNav li a:hover {
    background-color: #30a3f3;
}

 

21. 메뉴 (.gnb) 제이쿼리 코드 작성

$(document).ready(function () {
    // 메뉴
    $('.subNav').slideUp(0);
    $('.gnb').hover(function(){
        $(this).find('.subNav').stop().slideDown('fast');
    }, function(){
        $(this).find('.subNav').stop().slideUp('fast');
    });
})

 

22. 메인이미지 슬라이더 html 작성

<section id="container">
	<div id="">
    	<div class="slider">
        	<img src="" alt="" />
            <img src="" alt="" />
            <img src="" alt="" />
        </div>
    </div>
</section>

23. 메인이미지 슬라이더 css 작성

/*메인 슬라이드*/
.slider {
    width: 1200px;
    height: 300px;
    overflow: hidden;
}
.slider ul {
    width: 1200px;
    height: 300px;
    position: relative;
}
.slider li {
    position: absolute;
    top: 0;
    left: 0;
    width: 1200px;
    height: 300px;
}

 

24. 메인이미지 슬라이더 제이쿼리 작성

	var num=0;

    $('.slider li').fadeOut(0);
    $('.slider li').eq(num).fadeIn(0);  //첫번째만 보이게
    
    setInterval(function(){
        if(num<2) {
           num++;
        } else {
           num=0;
        }
        $('.slider li').fadeOut('slow');
        $('.slider li').eq(num).fadeIn('slow');
    },3000);

 

25. 공지사항 / 갤러리 탭바

26. 탭바 구조 html 코드

<div id="">
	<ul class="tap_wrap">
    	<li><a href="#">공지사항</a>
        	<ul>
            	<li><a href="#">공지사항글목록1</a></li>
                <li><a href="#">공지사항글목록2</a></li>
                <li><a href="#">공지사항글목록3</a></li>
                <li><a href="#">공지사항글목록4</a></li>
            </ul>
        </li>
        <li><a href="#">갤러리</a>
        	<ul>
            	<li><a href="#"><img src="" alt="" /></a></li>
                <li><a href="#"><img src="" alt="" /></a></li>
                <li><a href="#"><img src="" alt="" /></a></li>
            </ul>
         </li>
    </ul>
</div>

 

27. 탭바 구조 css 코드

/*공지사항 갤러리*/
.noticegallery {
    float: left;
    width: 400px;
    height: 200px;
}
.noticegallery .btn {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #999999;
}
.noticegallery .btn li {
    float: left;
    margin: 0 10px;
    height: 100%;
    line-height: 49px;
}
.noticegallery .btn li a {
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    font-size: 10px;
    font-weight: bold;
    color: #999999;
}
.noticegallery .btn li.on a {
    color: #222328;
    border-bottom: 3px solid #222328;
}
.noticegallery .btn .first {
    margin-left: 0;
}
.noticegallery .bWrap {
    width: 100%;
    height: 150px;
}
.bWrap > div {
    display: none;
}
.notice {
    width: 100%;
    height: 150px;
}
.gallery {
    width: 100%;
    height: 150px;
}

 

28. 탭바 구조 제이쿼리 코드

	$('.noticegallery .btn li').first().addClass('on');
    $('.bWrap > div').first().fadeIn(0);
    
    $('noticegallery .btn li a').click(function(){
        $('noticegallery .btn li').removeClass('on');
        $(this).parent().addClass('on');
        var i = $(this).parent().index();
        $('.bWrap > div').fadeOut(0);
        $('.bWrap > div').eq(i).fadeIn(0);
    });

 

29. 공지사항 html 코드

30. 공지사항 css 코드

31. 갤러리 html 코드

32. 갤러리 css 코드

33. 갤러리 제이쿼리 코드

34. 공지사항 리스트 a태그 클래스 적용

35. 레이어 팝업 html 코드

36. 레이어 팝업 css 코드

38. 레이어 팝업 제이쿼리 처리

39. 웹표준 검사하기 : https://validator.w3.org/

40. 크롬 개발자모드 오류 확인 : F12 콘솔

 

 

웹디자인기능사실기

 

관련포스트
 
 

 

반응형
저작자표시

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

웹디자인기능사 실기 | 문제 풀이 B-1 (대한은행)  (0) 2021.08.10
웹디자인기능사 실기 | 주요 코드 정리  (2) 2021.08.04
웹디자인기능사 실기 | 문제 풀이 A-3 (강원천문대)  (0) 2021.08.03
웹디자인기능사 실기 | 메뉴(네비게이션) 유형별 소스  (1) 2021.07.20
웹디자인기능사 실기 | 슬라이드 패턴  (0) 2021.02.23
웹디자인기능사 필기 | 웹그래픽디자인  (0) 2021.01.14
웹디자인기능사 필기 | 인터넷일반  (0) 2021.01.13
웹디자인기능사 필기 | 디자인 일반  (0) 2021.01.12

관련글

댓글

티스토리툴바