웹디자인기능사는 주어진 자료로 웹사이트를 만드는, 디자인보다는 웹코딩에 비중을 두고있는 자격증입니다.
필요한 능력
html, css, javascrit(또는 jQuery), 포토샵(또는 일러스트)-들어갈 사진 편집만 하면 되기에 하나만 가능해도 충분합니다
웹디자인 기능사 출제기준
http://www.q-net.or.kr/cst006.do?id=cst00602&gSite=Q&gId=&artlSeq=5202428&brdId=Q006&code=1202
웹디자인기능사 공개문제
http://www.q-net.or.kr/cst006.do?id=cst00602&gSite=Q&gId=&artlSeq=5199079&brdId=Q006&code=1204
자바스크립트(javascript)와 제이쿼리(jQuery) 차이점
제이쿼리는 자바스크립트를 편하게 쓸 수 있는 라이브러리입니다. 쉽게 말해
자바스크립트 = 문자
제이쿼리 = 카카오톡
*인터넷이용로는 상관없이 메세지를 주고받는 기능을 기준으로 설명합니다.
문자(자바스크립트)는 휴대폰을 사면 별도의 설치없이 사용할 수 있습니다. 하지만 카카오톡(제이쿼리)을 사용하려면 어플을 설치해야합니다. 하지만 둘 다 내 연락처에 있는 사람과 메세지를 주고받는 기능을 합니다.
자바스크립트는 그냥 사용할 수 있지만, 제이쿼리는 별도의 선언이 필요합니다.
웹디자인기능사 실기 시험장에서는 이 제이쿼리를 위한 파일을 제공합니다.
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<scripttype="text/javascript"src="./jquery/jquery-3.4.1.min.js">
첫 번째는 인터넷이 연결될 때 사용할 수 있습니다. 하지만 웹디자인기능사 실기 시험장에서는 인터넷 연결이 안되어있기때문에 두 번째 방법을 이용해야 합니다. 파일 이름은 다를 수 있지만 경로와 제공된 파일 이름을 적어야 합니다.
1. 기본 세팅
- 폴더만들기
css / img / js 폴더와 index.html 파일을 생성합니다.
index.html 파일은 폴더안에 넣지 않고 반드시 바깥에 생성합니다.
각 폴더 안에 main.css / main.js 를 생성하고 파일을 넣습니다.
css > main.css(css작업할 파일)
img > 이미지파일
js > main.js(js작업할 파일)
jquery-3.4.1.min.js (기본 제공파일)
- html 준비
html 기본세팅
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/main.css">
<title>웹디자인기능사</title>
</head>
<body>
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/main.js"></script>
</body>
</html>- css 준비
css기본세팅
reset.css 세팅 (모든 항목 세팅 초기화)
@charset "UTF-8";
html,body{width:100%; height:100%; font-family: sans-serif;background-color:#fff;}
/* 시험지 컬러가이드에 나와있는 배경색 */
*{margin:0; padding:0; border:0; outline:0; list-style:none;}
a{display:block; width:100%; height:100%; text-decoration:none;color:#222328}
p{color:#222328}
/* 시험지 컬러가이드에 나와있는 글자색 */
.hidden{display:none;}
header,article,section,nav,footer{display:block;}
*:focus{border:1px solid #f00; box-sizing:border-box;}
/* ===================== */- js준비
jQuert 대소문자 주의
과정-실수하지 않도록 과정에 맞게 작성합니다.
① ()();
- 가로 2개
② ()(jQuery);
- 두번째 가로 안에 jQuery 작성
③ (function($){})(jQuery);
- 첫번째에 function($){} 작성
(function($){
console.log('연결확인'); // console창에 '연결확인'문구가 뜨는지 확인 후 삭제
})(jQuery);console.log() 은 확인용이며
alert('연결확인'); 도 가능합니다.-팝업
console.log() 와 alert() 차이점
- console.log()
()안의 내용이 console 창에 나온다(개발자모드-F12를 통해 확인 가능).
글자를 표현할 경우 '' 또는 " "로 감싸야한다.
아이디,클래스, 태그 이름으로 어느 위치와 개수 확인 가능.
- alert()
()안의 내용이 팝업창으로 나온다.
새로고침하면 계속 나오므로 반복되는 확인시 성가실 수 있다.
위치 확인 불가능
'정보 > ect' 카테고리의 다른 글
| TIL 작성 규칙 (1) | 2021.10.28 |
|---|---|
| 텍스트 더미 생성 - 로렘 입숨, 한글 입숨 (lorem ipsum 한글) (6) | 2021.03.25 |
댓글