오늘은 웹디자인 실기 B-4 유형을 연습해봅시당!
B-4 pdf를 참고해주세여!
구조
<!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">
<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="silder">
<div class="container">
<div class="sliderWrap">
<div class="slider s1">
<img src="images/slider01.jpg" alt="">
<div class="text">
<h2>미래를 이끄는<span>열정</span></h2>
<p>산업대학교</p>
</div>
</div>
<div class="slider s2">
<img src="images/slider02.jpg" alt="">
<div class="text">
<h2>당신이 원하는<span>교육</span></h2>
<p>산업대학교</p>
</div>
</div>
<div class="slider s3">
<img src="images/slider03.jpg" alt="">
<div class="text">
<h2>미래를 향한 우리의<span>도전</span></h2>
<p>산업대학교</p>
</div>
</div>
</div>
</div>
</aside>
<!-- //silder -->
<main id="main">
<div class="container">
<section class="notice">
<h3>산업대학교 새로운 소식</h3>
<ul>
<li><a href="#">2023년 신입생 모집중</a><span>2023.05.12</span></li>
<li><a href="#">융합전공 멘토링 및 튜터링 학생 모집</a><span>2023.05.12</span></li>
<li><a href="#">학과 및 학년별 참여줄 확인</a><span>2023.05.12</span></li>
<li><a href="#">2023년 미래 자동차 워크숍 안내</a><span>2023.05.12</span></li>
</ul>
</section>
<!-- //notice -->
<section class="gallery">
<h3>우리 학교 풍경</h3>
<ul>
<li><a href="#"><img src="images/gallery01.jpg" alt="우리학교 마당"></a></li>
<li><a href="#"><img src="images/gallery02.jpg" alt="우리학교 도서관"></a></li>
<li><a href="#"><img src="images/gallery03.jpg" alt="우리학교 정문"></a></li>
</ul>
</section>
<!-- //gallery -->
<div class="banner">
<h3>산업대학교<br>2023<br>체육대전</h3>
<a href="#">바로가기</a>
</div>
<!-- //banner -->
</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
@charset "UTF-8";
* {
margin: 0;
padding: 0;
color: #333333;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
img {
vertical-align: top;
}
#wrap {
width: 100%;
}
/* container */
.container {
width: 1200px;
margin: 0 auto;
height: inherit;
}
/* header */
#header {
width: 100%;
height: 100px;
background-color: #ffe6e6;
position: relative;
z-index: 1000;
}
#header .container {
display: flex;
align-items: end;
position: relative;
}
#header .container::after {
content: '';
width: 100%;
height: 0px;
background-color: rgba(0, 0, 0, 0.8);
position: absolute;
left: 0;
top: 100px;
transition: all 400ms;
}
#header .container.on::after {
height: 164px;
}
#header .container .logo {
width: 20%;
padding: 30px 0;
}
#header .container .nav {
width: 80%;
text-align: right;
}
#header .container .nav > ul {
display: flex;
justify-content: right;
}
#header .container .nav > ul > li {
position: relative;
z-index: 1;
}
#header .container .nav > ul > li > a {
display: block;
padding: 15px 40px;
background-color: #ffc6d6;
}
#header .container .nav > ul > li > a:hover {
background-color: #eb99b0;
transition: all 0.3s;
}
#header .container .nav > ul > li > ul {
position: absolute;
left: 0;
width: 100%;
top: 51px;
text-align: center;
display: none;
}
#header .container .nav > ul > li > ul > li {}
#header .container .nav > ul > li > ul > li > a {
padding: 10px;
box-sizing: border-box;
display: inline-block;
width: 100%;
text-align: center;
color: #fff;
}
#header .container .nav > ul > li > ul > li > a:hover {
background-color: rgba(0, 0, 0, 0.3);
transition: all 0.3s;
}
/* silder */
#silder {
width: 100%;
height: 300px;
}
#silder .container {
overflow: hidden;
}
#silder .sliderWrap {
display: flex;
width: 400%;
}
#silder .sliderWrap .slider {
position: relative;
width: 1200px;
}
#silder .sliderWrap .slider .text {
position: absolute;
left: 5%;
top: 50%;
transform: translateY(-50%);
text-align: left;
background-color: rgba(0, 0, 0, 0.3);
padding: 20px 40px;
}
#silder .sliderWrap .slider .text h2 {
color: #fff;
font-size: 24px;
margin-bottom: 4px;
}
#silder .sliderWrap .slider .text h2 span {
color: orange;
}
#silder .sliderWrap .slider .text p {
color: #fff;
font-size: 16px;
}
/* main */
#main {
width: 100%;
height: 200px;
}
#main .container {
display: flex;
}
#main .container .notice {
width: 400px;
padding: 20px;
background-color: #ffafaf;
}
#main .container .notice h3 {
font-size: 24px;
margin-bottom: 10px;
}
#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;
position: absolute;
left: 0;
top: 11px;
border-radius: 50%;
}
#main .container .notice li a {
width: 75%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#main .container .notice li a:hover {
text-decoration: underline;
}
#main .container .notice li span {
width: 25%;
text-align: right;
}
#main .container .gallery {
width: 400px;
padding: 25px 20px;
}
#main .container .gallery h3 {
font-size: 24px;
margin-bottom: 10px;
}
#main .container .gallery ul {
display: flex;
}
#main .container .banner {
width: 400px;
background-image: url(../images/banner.jpg);
text-align: center;
}
#main .container .banner h3 {
font-size: 24px;
margin-top: 40px;
color: #000000;
}
#main .container .banner a {
background-color: rgba(0, 0, 0, 0.9);
color: #fff;
display: inline-block;
padding: 10px 30px;
border-radius: 40px;
}
/* footer */
#footer {
width: 100%;
height: 100px;
background-color: #d2b1b1;
}
#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 {
display: inline-block;
padding: 16px 10px 16px 0;
}
#footer .container .footer1 .footer1-2 {
width: 100%;
height: 50px;
padding-top: 15px;
box-sizing: border-box;
}
#footer .container .footer2 {
width: 20%;
}
#footer .container .footer2 select {
margin-top: 34px;
width: 100%;
height: 30px;
}제이쿼리
$(function(){
// 메뉴
$(".nav > ul > li").mouseover(function(){
$(".nav > ul > li > ul").stop().fadeIn(400);
$("#header .container").addClass("on");
});
$(".nav > ul > li").mouseout(function(){
$(".nav > ul > li > ul").stop().fadeOut(50);
$("#header .container").removeClass("on");
});
// 슬라이드
let currentIndex = 0;
const $sliderWrap = $(".sliderWrap"); //이미지 부모
const $slider = $(".slider"); //각각의 이미지
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);
});제이쿼리_서브메뉴
메뉴의 항목에 마우스 오버했을 때($(".nav > ul > li").mouseover(function(){}), 모든 하위 메뉴를 서서히 나타나게 합니다($(".nav > ul > li > ul").stop().fadeIn(400))와 동시에 헤더 컨테이너에 "on" 클래스를 추가합니다($("#header .container").addClass("on")).
메뉴의 항목에서 마우스 아웃했을 때($(".nav > ul > li").mouseout(function(){}), 모든 하위 메뉴를 서서히 사라지게 합니다($(".nav > ul > li > ul").stop().fadeOut(50))와 동시에 헤더 컨테이너에서 "on" 클래스를 제거합니다($("#header .container").removeClass("on")).
제이쿼리_슬라이드
currentIndex 변수를 0으로 초기화합니다.
$sliderWrap 변수에는 슬라이드 이미지들의 부모 요소인 .sliderWrap를 선택합니다.
$slider 변수에는 각각의 이미지를 나타내는 .slider를 선택합니다.
$sliderWidth 변수에는 이미지의 가로 크기를 저장합니다.
첫 번째 이미지를 복제하여 마지막에 추가합니다($sliderWrap.append($slider.first().clone(true))).
일정 시간 간격으로 반복되는 함수가 실행됩니다.
currentIndex 값을 1씩 증가시킵니다(currentIndex++).
$sliderWrap 요소를 애니메이션을 사용하여 현재 이미지의 가로 너비($sliderWidth)와 currentIndex를 곱한 값만큼 왼쪽으로 이동시킵니다($sliderWrap.animate({marginLeft: -$sliderWidth * currentIndex}, 600)).
만약 currentIndex가 $slider의 길이와 같아지면, 모든 이미지를 한 번씩 보여준 후에 실행됩니다.
일정 시간(700ms)이 지난 후에 첫 번째 이미지로 되돌아가도록 애니메이션을 적용합니다($sliderWrap.animate({marginLeft: 0}, 0)).
그리고 currentIndex를 다시 0으로 초기화합니다.
완성된 페이지
728x90
반응형
