728x90
반응형
2023 웹디자인 기능사 실기 B-4 유형
- HTML : https://github.com/dongjin6539/web2023/blob/main/webd/site2/index.html
- CSS : https://github.com/dongjin6539/web2023/blob/main/webd/site2/css/style.css
- SCRIPT.JS : https://github.com/dongjin6539/web2023/blob/main/webd/site2/script/script.js
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>산업대학교</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="script/script.js"></script>
</head>
<body>
<div id="wrap">
<header id="header">
<div class="container on">
<h1 class="logo"><a href="#">산업대학교</a></h1>
<nav class="nav">
<ul>
<li><a href="#">대학소개</a>
<ul class="submenu">
<li><a href="#">총장인사말</a></li>
<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>
<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>
<li><a href="#">자료실</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<!-- header -->
<aside id="slider">
<div class="container">
<div class="slider__wrap">
<div class="slider s1">
<a href="#"><img src="images/slider02_01.jpg" alt="미래를 이끄는 열정"></a>
<div class="text">
<h2>미래를 이끄는 <span>열정</span></h2>
<p>산업대학교</p>
</div>
</div>
<div class="slider s2">
<a href="#"><img src="images/slider02_02.jpg" alt="당신이 원하는 교육"></a>
<div class="text">
<h2>당신이 원하는 <span>교육</span></h2>
<p>산업대학교</p>
</div>
</div>
<div class="slider s3">
<a href="#"><img src="images/slider02_03.jpg" alt="미래를 향한 우리의 도전"></a>
<div class="text">
<h2>미래를 향한 우리의 <span>도전</span></h2>
<p>산업대학교</p>
</div>
</div>
</div>
</div>
</aside>
<!-- slider -->
<main id="main">
<div class="container">
<div class="notice">
<h3><a href="#">공지사항</a></h3>
<ul>
<li><a href="#">2023년 신입생 모집중</a><span>2023.05.01</span></li>
<li><a href="#">융합전공 멘토링 및 튜터링 학생 모집</a><span>2023.05.01</span></li>
<li><a href="#">학과 및 학년별 참여줄 확인</a><span>2023.05.01</span></li>
<li><a href="#">2023년 미래 자동차 워크숍 안내</a><span>2023.05.01</span></li>
</ul>
</div>
<div class="gallery">
<h3><a href="#">갤러리</a></h3>
<ul>
<li><a href="#"><img src="images/gallery02_01.jpg" alt="강의실"></a></li>
<li><a href="#"><img src="images/gallery02_02.jpg" alt="휴계실"></a></li>
<li><a href="#"><img src="images/gallery02_03.jpg" alt="학교"></a></li>
</ul>
</div>
<div class="banner">
<h3>산업대학교<br>2023<br>체육대전</h3>
<a href="#">바로가기</a>
</div>
</div>
</main>
<!-- main -->
<footer id="footer">
<div class="container">
<div class="footer1">
<div class="footer1-1">
<ul>
<li><a href="#">개인정보처리방침</a></li>
<li><a href="#">정보 공개</a></li>
<li><a href="#">홈페이지 운영지침</a></li>
</ul>
</div>
<div class="footer1-2">
15073 경기도 안산시 산기대학로 237 (정왕동) 산업대학교 COPYRIGHT(C) ALL RIGHTS RESERVED.
</div>
</div>
<div class="footer2">
<select name="#" id="#">
<option>패밀리 사이트</option>
<option value="1">안양 산업대학교</option>
<option value="2">강원 산업대학교</option>
<option value="3">부산 산업대학교</option>
</select>
</div>
</div>
</footer>
<!-- footer -->
</div>
<!-- wrap -->
</body>
</html>- 웹 사이트 표준에 맞게 알맞는 태그를 사용하고 css 링크와 script 링크를 입력해서 이 html 코드에 적용되게 해줍니다.
CSS
@charset "UTF-8";
* {
margin: 0;
padding: 0;
color: #333;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #333;
}
img {
vertical-align: top;
}
#wrap {
width: 100%;
}
.container {
width: 1200px;
margin: 0 auto;
height: inherit;
}
/* header */
#header {
width: 100%;
height: 100px;
background-color: #FFE4B5;
position: relative;
z-index: 1000;
}
#header .container {
display: flex;
align-items: end;
position: relative;
}
#header .container.on::after {
content: '';
width: 100%;
height: 0;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0;
top: 100px;
z-index: -1;
transition: all 0.6s;
}
#header .container.on::after {
height: 190px;
}
#header .container .logo {
width: 20%;
padding: 25px 30px;
}
#header .container .nav {
width: 80%;
text-align: right;
}
#header .container .nav > ul {
display: flex;
justify-content: right;
}
#header .container .nav > ul > li {
position: relative;
}
#header .container .nav > ul > li > a {
display: block;
padding: 15px 40px;
font-size: 18px;
}
#header .container .nav > ul > li > ul {
position: absolute;
left: 0;
top: 52px;
text-align: center;
/* background-color: rgba(0, 0, 0, 0.5); */
width: 100%;
padding-top: 10px;
display: none;
}
#header .container .nav > ul > li > ul > li > a {
color: #fff;
padding: 10px;
display: inline-block;
box-sizing: border-box;
width: 100%;
}
#header .container .nav > ul > li > ul > li > a:hover {
background-color: #FFC04A;
}
/* slider */
#slider {
width: 100%;
height: 300px;
}
#slider .container {
overflow: hidden;
}
#slider .slider__wrap {
display: flex;
width: 400%;
}
#slider .slider__wrap .slider {
position: relative;
width: 100%;
}
#slider .slider__wrap .slider .text {
position: absolute;
left: 5%;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.3);
padding: 25px 100px 25px 25px;
}
#slider .slider__wrap .slider .text h2 {
color: #fff;
font-size: 24px;
}
#slider .slider__wrap .slider .text h2 span {
color: #FFA726;
}
#slider .slider__wrap .slider .text p {
color: #fff;
font-size: 16px;
}
/* main */
#main {
width: 100%;
height: 200px;
}
#main .container {
display: flex;
}
#main .container .notice {
width: 40%;
background-color: #FBE9CA;
padding: 20px;
}
#main .container .notice h3 {
font-size: 20px;
margin-bottom: 10px;
border-bottom: 2px solid #000;
padding: 0 0 5px 0;
}
#main .container .notice li {
display: flex;
line-height: 1.8;
position: relative;
padding-left: 14px;
}
#main .container .notice li::before {
content: '';
width: 5px;
height: 5px;
background-color: #333;
border-radius: 50%;
position: absolute;
left: 0;
top: 13px;
}
#main .container .notice li a {
width: 70%;
}
#main .container .notice li a:hover {
text-decoration: underline;
text-underline-position: under;
}
#main .container .notice li span {
width: 30%;
text-align: right;
}
#main .container .gallery {
width: 40%;
background-color: #FFDA9B;
padding: 20px;
}
#main .container .gallery h3 {
font-size: 20px;
margin-bottom: 10px;
border-bottom: 2px solid #000;
padding: 0 0 5px 0;
}
#main .container .gallery ul {
display: flex;
justify-content: space-between;
}
#main .container .banner {
width: 20%;
background-image: url(../images/banner02.jpg);
text-align: center;
position: relative;
z-index: 1;
}
#main .container .banner::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: #000;
opacity: 0.5;
z-index: -1;
}
#main .container .banner h3 {
margin-top: 40px;
font-size: 20px;
margin-bottom: 15px;
color: #fff;
}
#main .container .banner a {
background-color: #674918;
color: #fff;
padding: 10px 20px;
display: inline-block;
border-radius: 100px;
}
#main .container .banner a:hover {
background-color: #ca8f31;
}
/* footer */
#footer {
width: 100%;
height: 100px;
background-color: #C9B490;
}
#footer .container {
display: flex;
}
#footer .container .footer1 {
width: 80%;
}
#footer .container .footer1 .footer1-1 {
width: 100%;
height: 50px;
}
#footer .container .footer1 .footer1-1 li {
display: inline;
border-right: 1px solid #333;
}
#footer .container .footer1 .footer1-1 li:last-child {
border: 0;
}
#footer .container .footer1 .footer1-1 li a {
padding: 15px 10px 5px 0;
display: inline-block;
}
#footer .container .footer1 .footer1-2 {
width: 100%;
height: 50px;
padding-top: 10px;
box-sizing: border-box;
}
#footer .container .footer2 {
width: 20%;
}
#footer .container .footer2 select {
margin-top: 34px;
width: 100%;
height: 30px;
}- html 코드의 태그와 id명 class명을 가져와서 알맞는 스타일과 속성을 입력해줍니다.
SCRIPT
$(function(){
// 메뉴
$(".nav > ul > li").mouseover(function(){
$(".nav > ul > li > ul").stop().fadeIn(200);
$(this).css("text-decoration","underline");
$("#header .container").addClass("on");
$("#slider .slider__wrap .slider .text").stop().fadeOut(100);
})
$(".nav > ul > li").mouseout(function(){
$(".nav > ul > li > ul").stop().fadeOut(100);
$(this).css("text-decoration","none");
$("#header .container").removeClass("on");
$("#slider .slider__wrap .slider .text").stop().fadeIn(100);
})
// 슬라이드
let currentIndex = 0;
const $sliderWrap = $("#slider .slider__wrap"); // 이미지 부모 : 움직이는 영역
const $slider = $(".slider img"); // 각가의 이미지
const $sliderWidth = $slider.width(); // 이미지 가로값
$sliderWrap.append($slider.first().clone(true)); // 첫번째 이미지 복사 추가
setInterval(function(){
currentIndex++; // 현재 이미지를 1씩 증가
$sliderWrap.animate({marginLeft: -$sliderWidth * currentIndex}, 600);
if(currentIndex === $slider.length){
setTimeout(function(){
$sliderWrap.animate({marginLeft: 0}, 0);
currentIndex = 0;
}, 700);
}
}, 3000);
});- 이번 script는 jQuery를 사용해봤습니다.
- html 코드에서 script 링크를 상단 부분에 입력을 했기 때문에 script 처음 스타트를 $(function(){})으로 시작해줍니다. 그런 다음 { } 안에 script를 입력해줍니다.
- 먼저 메뉴에 마우스를 오버했을 때 submenu가 나타나고 마우스가 아웃되면 submenu가 사라지게 해줍니다.
- $( )으로 먼저 선택자를 가져오고 .mouseover 메서드를 사용하고 함수로 submenu 메뉴 부분을 가져와서 나타나게 하기 위해 fadeIn( )을 사용해줍니다. 그리고 menu 부분에 text-decoration를 주기 위해 css를 주고 .container 부분의 숨겨둔 배경을 가져오기 위해 addClass를 사용해서 가져오고 슬라이드 부분의 텍스트를 사라지게 해주기 위해 fadeOut( )를 사용해줍니다.
- 반대로 올라가게 하기 위해 .mouseout 메서드를 사용하고 함수로 submenu 메뉴 부분을 가져와서 사라지게 하기 위해 fadeOut( )을 사용해줍니다. 그리고 menu 부분에 text-decoration를 사라지게하기 위해 css를 주고 .container 부분의 숨겨둔 배경을 없애기 위해 removeClass를 사용해서 가져오고 슬라이드 부분의 텍스트를 나타나게 해주기 위해 fadeIn( )를 사용해줍니다.
- 슬라이드 부분의 이미지를 왼쪽으로 슬라이드 효과를 줄겁니다. 먼저 변수를 0으로 저장해줍니다. 이미지의 움직이는 영역을 가져오기 위해 영역의 부모를 선택자로 가져옵니다. 그리고 슬라이더의 이미지를 선택자로 가져옵니다. 그리고 이미지의 width값을 가져오기 위해 .width( ) 메서드를 사용해줍니다. 그리고 끊기지 않게 나타나게 하기 위해 첫번째 이미지를 복사해서 마지막 이미지 뒤에 붙여줄겁니다. 그러기 위해 append( ) 메서드를 사용해서 .first.clone(true)를 사용해줍니다.
- 시간을 3초 지나면 슬라이드 효과를 주기 위해 setInterval(function(){}, 3000) 함수를 사용해줍니다. 변수를 0으로 저장해준 것을 ++연산자를 사용해서 1씩 증가시켜줍니다. 이미지의 움직이는 영역을 .animate( ) 메서드를 사용해서 왼쪽으로 이미지의 가로값만큼 보내기 위해 marginLeft를 (-이미지의 가로값*변수) 만큼 보냅니다. 그리고 변수의 인덱스 값이 이미지의 갯수의 값과 같을 때 이미지의 움직이는 영역을 .animate( ) 메서드를 사용해서 marginLeft를 0으로 옮겨줍니다. 그리고 변수를 0으로 다시 되돌려줍니다.
728x90
반응형
