큐넷 웹디실기 공개문제 풀어보기 : 저스트쇼핑몰
우선 실기시험에 앞서 미리 필기구로 시험지에 중요한 부분을 체크해가며
요구사항을 숙지하는것이 중요하다.
요구사항 분석
잘 못 이해했다가 나중에 코드를 전부 수정해야하는 경우가 생길 수도 있으니
문제지 읽는 시간을 아까워하지말고 충분히 주어야한다.
↓요구사항 체크 문제지 파일↓
문제 1. Just 쇼핑몰 (웹디자인기능사 실기).pdf
요구사항을 보며 HTML 구조 먼저 짜기
HTML과 CSS를 동시에 진행하는것 보다
머릿속으로 어떻게 구조가 짜여질지 상상하면서
HTML코드를 우선 짜놓고 나중에 스타일을 입히는것이
속도면에서 더 빠르다.
(수정할 일이 줄어든다.)
캐릭터셋을 utf-8로 설정하고
css에서 텍스트 색을 #222328로 기본지정을 하고 시작했다.
css를 링크해준다.
시험장에서 제공하는 jquery 파일과 내가 작성할 js파일은 <script>로 연결해준다.
그리고 위의 코드에서
시험지 2페이지의 사이트맵과 와이어프레임을 참고하여
알맞는 위치에 html 코드을 추가입력한다.
header에는 gnb , global navigation bar가 들어가며 ul li 구조를 가진다.
1차분류로 .gnb클래스의 ul에 시험지와 같게
탑, 아우터, 팬츠, 악세사리라는 li들을 입력해준다.
탑이라는 1차 카테고리안에 블라우스, 티, 셔츠, 니트라는 2차메뉴가 있다.
'탑'과 같은 차수가(1차) 아닌 '탑'에 포함되는 자손들(2차) 이므로 꼭 탑<li> 내부에 삽입해준다.
아우터, 팬츠, 악세서리도 동일하게 입력한다.
이미지 슬라이더를 위한 3가지의 준비된 이미지를 입력한다.
(공개문제 파일에서는 제공되지 않아 임의로 만들어야한다. ㅠㅠ 너무 귀찮다.)
★다음 글에서 이미지파일 업로드예정
그리고 모든 img태그에는 alt값이 필수로 들어가야 하고
현재 사진이 없는 상황이므로 임시로 적어둔다.
메인컨텐츠 부분의 제일 왼쪽인 탭으로 이동가능한 글 박스를 만드는 부분이다.
탭박스라는 ul에 공지사항과 갤러리라는(1차메뉴) li가 있다.
네비게이션과 같은 원리로,
공지사항의 내용은 공지사항 li안에, 갤러리의 내용은 갤러리 li안에
ul 을 만들어 나열해준다.
위와 같이 탭 박스 구조를 완성했다.
메인컨텐츠의 중앙과 오른쪽부분의 배너도 임의로 입력해준다.
다음은 footer 부분이다.
문제지에 logo, copyright, sns 세가지 박스가 들어가야 하며,
나란히 나열하기 위에 같은 차수에 세가지 요구사항을 입력하였다.
★오늘까지의 html 소스코드★
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JUST 쇼핑몰</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script src="script/jquery-1.12.4.js"></script> <script src="script/js.js"></script> </head> <body> <header id="header"> <h1><a href="#none" class="logo">JUST 쇼핑몰</a></h1> <div class="gnb_wrap"> <nav> <ul class="gnb"> <li><a href="#none">탑</a> <ul class="gnb2"> <li><a href="#none">블라우스</a></li> <li><a href="#none">티</a></li> <li><a href="#none">셔츠</a></li> <li><a href="#none">니트</a></li> </ul> </li> <li><a href="#none">아우터</a> <ul class="gnb2"> <li><a href="#none">자켓</a></li> <li><a href="#none">코트</a></li> <li><a href="#none">가디건</a></li> <li><a href="#none">머플러</a></li> </ul> </li> <li><a href="#none">팬츠</a> <ul class="gnb2"> <li><a href="#none">청바지</a></li> <li><a href="#none">짧은바지</a></li> <li><a href="#none">긴바지</a></li> <li><a href="#none">레깅스</a></li> </ul> </li> <li><a href="#none">악세서리</a> <ul class="gnb2"> <li><a href="#none">귀고리</a></li> <li><a href="#none">목걸이</a></li> <li><a href="#none">반지</a></li> <li><a href="#none">팔찌</a></li> </ul> </li> </ul> </nav> </div> </header> <section id="container"> <div id="main_visual"> <div class="slider"> <img src="images/slide_1.jpg" alt="온라인/오프라인 봄 신상품 입고 및 오늘 하루 최대 10%세일에 관한 옷걸이에 옷이 걸려있는 모습" /> <img src="images/slide_2.jpg" alt="160cm 인생팬츠 JUST 팬츠에 관한 모델이 바지를 입고 앉아있는 모습" /> <img src="images/slide_3.jpg" alt="DAILY ITEM 기획전에 관련된 사진" /> </div> </div> <div id="main_contents"> <ul class="tap_wrap"> <li><a href="#none">공지사항</a> <ul> <li><a href="#none">공지사항글목록1</a></li> <li><a href="#none">공지사항글목록2</a></li> <li><a href="#none">공지사항글목록3</a></li> <li><a href="#none">공지사항글목록4</a></li> </ul> </li> <li><a href="#none">갤러리</a> <ul> <li><a href="#"><img src="images/gallery1.jpg" alt="갤러리"></a></li> <li><a href="#"><img src="images/gallery2.jpg" alt="갤러리"></a></li> <li><a href="#"><img src="images/gallery3.jpg" alt="갤러리"></a></li> </ul> </li> </ul> <div class="banner_wrap"> <img src="images/banner_1.jpg" alt="DRESS 1+1 보러가기에 관한 이미지" /> </div> <div class="go_link"> <a href="#none">특가 구입 바로가기</a> </div> </div> </section> <footer id="footer"> <a href="#">JUST 쇼핑몰</a> <div class="copyright"> <address>서울특별시 중앙로 223 2F JUST 쇼핑몰</address> COPYRIGHT BY TBBROTHER. ALL RIGHT RESERVED. </div> <ul class="sns_wrap"> <li><a href="#none">Twitter</a></li> <li><a href="#none">Facebook</a></li> <li><a href="#none">instagram</a></li> </ul> </footer> </body> </html>
|
'STUDY > 자격증' 카테고리의 다른 글
| JUST 쇼핑몰 문제풀이 4. 슬라이더/ 탭메뉴/ 배너/ 바로가기 (2019 웹디자인 기능사 실기 공개문제) (0) | 2019.03.28 |
|---|---|
| JUST 쇼핑몰 문제풀이 3. Header (2019 웹디자인 기능사 실기 공개문제) (0) | 2019.03.19 |
| JUST 쇼핑몰 문제풀이 2. 포토샵 웹용 이미지 만들기 (2019 웹디자인 기능사 실기 공개문제) (3) | 2019.03.14 |
| 웹디자인 기능사 실기 벼락치기2. 사진 슬라이드 (0) | 2019.03.06 |
| 웹디자인 기능사 실기 벼락치기 요점정리 (2) | 2019.03.05 |
| DB SQL 조작어 DCL, 뷰 (정보처리기사 / 산업기사 실기) (0) | 2018.10.06 |