코딩웍스 웹디자인기능사 인강
1강 - 제이쿼리(jQuery) 시작하기(폴더구조, 링크방법)
제이쿼리 링크하는 방법
1. body 안에 직접 링크 (계층구조가 줄어듦 - 시험때 추천)
2. head 안에 링크 (function 안에 제이쿼리 작성해줘야함)
jquery-1.12.4.js = 오픈소스 파일(우리가 수정하는게 아니다 - 집에서 셀프로 하려면 다운 받는 등 다양한 방법이 있다.)
custom.js (우리가 수정하는 파일)
=> 두가지 파일을 script 폴더를 생성하여 넣어놓기!!!
☆ jquery-1.12.4.js (제이쿼리 오픈소스파일(시험때 제공)) 이 우리가 만드는 custom.js 보다 먼저 나와야한다!!!!
★ 순서 틀리면 실행되지 않음 ★
기본 폴더 구조
* css 폴더
-- style.css
* images 폴더
-- 우리가 포토샵에서 제작한 이미지 들어감
* script 폴더
-- custom.js
-- jquery-1.12.4.js (윈도우 탐색기에서 jquery 오픈소스 파일을
찾아서 복사-붙여넣기 해줘야함)
* index.html
기본 HTML 구조
<!DOCTYPE html>
<html lang = "ko">
<head>
<meta charset ="UTF-8">
<title>웹디실기</title>
<link rel ="stylesheet" href="css/style.css">
</head>
<body>
여기서부터 HTML내용입니다.
<script src="script/jquery-1.12.4.js"></script>
<script src="script/custom.js"></script>
</body>
</html>
2강 - 제이쿼리 필수 핵심이론(기본 구문 만들기, 선택자)
$('선택자').함수(function(){
실행구문;
})
* 선택자 = css에서의 선택자 같은 느낌
* 함수 = 마우스를 올릴지/누를지 등의 이벤트를 지칭한다고 생각하면
쉽다.
* 실행구문 = 함수를 실행하면 작동될 동작
** body 태그가 끝나는 부분에 제이쿼리, js 링크하기.
*** 순서에 주의
제이쿼리 필수 핵심이론 - 기본 구문 만들기
$('선택자').함수(function(){
$('선택자').메서드();
});
*** ex>
$('.btn').click(function(){
$('.modal').fadeIn();
});
** 제이쿼리 함수와 메서드 종류는 많지만 기재한 함수와 메서드로 웹디자인기능사 실기시험 모든 모듈을 충분히 구현할 수 있습니다.
선택자 종류
- CSS 클래스 선택자
- CSS 아이디 선택자
- CSS 태그 선택자
- this
필수 함수 종류
- click
- mouseenter
- mouseleave
필수 메서드 종류
- slideDown()
- slideUp()
- stop()
- show()
- hide()
- fadeIn()
- fadeout()
- addClass()
- removeClass()
- children()
- siblings()
* 제이쿼리 메서드는 단어가 2개 이상 붙어서 사용되면 2번째 단어 첫글자는 꼭!! 대문자로 표시
3강 - 제이쿼리(jQuery) 필수 핵심이론(함수)
$('.hide_btn').click(function(){
$('div').hide();
});
** a링크 안에 아무것도 없으면 제이쿼리가 작동하지 않습니다!!!
** 시험에서 레이어팝업(모달창) 띄울때는 click, 네비게이션 만들때는 mouseenter, mouseleave
4강 - 제이쿼리 필수 핵심이론(메서드)
$('선택자').함수(function(){
$('선택요소').메서드();
});
■ 메서드(이펙트)
- .show()
- .hide()
- .slideDown()
- .slideUp()
- .fadeIn()
- .fadeOut()
- .stop()
■ 메서드(클래스 제어)
- .addClass()
- .removeClass()
-. toggleClass()
■ 메서드(요소 탐색)
- .children()
- .parent()
- .siblings()
- .find()
- .next()
- .prev()
5강 - 제이쿼리(jQuery) 필수 핵심이론(효과 메서드 - slideDown, slideUp, fadeIn, fadeout)
보이기 감추기(show, hide) 효과
| 메서드 | 설명 |
| .show() | 선택요소 보이기 |
| .hide() | 선택요소 감추기 |
| .toggle() | 선택요소 보이기/감추기 |
| .slideDown() | 선택요소 서서히 보이기 |
| .slideUp() | 선택요소 서서히 감추기 |
| .slideToggle() | 선택요소 서서히 보이기/감추기 |
** toggle(의미) = 버튼 하나가 두 가지 기능을 하는 것
페이드(fade) 효과
| 메서드 | 설명 |
| .fadeIn() | 선택요소를 페이드로 나타나게 하는 효과 |
| .fadeOut() | 선택요소를 페이드로 사라지게 하는 효과 |
| .fadeToggle() | 선택요소를 페이드로 사라지고 나타나게 토글(toggle) |
** fadeIn(지속시간) , fadeOut(지속시간) ※ 지속시간을 넣지 않으면 기본값이 적용됩니다.
* 지속시간 넣는 두 가지 방법
- 단어 : fast / slow (ex> fadeIn('fast'), fadeOut('slow'))
★ 주의점: (괄호) 안에 속도를 단어로 넣을 땐 반드시 ' ' 안에 넣기!!
- 숫자 : (ex> fadeIn(500), fadeOut(2000))
★ 주의점: (괄호) 안에 속도를 숫자로 넣을 땐 반드시 ' ' 없이 넣기!!
6강 - 제이쿼리(jQuery) 필수 핵심이론(클래스 제어 메서드 - addClass, removeClass)
클래스(class) 넣기 빼기
| 메서드 | 설명 |
| .addClass() | 선택요소에 클래스 넣기 |
| .removeClass() | 선택요소에 클래스 빼기 |
| .toggleClass() | 선택요소에 클래스 넣고 빼기(toggle) |
** 넣고 빼는데 쓰일 선택자(active) 작성할 때 앞에 경로 적고 그 경로 뒤에 바로 .active 붙여서(띄어쓰기 금지) 적어주기
*** 클래스 제어 메서드 3가지의 괄호 안에 ' . ' 와 함께 클래스명을 쓰면 안됨!!!
7강 - 제이쿼리(jQuery) 필수 핵심이론(요소탐색 메서드 - children, siblings)
$('선택자').함수(function(){
$('선택요소').메서드();
})
탐색 메서드의 기준점은 function 내부의 선택요소 부터 시작함!
요소 탐색
| 메서드 | 설명 |
| .children() | 선택요소의 바로 아래 단계인 자식요소만 선택 |
| .siblings() | 선택요소의 형제요소 선택 |
* .children() = 슬라이드 메뉴 만들때 많이 사용
* .siblings() = 공지사항/갤러리 선택된 걸 표시할 때 많이 사용
*** .stop() = 축적된 이벤트 큐 삭제해줌!
[최종본 제작 유의사항] 수험자 세부 지시사항에서 갤러리 이미지 투명도 변화시키기
** 갤러리 이미지의 투명도(Opacity)에 변화를 주어야 하는 공개도면은 A4, B3, C3 입니다.
** 가상선택자 :hover 사용해서 해결 (+ 옵션으로 transition 사용하면 더 좋음)
[최종본 제작 유의사항] 상단 네비게이션의 서브메뉴가 슬라이드 아래로 숨는 문제 해결하기
* 네비에 메인 부분이 밀리는 이유 : 네비가 속한 header 부분에 height 값을 주지 않았기 때문임.
-> 높이값을 주면 밀리지 않는다.
* 서브메뉴가 슬라이드 아래로 숨는 이유 : 슬라이드에 position 속성이 있기 때문(position 속성이 있는 태그가 다 위로 올라오게 되는 성질이 있다.)
-> 슬라이드에 z-index:-1 을 줘서 해결하면 안된다(그렇게 하면 슬라이드 클릭이 안됨 - a태그 마우스 이벤트가 사라진다)
일단 header에 position relative 를 주고(슬라이드와 같은 상황으로 만듦), z-index:10 을 주어 해결한다. (z-index 기본값 = 0)
공개문제 수험자 지시사항 주요항목 체크(A타입~C타입 공통)
* 5MB 용량이 초과되지 않게 하기 - 초과될 수가 없다!! (걱정 ㄴㄴ)
* HTML5 기준 웹 표준을 준수
* 메인페이지를 디자인하고 HTML, CSS, JavaScript 기반의 웹 페이지를 제작한다. (jQuery 오픈소스, 이미지, 텍스트 등 제공된 리소스를 활용하여 제작할 수 있다.)
* HTML, CSS의 charset는 utf-8로 해야한다.
* 컬러 가이드 : 배경색, 기본 텍스트의 색은 적힌대로 따르면 되고 주조색과 보조색이 나와있다면 css 입힐 때 사용하면 된다.
[세부 영역별 지시사항 - 사이트맵]
* 사이트 맵 : 표에 제공된 텍스트를 이용해 제작하기.
[와이어프레임 제작]
* 타입별로 최종본이 있다(참고)
[로고]
* 가로세로 200px*40px 포토샵에서 이 사이즈의 캔버스 열어서 제작하면 됨.
* 심벌 없이 로고명을 포함한 워드타입으로 디자인한다. - 텍스트형태의 로고를 제작하면 됨
[메뉴 구성]
* 사이트 구조도를 참고하여 메인 메뉴(main menu)와 서브 메뉴(sub menu)로 구성한다.
- 메인 메뉴(main menu) 효과 [와이어프레임 참조]
+ 메인 메뉴 중 하나에 마우스를 올리면(mouse over) 하이라이트 되고, 벗어나면(mouse out) 하이라이트를 해제한다. -> '하이라이트' 라는 의미는 :hover 가상클래스로 '마우스 올렸을 때 디자인을 변경한다' 입니다.
+ 메인 메뉴를 마우스로 올리면(mouse over) 서브 메뉴 영역이 부드럽게 나타나면서, 서브 메뉴가 보이도록 한다.
-> 마우스를 올렸을 때 서브 메뉴가 slideDown 되게 하라는 말.
- 서브 메뉴 영역 효과
+ 서브 메뉴 영역은 메인 페이지 콘텐츠를 고려하여 배경색상을 설정한다.
+ 서브 메뉴 중 하낭 마우스를 올리면(mouse over) 하이라이트 되고 벗어나면(mouse out) 하이라이트를 해제한다. (hover 하라는 말)
+ 마우스커서가 메뉴 영역을 벗어나면(mouse out) 서브메뉴 영역은 부드럽게 사라져야 한다. (메인메뉴 효과 마지막 항목과 겹치는 내용)
[슬라이드 이미지 제작]
* [Slide] 폴더에 제공된 3개의 이미지로 제작한다.
* [Slide] 폴더에 제공된 3개의 텍스트를 각 이미지에 적용하되, 텍스트의 글자체, 굵기, 색상, 크기를 적절하게 설정하여 가독성을 높이고, 독창성이 드러나도록 제작한다.
- 위에서 작업한 결과물을 이용하여 슬라이드 작업을 한다.
- 이미지만 바뀌면 안되고, 이미지가 위에서 아래 또는 아래에서 위로 이동하면서 전환되어야 한다.
(이 파란부분은 다 다를 수 있다!!! 문제 볼때 유의)
- 슬라이드는 매 3초 이내로 하나의 이미지에서 다른 이미지로 전환되어야 한다.
- 웹사이트를 열었을 때 자동으로 시작되어 반복적으로(마지막 이미지가 슬라이드 되면 다시 첫 번째 이미지가 슬라이드 되는 방식) 슬라이드 되어야한다.
[공지사항]
* 공지사항 타이틀 영역과 콘텐츠 영역을 구분하여 표현해야 한다.
* 콘텐츠는 Contents 폴더의 제공된 텍스트를 적용하여 제작한다.
* 공지사항의 첫 번째 콘텐츠를 클릭(Click)할 경우 레이어 팝업창(Layer Pop_up)이 나타나며 닫기 버튼을 누르면 해당 팝업창이 닫혀야한다.
[와이어프레임 참조]
* 레이어 팝업의 제목과 내용은 Contents 폴더의 제공된 텍스트 파일을 사용한다.
[갤러리]
* Contents 폴더의 제공된 이미지 3개를 사용하여 가로방향으로 배치한다.
[와이어프레임 참조 = 탭 메뉴 제작에만 해당됨(탭메뉴 없으면 무시해도 무방).]
* 공지사항과 갤러리는 탭 기능을 이용하여 제작하여야 한다.
* 각 탭을 클릭(Click) 시 해당 탭에 대한 내용이 보여야 한다.
[와이어프레임 참조 - 배너]
* Contents 폴더의 제공된 파일을 활용하여 편집 또는 디자인하여 제작한다.
[바로가기]
* Contents 폴더의 제공된 파일을 활용하여 편집 또는 디자인하여 제작한다.
[푸터]
* (로고가 있는타입/없는타입 두가지이다 - 없으면 이 항목은 따르지 않아도 된다.) 로고를 grayscale(무채색)으로 변경하고(무채색 로고 이미지 파일도 하나 제작하여야 한다는 말) 사용자의 접근성을 고려하여 배치한다.
* Footer 폴더의 제공된 텍스트를 사용하여 Copyright, SNS(3개)를 제작한다.
[기술적 준수 사항]
* css, js 코드는 파일을 따로하여 작성
* 상호작용이 필요한 모든 콘텐츠(로고, 메뉴, Slide, 공지사항, 갤러리 등)는 임시링크(예:#)되어야 하며 'Tab' 키로 이동할 수 있어야 한다. (결론적으로 말하면 이미지를 넣으면 모든 이미지 태그를 a 태그로 감싸라는 말!!)
* 모든 이미지에는 이미지에 대한 대체 텍스트를 표현할 수 있는 alt 속성이 있어야 한다.
* Internet explorer 10↑, Chrome 최신 버전에도 동일하게 표시되어야 함
[제출방법]
* 주의점: ai, psd 파일이 폴더에 포함되지 않게 주의한다(용량초과 위험).
CSS로 HTML 요소 가로 배치하기(float, overflow, clear, inline-block)
* float 속성은 요소가 부모요소 기준으로 왼쪽 또는 오른쪽에 배치할지 지정합니다.
* margin: auto - 인라인, 인라인 블록 요소는 적용 X (블록 요소만 적용됨)
* float 속성이 적용되면 다음 요소가 float 속성을 상속받는데 이것을 해제 시킨다.
| float: none | |
| float: left | float: right |
| clear: both | |
clear: left | right | both
* left: 왼쪽으로 배치된 float 속성 상속을 해지
* right: 오른쪽으로 배치된 float 속성 상속을 해지
* both: 왼쪽 또는 오른쪽으로 배치된 모든 float 속성 상속을 해지
가로배치 2가지 방법
1. float와 overflow를 사용해 배치 (1px 도 오차 없이 하고 싶을 때 적합)
2. display: inline-block으로 배치 (약간의 오차도 상관없을 때 적합)
*** 인라인 요소를 중앙정렬하려면 인라인 요소의 부모태그에 text-align: center 를 주면 된다.
레이어 팝업(모달창) 제작 완벽분석
* 레이어 팝업창 == 모달창 == 모달 팝업창 (일반적으로 3가지 모두 같은 의미로 이해하기)
* 레이어 팝업창은 별도의 브라우저 탭이 뜨는 것이 아니라 HTML 안에 div 내용이 뜨는 것
* 레이어 팝업창은 12가지 타입 모두 있어야 하고 동일한 형태와 기능으로 만들어집니다.
- 1. HTML로 내용과 구조 만들기 / 2. CSS로 디자인 배치하기 / 3. 제이쿼리로 상호작용 하기
** 애니메이션으로 띄우라고 지사사항에는 없지만 제이쿼리 fadeIn과 fadeOut으로 레이어팝업창을 띄운다.(기본 제작은 show() hide()로 먼저 제작)
공지사항, 갤러리 탭으로 구성, 탭으로 구성 완벽분석
* 공지사항, 갤러리 탭 메뉴 제작유형은 2가지 타입 : 별도로 구성하기, 탭으로 구성하기
네비게이션 5가지 타입 완벽분석
1. 왼쪽 개별 네비게이션
2. 왼쪽 개별 우측고정 네비게이션
3. 상단 개별 네비게이션
4. 상단 메가메뉴 네비게이션
5. 상단 메가메뉴 네비게이션(배경 포함)
* 1번 만들 수 있으면 다 만들 수 있음
레이아웃 12가지 타입 완벽분석(가로 고정형, 가로 100%, 세로 2컬럼)
* 레이아웃 기본형 스타일 3가지 : 1) 가로 고정형 / 2) 가로 100% 형 / 3) 세로 2컬럼
+ 푸터 4타입 => 12가지
CSS 애니메이션 필수 핵심 이론(keyframes, animation)
* 이미지 슬라이드 유형 : 1) 왼 - 오 / 2) 위 - 아래 / 3) cross fade 애니메이션
*** 슬라이드 타입은 CSS로 제작하면 편함 ***
.slide{
animation : slider(애니메이션 이름) 10s(n초 동안) linear infinite;
}
@keyframes slider{
0% {left:0;}
28% {left:0;}
32% {left:-1000px;}
60% {left:-1000px;}
65% {left:-2000px;}
93% {left:-2000px;}
100% {left:0;}
}
레이어 팝업(모달) 제작하기 강좌
* 모든 구조의 맨 마지막(body 태그 닫는 부분의 바로 위)에 따로 HTML 코드 작성
* modal : height : 100vh (vh = 강제로 100%를 유지시킴) / position : absolute / display: none;
* modal-inner : 정렬 = top:50%; left:50%; transform:translate(-50%, -50%);
※ 총 정리
- 제이쿼리 암기해야하는 부분 : 네비게이션메뉴, 탭메뉴, 모달창
- 필수로 구현해야하는 부분 : 이미지 슬라이드(CSS)
- 포토샵으로 만들어야 하는 것 : 배너, 바로가기, 로고
댓글