728x90

웹디실기 7

JUST 쇼핑몰 문제풀이 6. JS, 제이쿼리 - 메뉴, 슬라이더 효과 (웹디자인 기능사 실기 공개문제)

HTML, CSS가 완성되었고 이제 자바스크립트 코드를 입력하여 효과만 주면 끝! 제이쿼리를 이용하기 위해서 위의 파일을 script 폴더에 붙여넣은 뒤 (시험장에서 제공해줌) 위의 코드를 index.html에 삽입하여 제이쿼리 파일과 연결해준다. 같은 방법으로 내가 작성하는 js파일도 연결시킨다. 이때 제이쿼리 파일이 먼저 위치해야한다. 메뉴 네비게이션 바 제이쿼리 코드 $('#header .nav > ul > li > ul').hide(); $('#header .nav > ul > li > a ').on('mouseenter', function(){ $(this).addClass('on') .next().stop().slideDown(); }); $('#header .nav > ul > li').on..

STUDY/자격증 2019.05.07

JUST 쇼핑몰 문제풀이 5. footer (2019 웹디자인 기능사 실기 공개문제)

이제 남은 footer의 스타일을 잡아준다. 푸터는 로고랑 주소가 그대로 입력되고, 아이콘 3개를 추가하여 간단하게 10분이내로 끝낼 수 있다. 구조짤때 미리 입력해둔 html을 보고 스타일을 입힌다. footer의 height는 100px으로 시험지에 명시되어 있기때문에 꼭 지정해준다. 그 이외는 내 마음대로 css를 꾸민다. 문득 드는생각인데 CSS에 자율성을 준다는것은 아무렇게나 해도 점수를 딸 수있다는 말은 아닌듯하다. 독창성 가독성 등을 고려하라고 애매하게 쓰여있지만, 시험 채점 기준이 명확하게 공개되어 있지 않고 채점과정 이의제기도 불가능한 상황에서는 최대한 성의를 보여야 조금이라도 채점관들의 가산점이라도 얻을 수 있지않을까 싶다. 서로다른 아이콘을 넣어주기 위해 클래스를 추가해준다. sns ..

STUDY/자격증 2019.03.30

JUST 쇼핑몰 문제풀이 4. 슬라이더/ 탭메뉴/ 배너/ 바로가기 (2019 웹디자인 기능사 실기 공개문제)

Header는 완료 되었고 이제 헤더 아래부분의 슬라이더의 CSS를 입력한다. 가로길이 1200px의 이미지 3장이 옆으로 스르륵 흘러가야 하기때문에 3600px의 슬라이더 창을 만들어 준다. 슬라이더가 완성되었고, 아래 컨텐츠 부분에는 크게 세부분으로 나뉘어 진다. 시각적으로 보여주기 위해 background-color를 임의로 주어봤다. 이렇게 CSS가 먹히고 있다. 나는 아래 컨텐츠 부분이 위 슬라이더랑 너무 딱 붙어있는것 같아서 나중에 MARGIN값을 주었다. 한 공간안에 탭 메뉴 형식으로 공지사항과 갤러리 두가지의 li 메뉴가 있다. li.notice , li.gallery로 구분하여 CSS를 사용 하고 notice 스타일을 잡을동안 gallery는 display:none; 을 임시로 걸어두었다..

STUDY/자격증 2019.03.28

JUST 쇼핑몰 문제풀이 3. Header (2019 웹디자인 기능사 실기 공개문제)

하루 1시간 공부가 이렇게나 지키기 힘들다.갖은 이유들로 인해 이미지 만들고 나의 열정은 파사삭 식어버렸지만이제 정말 몇 일 안남았으니 차근차근 해본다. html도, 이미지도 준비되었고 이제 CSS 옷을 입힌다. 시험지에서 명시하고 있는것은 전체 width 1200px와 각각 영역의 height 값이다.나는 body영역으로 전체를 싸준다고 생각하고 1200px의 width 고정값을 주고margin: 0 auto; 를 주어 브라우저 크기에 맞게 가운데 정렬을 한다. header에는 크게 로고부분과 메뉴부분 두가지로 나뉜다.로고부분 과 메뉴부분 을 float 속성을 주어 나란히 배치한다. 그리고 메뉴(.gnb_wrap) 내부의 1차메뉴 탑, 아우터, 팬츠, 액세서리도 나란히 배치하기 위해 float 속성을 ..

STUDY/자격증 2019.03.19

JUST 쇼핑몰 문제풀이 2. 포토샵 웹용 이미지 만들기 (2019 웹디자인 기능사 실기 공개문제)

공개문제를 풀려고하는데 문제지만 딸랑 있고 이미지를 제공해주지 않는다..^^;그냥 빈 이미지로 하려다가 한문제라도 제대로 풀어보자 싶어서지시사항을 따라서 만들어본다. 실제 시험장에서도 제공되는 이미지와 텍스트를 활용하여이미지를 만들어야된다고 하니 연습삼아 포토샵을 켠다. 로고, 슬라이더 부분의 이미지를 읽어보면 특별한 제약은 없고 자유롭게 만들면 되는듯 하다. 로고 만들기 가로 200px 세로 40px 의 상단에 쓰일 로고와조금 축소된 버전의 footer에 사용될 로고 두개가 필요하다. 심벌없이 로고명을 포함한 워드타입으로 디자인하라고 지시되어있다.대충 JUST 쇼핑몰 이라고만 적고 Ctrl+Alt+Shift+S 4개를 동시에 눌러 웹용이미지 저장을 한다. 제공된 이미지도 텍스트도 없이 무언갈 만드는게 ..

STUDY/자격증 2019.03.14

JUST 쇼핑몰 문제풀이 1. 요구사항 분석 및 HTML 구조짜기 (2019 웹디자인 기능사 실기 공개문제)

큐넷 웹디실기 공개문제 풀어보기 : 저스트쇼핑몰 우선 실기시험에 앞서 미리 필기구로 시험지에 중요한 부분을 체크해가며 요구사항을 숙지하는것이 중요하다. 요구사항 분석 잘 못 이해했다가 나중에 코드를 전부 수정해야하는 경우가 생길 수도 있으니 문제지 읽는 시간을 아까워하지말고 충분히 주어야한다. ↓요구사항 체크 문제지 파일↓ 요구사항을 보며 HTML 구조 먼저 짜기 HTML과 CSS를 동시에 진행하는것 보다 머릿속으로 어떻게 구조가 짜여질지 상상하면서 HTML코드를 우선 짜놓고 나중에 스타일을 입히는것이 속도면에서 더 빠르다. (수정할 일이 줄어든다.) 캐릭터셋을 utf-8로 설정하고 css에서 텍스트 색을 #222328로 기본지정을 하고 시작했다. css를 링크해준다. 시험장에서 제공하는 jquery 파..

STUDY/자격증 2019.03.13

웹디자인 기능사 실기 벼락치기2. 사진 슬라이드

↓새로운 공개문제 (JUST 쇼핑몰) 사진슬라이드 js코드 보기↓ 2019/05/07 - JUST 쇼핑몰 문제풀이 6. JS, 제이쿼리 - 메뉴, 슬라이더 효과 (웹디자인 기능사 실기 공개문제) $(function(){ var now = 1; var max = 3; var w = 960; var slide; //slideitem3을 맨 앞으로 위치 이동 처음 시작 $('#slide .container').prepend($('#slide .container .slideitem3')); slide = setInterval(function(){ $('#slide .container > div:nth-child(1)').animate({ 'margin-left':(w*(-1))+'px' },600,functio..

STUDY/자격증 2019.03.06
728x90