QUOTE THE DAY
“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”
-
이글슨 (Eagleson)
반응형
웹디자인 기능사 실기 연습
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">
<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="sliderWrap">
<div class="slider s1">
<img src="images/slider01.jpg" alt="">
<div class="text">
<h2>미래를 이끄는 <strong>열정</strong></h2>
<p>산업대학교</p>
</div>
</div>
<div class="slider s2">
<img src="images/slider02.jpg" alt="">
<div class="text">
<h2>당신이 원하는 <strong>교육</strong></h2>
<p>산업대학교</p>
</div>
</div>
<div class="slider s3">
<img src="images/slider03.jpg" alt="대학교 이미지">
<div class="text">
<h2>미래를 향한 우리의 <strong>도전</strong></h2>
<p>산업대학교</p>
</div>
</div>
</div>
</div>
</aside>
<!-- //slider -->
<main id="main">
<div class="container">
<section class="notice">
<h3>산업대학교 새로운 소식</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="#">미래 직업 워크숍 및 박함회</a><span>2023.05.01</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 -->
<section class="banner">
<h3>산업대학교<br> 2023 체육대전</h3>
<a href="#">바로가기</a>
</section>
<!-- 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: #333;
}
a {
text-decoration: none;
color: #333;
}
li {
list-style: none;
}
img {
vertical-align: top;
}
#wrap {
width: 100%;
}
.container {
width: 1200px;
margin: 0 auto;
height: inherit;
/* background-color: #818181a1; */
}
/* header */
#header {
width: 100%;
height: 100px;
background-color: #efefef;
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: #aee7c6;
}
#header .container .nav > ul > li > a:hover {
background-color: rgb(122, 188, 150);
}
#header .container .nav > ul > li > ul {
display: none;
position: absolute;
left: 0;
top: 50px;
text-align: center;
width: 100%;
}
/* #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: #3d3d3d83
}
/* slider */
#slider {
width: 100%;
height: 300px;
}
#slider .container {
overflow: hidden;
}
#slider .sliderWrap {
display: flex;
width: 400%;
}
#slider .sliderWrap .slider {
position: relative;
width: 1200px;
}
#slider .sliderWrap .slider img {}
#slider .sliderWrap .slider .text {
position: absolute;
left: 5%;
top: 50%;
transform: translateY(-50%);
text-align: center;
background-color: rgba(0, 0, 0, 0.3);
padding: 20px 40px;
}
#slider .sliderWrap .slider .text h2 {
color: #fff;
font-size: 24px;
margin-bottom: 4px;
}
#slider .sliderWrap .slider .text h2 strong {
color: orange;
}
#slider .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: 25px 20px;
background-color: #a1d7c0;
}
#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: 70%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#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: 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 {
margin-top: 40px;
font-size: 24px;
color: #000000;
}
#main .container .banner a {
background-color: rgba(0, 0, 0.1);
color: #fff;
padding: 10px 30px;
display: inline-block;
border-radius: 40px;
}
/* footer */
#footer {
width: 100%;
height: 100px;
background-color: #efefef;
}
#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: 16px 10px 16px 0;
display: inline-block;
}
#footer .container .footer1 .footer1-2 {
width: 100%;
height: 50px;
padding-top: 15px;
}
#footer .container .footer2 {
width: 20%;
}
#footer .container .footer2 select {
width: 100%;
height: 30px;
margin-top: 34px;
}SCRIPT
$(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(100);
$("#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)
});반응형
