웹디자인 기능사 실기 시험을 오늘(21년 9월 1일) 보고 왔습니다!
저는 6월 29일 웹디자이너 기능사 필기시험을 치르고 85점으로 합격 후에 실기 공부를
시작하였어요. 필기도 웹사이트와 유튜브를 참고하였고, 실기는 html/css를 전혀 모르는
상태였는데 저는 책도 안사고 학원도 안 다니고 오로지 유튜브와 관련 사이트로 공부하였어요.
제가 참고한 곳은 아래 링크로 남겨드릴게요!
치열한 실기 시험 접수: 머뭇거리다 원하는 장소 예약에 실패했어요.
듣던대로 실기 시험 예약은 치열했어요. 큐넷에 10시 땡 시작된 원서 접수는 사이트에
입성하는 데에도 몇 분이 소요되었고, 미련하게도 날짜를 고민하는 만행을 저지르다
2분 정도 가량이 흘러 저희 집에서 15분 거리인 휘경동에 있는 서울국가자격시험장은
모두 마감이 되었더라고요.
결국 1시간 30분가량 떨어진 구파발역에 있는 서울 서부 국가자격시험장으로 예약하게 되었답니다.
시험이 오전 8시 반부터 시작이라 6시에 기상!
가져갈 것은 신분증 반드시 필요하고, 까만 볼펜 정도가 되겠네요.
모든 것을 컴퓨터로 치르고 나오는 것이라 준비물은 많이 필요 없어요.
9시에 시험 시작! 출제 문제는 '유진건설'
시험지는 종이로 나눠주는 방식이고, 받자마자 문제에 적힌 텍스트를 메모장에 옮겨 적었지요.
저는 브라켓 Brackets을 이용하여 연습했고, 플러그인 Emmet이 깔려있을까 두근두근 거리는 마음으로 열어봤는데,
짠! 저는 깔려있었습니다. 시험장마다 다르지만 다른 글에서도 Emmet 플러그인은 깔려있다고 들어서 있겠지 싶었는데 딱 emmet 하나만 깔려있었어요.
그리고 제발 탭 메뉴, 세로메뉴 안나오길 기도하며 열어봤는데, 그래도 익숙한 가로메뉴에 탭메뉴 아닌
풀어보았던 '유진건설' 이 나왔네요! 안도의 한숨을 쉬었습니다.
아래는 실제 오늘 받은 시험지예요. 이건 공개 문제라서 가져가도 된다고 하더라고요.
제가 제일 헷갈렸던 공지사항과 갤러리가 붙어있는 탭 메뉴가 안 나와서 그나마 안도의 숨을 쉬고 문제를 풀었어요.
화장실은 미리 가도 되지만 4시간이라는 다소 긴 시험일정이라 중간중간 다녀올 수 있도록 돼있습니다.
두번째로 걱정되었던 슬라이드는 페이드인 페이드 아웃으로 나왔고, 제이쿼리를 이용해서 구동했어요.
9시에 시작해서 저는 10시 40분쯤 손을 들고 간단하게 인터넷 익스플로러와 크롬에서 구동되는지 확인받고 나왔어요.
근데 나서 바로 생각난 것이 <img src="" alt="">를 적을 때 저 alt=""를 몇 군데 안 쓴 게 생각나더라고요!!!!!
미리 좀 생각나면 좋을 텐데 제출하자마자 생각나는 건 뭘까요?
alt는 반드시 적어야 하는데, 감점이 되던지 불합격하던지 둘 중이겠죠?ㅠ 시험 결과는 9월 17일 포스팅해드릴게요.
연습했을때 적은 유진건설 HTML/ CSS/ jquery
텍스트는 임의로 제가 넣은것이고요, 구조는 동일해요. 초보 수준이라 문제가 적지는 않을듯하지만 구현은 된답니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>유진건설</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<script src="script/jquery-1.12.3.js"></script>
<script src="script/custom.js"></script>
</head>
<body>
<div class="modal">
<div class="modalname">공지사항</div>
<p>
공지사항 내용은 어디에 넣어야할까..
공지사항 내용은 어디에 넣어야할까..
공지사항 내용은 어디에 넣어야할까..
공지사항 내용은 어디에 넣어야할까..</p>
<button>x</button>
</div>
<div class="wrap">
<header>
<div class="logo">
<h1><a href="#"><img src="img/logo.png" alt="로고이미지"> </a></h1> </div>
<div class="nav_bg"></div>
<nav>
<ul class="menu clearfix">
<li><a href="#">회사소개</a>
<ul class="submenu">
<li><a href="#">인사말</a></li>
<li><a href="#">조직구성도</a></li>
<li><a href="#">오시는길</a> </li>
</ul>
</li>
<li> <a href="#">사업영역 </a>
<ul class="submenu">
<li><a href="#">전원주택</a></li>
<li><a href="#">도시재생</a></li>
<li><a href="#">인테리어</a></li>
</ul>
</li>
<li><a href="#"> 입주정보 </a>
<ul class="submenu">
<li><a href="#">입주단지</a></li>
<li><a href="#">입주캘린더</a></li>
</ul>
</li>
<li><a href="#"> 고객센터 </a>
<ul class="submenu">
<li><a href="#">공지사항</a></li>
<li><a href="#">건축상담</a></li>
<li><a href="#">홍보자료실</a> </li>
</ul>
</li>
</ul>
</nav>
</header>
<section class="slide">
<ul class="slidelist">
<li><h2> 슬라이드 이미지1</h2> <a href="#"> <img src="img/slide1.jpg" alt="슬라이드 이미지1"> </a></li>
<li><h2> 슬라이드 이미지2</h2> <a href="#"> <img src="img/slide2.jpg" alt="슬라이드 이미지1"> </a></li>
<li><h2> 슬라이드 이미지3</h2> <a href="#"> <img src="img/slide3.jpg" alt="슬라이드 이미지1"> </a></li>
</ul>
</section>
<section class="contents">
<div class="notice">
<h3>공지사항</h3>
<ul>
<li><a href="#">공지사항 첫번째</a> <span class="day"> 2021-08-05</span> </li>
<li><a href="#">공지사항 2번째</a> <span class="day"> 2021-08-05</span></li>
<li><a href="#">공지사항 3번째</a> <span class="day"> 2021-08-05</span></li>
<li><a href="#">공지사항 4번째</a> <span class="day"> 2021-08-05</span></li>
</ul>
</div>
<div class="gal">
<h3>갤러리</h3>
<ul class="gal_list">
<li><a href="#"><img src="img/gal1.jpg" alt="갤러리 이미지1"></a> </li>
<li><a href="#"><img src="img/gal2.jpg" alt="갤러리 이미지2"></a> </li>
<li><a href="#"><img src="img/gal3.jpg" alt="갤러리 이미지3"></a> </li>
</ul>
</div>
<div class="banner">
<h3>배너</h3> <a href="#"><img src="img/banner.jpg" alt="배너 이미지"></a>
</div>
</section>
<footer>
<section class="bottom_menu">
<ul>
<li><a href="#">바로가기</a></li>
<li><a href="#">하단1</a></li>
<li><a href="#">메뉴22</a></li>
</ul>
</section>
<section class="copyright">
<ul>
<li>상호명:(주)아이엔에스컴퍼주사장</li>
<li>E-mail : master@comeins.com</li>
<li>소사장>사업장주소:인천광역시 중구 개항로 49(내동,INS 6층)</li>
<li> (주)아이엔에스컴퍼니</li>
<li>사업자번호:228-81-03754</li>
<li> 전화번호 0202-2993-292</li>
</ul>
</section>
<section class="family">
<select class="famlist">
<option id="fam01">패밀리사이트 </option>
<option id="fam02">네이버</option>
<option id="fam03">다음 </option>
<option id="fam04">티스토리 </option>
</select>
</section>
</footer>
</div>
</body>
</html>
CSS
*{margin: 0; padding:0;}
.wrap{width: 1200px; margin: 0 auto; }
ul{list-style: none;}
a{text-decoration: none; color: inherit;}
body{color:#333333; background:#f2f2f2;}
header{width:100%; height:100px; background:#ff5050; position:relative; z-index: 100;}
.nav_bg{position: absolute; top:100px; width:100%; height:120px; background: #30a3f3; display:none;}
.logo{float:left; padding-top: 30px;}
nav{float:right; width:600px;padding-top: 70px;}
nav>ul{width:100%; text-align: center;}
nav>ul>li{ height: 30px; line-height: 30px; width:25%; position:relative; float:left; box-sizing: border-box;}
.menu li:hover{background:white;}
.submenu{width: 100%; position:absolute; top:40px; display: none;}
.submenu li:hover{background: black;}
.modal{position: fixed; z-index: 100; display:none; width: 500px; height:500px; background: #ff5050; left:35%; top:12%;}
.modal button{width:40px; height:40px; font-size: 20px; font-weight: bold; margin-left: 45%; margin-top: 380px; position: absolute;}
.modal p{position: absolute; top:40%; margin:5%;}
.modalname{position: absolute; font-size: 28px; font-weight: bold; text-align: center; margin-top: 30px; left:40%;}
.slide{width: 100%; height:300px; position: relative;}
.slide>ul>li{width: 100%; position: absolute;}
.slide h2{ font-size: 16px; width:180px; background:rgba(255,255,255,0.2);
height:50px; line-height: 50px; text-align: center; border-radius: 20px; position:absolute; top:40%; left:40%;}
.contents{width:100%; height:200px; background:#5b9bd5; }
.contents div{float:left;}
.notice{width:500px; padding-top: 10px; padding-left: 30px; box-sizing: border-box;}
.notice h3{width:200px; background:#ffc000; border-radius: 12px; text-align: center;}
.notice ul{ height:30px; line-height: 30px; padding-top: 10px; padding-left: 30px;}
.notice ul li:hover{opacity: 0.7;}
.day{font-size: 10px; padding-left:100px;}
.gal{width:400px;padding-top: 10px;}
.gal h3{width:200px; background:#ffc000; border-radius: 12px; text-align: center;}
.gal img{width:110px; height:110px; margin: 10px; float:left;}
.gal li:hover{opacity: 0.3;}
.banner{width:300px; overflow: hidden;position: relative;}
.banner h3{position: absolute; left:45%; top:40%; background:#5b9bd5; padding:10px; border-radius: 16px;}
.banner img{width:300px; height:200px;}
footer{width:100%; height:100px;background:#ff5050; position: relative;}
footer section{float:left;}
.bottom_menu{width:900px; height:50px; padding: 15px; box-sizing: border-box;}
.bottom_menu li{float:left; margin-left: 200px; font-size: 14px; font-weight: bold;}
.copyright{width:900px; height:50px; padding:10px; box-sizing: border-box;}
.copyright li{ float:left;font-size: 10px; margin-left: 10px;}
.family{position: absolute; top:30px; left:950px;}
.famlist{width: 200px; }
jquery
$(document).ready(function(){
$(".menu>li").mouseover(function(){
$(".nav_bg, .submenu").stop().slideDown();
});
$(".menu>li").mouseout(function(){
$(".nav_bg, .submenu").stop().slideUp();
});
var slideI=0;
setInterval(function(){
if(slideI < 2) {slideI++;} else {slideI = 0;}
$(".slide>ul>li").eq(slideI).siblings().animate({"top": "-300px"},300);
$(".slide>ul>li").eq(slideI).animate({"top": "0"},300);
}, 3000);
$(".notice li").eq(0).click(function(){
$(".modal").show();
});
$(".modal button").click(function(){
$(".modal").hide();
});
});//ready end제가 참고했던 사이트와 강의
- 웹 디자인 기능사 실기 예제 사이트 - 유진건설 실제 예
- 감사하게 큰 도움이 된 유튜브 강의사이트
댓글