★ 웹다지인기능사 실기 바로가기★
| 구분 | 사이트 | 비고 |
| [공개문제] 웹디자인기능사(2024년) | 바로가기 | Q-net > 자료실 > 공개문제 |
| 이미니강사님의 Youtube 동영상 강의 | 바로가기 | |
| 웹디자인 기능사 지시서 요점정리 | 바로가기 | |
| HTML 유효성 검사 | 바로가기 | |
| CSS 유효성 검사 | 바로가기 |
2024년 웹디자인 기능사 실기 시험을 준비하면서
위의 "웹디자인 기능사 지시서 요점정리" 게시글을 참고하여 2024년 공개문제 유형에 맞게 다시 정리 하였습니다.
시험을 같이 준비하시는 분들에게 도움이 되었으면 좋겠습니다.
2024년 웹디자인 기능사 실기 유형별 정리
실기 유형 2024년 웹디자인 기능사 실기 유형,1,2,3,4 1. 메뉴,1-1. 서브메뉴가 모두 필쳐지는 타입,A,A1 B,B1 C D E F 1-2. 서브메뉴가 모두 펼쳐지고, 별도 배경 영역이 있는 타입,A,A2,A4 B,B2,B4 C D E F,F3,F4 1-3
docs.google.com
위 정리한 문서 공유 드리며, 아래처럼 필터를 적용 하시면, 내가 작업하는 유형을 쉽게 확인 할 수 있습니다.
(사용을 위해서는 반드시 '파일 -> 사본만들기'가 필요 합니다)
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
아래는 제가 공부하면서 정리한 내용입니다.... 정리가 안되어 있으니.. 참고만 해주세요
시험내용 : 화면설계 와이어프레임을 기준으로 퍼블리싱 작업
1) HTML
index.html 파일 생성 후 Visual Studio Code로 작업 시 자동완성 기능으로 쉽게 작성 가능(기본 기능)
"!" 또는 "HTML:5" 입력 후 탭(Tab) 키 누르면 기본 html 셋 생성됨.
<!DOCTYPE html>
<html lang="ko"> <!-- ko로 변경 -->
<head>
<meta charset="UTF-8"> <!-- 다.요구사항 2) HTML, CSS의 charset는 utf-8로 해야 한다. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css"> <!-- css 연결 -->
<script src="./js/jquery-3.7.1.js"></script> <!-- jQuery 라이브러리 연결 -->
<script src="./js/script.js"></script> <!-- script 연결 -->
<title>Hello World!!!</title> <!-- 과제명 -->
</head>
<body>
Hello World!!!
</body>
</html>2) CSS
@charset "utf-8"; /* 다.요구사항 2) HTML, CSS의 charset는 utf-8로 해야 한다. */
/* css 기본속성 초기화 */
*{margin: 0; padding: 0; box-sizing: border-box;}
li{list-style: none;}
a{text-decoration: none; color:inherit}
img{max-width: 100%; vertical-align: top;}
table{width:100%; border-collapse: collapse;}
button{cursor: pointer;}
/* 다.요구사항 3) 컬러가이드
배경색(Background color) : #ffffff
기본 텍스트의 색(Text color) : #333333
*/
body{background: #fff; color:#333;}
/* 블럭요소를 가운데 정렬하는 방법 : width값 반드시 넣고 margin:auto */
/* 브라우저 전체 영역 적용시 vh, vw 속성 등 참고 */
.wrap{height: 100vh;min-width: 1200px;min-height: 900px}
.top{height: calc(100% - 120px); display: flex; }
/* 태그를 공중에 띄어야 하는 경우
태그를 공중에 띄어주고 싶을 때 : position:absolute
position:absolute는 기준(position:relative)를 부모 or 조상에게 잡아줘야 한다.
위치(top/left)를 잡는다 필요시 width 넣어준다
*/
header{height: 100px; background: #ceb398; padding-top: 35px; padding-left:10px; position: relative;}
header .nav{position: absolute; top:40px; right:0; width:100%; z-index:10}
/* 전체화면에서 width를 구하는 경우 */
.sub{position: absolute;top: 0;left: 160px;width: calc(100vw - 200px);z-index: 10;display: none;background: rgba(0,0,0,.5);}
/* 슬라이드 3장이 전체화면 가득 찬 경우
position: absolute 및 width 값 %로 계산
*/
.slide{height: 350px; background: #369; position: relative; overflow: hidden;}
.slide ul{display: flex; width: 300%; position: absolute; top: 0; left: 0; height: 100%;}
.slide ul li{width: calc(100% / 3); height: 100%;}
/* 백그라운드 이미지 */
.slide ul li.s1{background:url(../img/s1.jpg) no-repeat center/cover;}
/* 텍스트 그림자 속성 */
.slide ul li h2{color: #fff; text-shadow: 2px 2px 2px rgba(0,0,0,.8); text-align: center; font-size: 35px; padding-top: 100px;}
/* 배너 구현 시 이미지를 a태그 백그라운드로 지정 */
.banner a{display: block; height: 100%; background: url(../img/banner.jpg) center/cover; border-radius: 30px; text-align: center; overflow: hidden;}
/* 갤러리 마우스 Hover 시 투명도 */
.gall div ul li:hover{opacity: 0.7;}
/* 이미지 등록 시 가로세로 비율이 깨지지 않게 나오게 출력 및 수직 가운데 정렬 */
.link ul li img{width: 50px; height: 50px; object-fit: cover; vertical-align: middle;}
/* 이미지와 텍스트 사이 여백이 필요한 경우 margin-bottom 이나 margin-right 10px */
/* 텍스트 문자열이 넘치는 경우 숨김 및 말줄임 처리 */
.notice a{padding: 5px; display: block; width:250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
/* footer영역 youtube, facebook 바로가기 구현 */
.fsns li a{display: block; width: 30px; height: 30px; border-radius: 50%; text-align: center;}
.fsns li:nth-child(1) a{background: red;}
.fsns li:nth-child(2) a{background: #3f5b9a;}https://opentutorials.org/course/2418/13405
https://ofcourse.kr/css-course/cursor-%EC%86%8D%EC%84%B1
3) Script(Javascript + jQuery)
$(function(){
/* 슬라이드 유형별 정리 */
/*
1. 슬라이드 구현시 position: absolute 공중에 띄어서 구현
- 상하,좌우,반전(fade in/out) 동일
2. 슬라이드가 가로형인 경우 display: flex로 정렬
*/
//슬라이드(좌우)1
var i = 0;
function slide(){
if(i<2){
i++;
}else{
i = 0
}
$(".slide ul").animate({left:i * 1200 * (-1)},1000) //width:1200px
//$(".slide ul").animate({left:i * -800},1000) //width:800px
//$('.slide ul').animate({left:-100 * i + "%"},1000) //width:100%, 숫자 뒤에 "%" 문자열 붙여주어야함.
}
//슬라이드(좌우)2 - width:1200px
function slide(){
$(".slide ul").animate({left:"-1200px"},1000,function(){
$(".slide ul").append($(".slide ul li").first());
$(".slide ul").css({left:0})
})
}
//슬라이드(좌우) - 전체화면 width:100%
function slide(){
$(".slide ul").animate({left:"-100%"},1000, function(){
$(".slide ul").append($(".slide ul li").first());
$(".slide ul").css({left:"0"});
})
}
//슬라이드(상하) - height:300px
function slide(){
$(".slide ul").animate({top:"-300px"},1000, function(){
$(".slide ul").append($(".slide ul li").first())
$(".slide ul").css({top:0})
})
}
//슬라이드(fade In/Out)
var i = 0;
function slide(){
if(i<2) {
i++;
} else {
i=0;
}
$(".slide ul li").fadeOut();
$(".slide ul li").eq(i).fadeIn();
}
setInterval(slide, 3000); //슬라이드 함수를 간격을 두고 반복 호출
/* 탭 메뉴는 HTML코드구조와 구현방향을 미리 정해서 작업해야 함 */
//탭메뉴1
$(".tabmenu>li").click(function(){
$(".tabmenu>li").removeClass("on");
$(this).addClass("on")
var i = $(this).index();
if(i == 1){
$(".gallery").css({display:"flex"});
} else {
$(".gallery").css({display:"none"});
}
return false;
})
//탭메뉴2
$(".tabmenu>li").click(function(){
$(".tabmenu>li").removeClass('on')
$(this).addClass('on');
var i = $(this).index()
console.log(i);
$(".tabcon").hide()
$(".tabcon").eq(i).show()
return false;
})
//탭메뉴3
var i;
$(".tabmenu>li").click(function(){
$(".tabmenu>li").removeClass("on")
$(this).addClass("on")
i = $(this).index();
console.log(i);
$(".tabcon").hide()
$(".tabcon").eq(i).show();
})
//탭메뉴4
$(".tabmenu>li").click(function(){
$(".tabmenu>li").removeClass("on")
$(this).addClass("on")
var t = $(this).index();
console.log(t);
$(".tabcon").hide();
$(".tabcon").eq(t).show();
})
//메뉴
$("nav>ul>li").mouseenter(function(){
$(this).addClass("on");
$(".sub, .menubg").stop().slideDown();
})
$("nav>ul>li").mouseleave(function(){
$("nav>ul>li").removeClass("on");
$(".sub, .menubg").stop().slideUp();
})
/* 키보드 메뉴는 메뉴 상황에 따라 조금씩 수정 필요 */
//웹접근성 메뉴(키보드)
$("nav>ul>li>a").focusin(function(){
$(this).parent("li").addClass("on")
$(".sub, .menubg").stop().slideDown()
})
$("nav li:last-child a").focusout(function(){
$("nav>ul>li").removeClass("on");
})
$("nav li:last-child li:last-child").focusout(function(){
$(".sub, .menubg").stop().slideUp();
})
//팝업
$(".pp").click(function(){
$(".popup").show();
return false; //링크 차단
})
$(".close").click(function(){
$(".popup").hide();
})
})
'지식저장소 > 지식KIN' 카테고리의 다른 글
| 엑셀 URL 인코딩(encode) 및 디코딩(decode) 함수 excel function [VBA] (0) | 2022.07.07 |
|---|---|
| Synology VMM Android 설치하기 (0) | 2021.04.16 |
| ASUS 공유기 암호규칙(영문, 특수문자, 숫자 모두 사용) 우회하기 (0) | 2020.12.05 |
| 변신 68U 공유기 멀린펌 업글 불가 시 & AiMESH 활성화 (0) | 2020.01.02 |
| [정보] 모레가 한글날이기에 무료로 몇개 드립니다 (기간한정 다운로드) (0) | 2019.10.08 |
