728x90
반응형
2023 웹디자인 기능사 실기 E-4 유형
- HTML : https://github.com/dongjin6539/web2023/blob/main/webd/siteE_4/index.html
- CSS : https://github.com/dongjin6539/web2023/blob/main/webd/siteE_4/css/style.css
- SCRIPT.JS : https://github.com/dongjin6539/web2023/blob/main/webd/siteE_4/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>
<!-- CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- SCRIPT -->
<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">
<main id="main">
<header id="header">
<h1 class="logo"><a href="#">철길 마을</a></h1>
<ul 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>
<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>
</ul>
</ul>
</header>
<!-- //header -->
<section id="contents">
<article class="banner">
<h3>기차 여행</h3>
<a href="#" class="popup-btn">떠나기!</a>
</article>
<!-- ..banner -->
<article class="notice">
<h3>철길 마을 공지사항</h3>
<ul>
<li><a href="#">중요한 안전 공지</a><span>2023.05.19</span></li>
<li><a href="#">마을 청소 봉사</a><span>2023.05.19</span></li>
<li><a href="#">길 공사 안내</a><span>2023.05.19</span></li>
<li><a href="#">마을 축제 일정 변경</a><span>2023.05.19</span></li>
<li><a href="#">마을 도서관 오픈 시간 변경</a><span>2023.05.19</span></li>
</ul>
<a href="#" class="more">더보기+</a>
</article>
<!-- //notice -->
<article class="gallery">
<h3>철길 마을 갤러리</h3>
<ul>
<li><a href="#">봄, 가을</a></li>
<li><a href="#">여름</a></li>
<li><a href="#">겨울</a></li>
</ul>
<a href="#" class="more">더보기+</a>
</article>
<!-- //gallery -->
<article class="link">
<ul>
<li><a href="#">문의</a></li>
<li><a href="#">이용시간</a></li>
<li><a href="#">예약 확인</a></li>
<li><a href="#">일정</a></li>
</ul>
</article>
<!-- //link -->
</section>
<!-- //contents -->
<article id="slider">
<div class="slider__wrap">
<div class="slider s1">
<div class="text">
<h3>추억을 소환하는 철길 마을</h3>
<p>추억의 향기가 느껴지는 곳</p>
</div>
</div>
<div class="slider s2">
<div class="text">
<h3>추억을 소환하는 철길 마을</h3>
<p>자연과 조화로운 아름다움을 만나는 곳</p>
</div>
</div>
<div class="slider s3">
<div class="text">
<h3>추억을 소환하는 철길 마을</h3>
<p>따뜻한 이웃과 함께하는 행복한 공동체</p>
</div>
</div>
</div>
</article>
<!-- //slider -->
<div class="popup-view">
<h4>철길 마을로 여행을 떠나봅시다!!</h4>
<p>계절별로 다양한 철길 마을을 확인해보세요!!<br>다양한 먹거리도 있습니다!!</p>
<button class="popup-close">닫기</button>
</div>
</main>
<!-- //main -->
<footer id="footer">
<div class="footer1">
<h4>철길 마을</h4>
</div>
<div class="footer2">
<div class="footer2-1">
<ul>
<li><a href="#">개인정보처리방침</a></li> |
<li><a href="#">정보 공개</a></li> |
<li><a href="#">홈페이지 운영지침</a></li> |
<li><a href="#">문의하기</a></li>
</ul>
</div>
<div class="footer2-2">
15073 전라북도 군산시 군산로 237 철길 마을 COPYRIGTH © ALL RIGHTS REVERSED.
</div>
</div>
<div class="footer3">
<select name="family" id="family">
<option value="철길마을1">철길마을1</option>
<option value="철길마을2">철길마을2</option>
<option value="철길마을3">철길마을3</option>
</select>
</div>
</footer>
<!-- //footer -->
</div>
<!-- //wrap -->
</body>
</html>- 웹 사이트 표준에 맞게 알맞는 태그를 사용하고 css 링크와 script 링크를 입력해서 이 html 코드에 적용되게 해줍니다.
CSS
@import "UTF-8";
/* reset */
*{
margin: 0;
padding: 0;
color: #333;
}
a {
text-decoration: none;
color: #333;
}
li {
list-style: none;
}
img {
vertical-align: top;
}
/* wrap */
#wrap {
width: 100%;
}
/* main */
#main {
width: 100%;
height: calc(100vh - 120px);
display: flex;
}
/* header */
#header {
width: 200px;
height: 100%;
background-color: #a4eeac;
}
#header .logo {
width: 100%;
text-align: center;
padding: 20px 0;
background-color: #fff;
}
#header .logo a {
color: #2fc800;
}
#header .nav > ul > li {
text-align: center;
position: relative;
}
#header .nav > ul > li > a {
display: inline-block;
padding: 10px 0;
background-color: #007b3e;
color: #fff;
width: 100%;
}
#header .nav > ul > li > a:hover {
background-color: #58c48e;
}
#header .nav > ul > li > ul {
position: absolute;
right: -200px;
top: 0;
width: 200px;
background-color: #fff;
display: none;
z-index: 1;
}
#header .nav > ul > li > ul > li > a {
display: inline-block;
padding: 10px 0;
background-color: #02b059;
color: #fff;
width: 100%;
}
#header .nav > ul > li > ul > li > a:hover {
background-color: #6ddea5;
}
/* contents */
#contents {
width: 400px;
height: 100%;
}
#contents .banner {
width: 100%;
height: 20%;
background: url(../images/bannerE_01.jpg) no-repeat center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#contents .banner h3 {
color: #fff;
font-size: 30px;
margin-bottom: 5px;
}
#contents .banner a {
color: #fff;
background-color: #02b059a3;
padding: 5px 10px;
border-radius: 30px;
}
#contents .banner a:hover {
background-color: #02b059;
}
#contents .notice {
width: 100%;
height: 30%;
background-color: #9bed92;
padding: 20px;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
#contents .notice h3 {
color: #fff;
background-color: #13a103;
padding: 4px 10px;
margin-bottom: 10px;
}
#contents .notice li {
display: flex;
justify-content: space-between;
line-height: 1.6;
padding-left: 12px;
position: relative;
}
#contents .notice li::before {
content: '';
width: 6px;
height: 6px;
background-color: #13a103;
border-radius: 50%;
position: absolute;
left: 0;
top: 8px;
}
#contents .notice li a {
width: 70%;
text-overflow: ellipsis;
white-space: nowrap;
}
#contents .notice li a:hover {
text-decoration: underline;
text-underline-position: under;
}
#contents .notice li span {
width: 30%;
text-align: right;
}
#contents .notice .more {
position: absolute;
right: 26px;
top: 26px;
color: #fff;
}
#contents .gallery {
width: 100%;
height: 35%;
background-color: #77e25a;
padding: 20px;
box-sizing: border-box;
overflow: hidden;
position: relative;
}
#contents .gallery h3 {
color: #fff;
background-color: #13a103;
padding: 4px 10px;
margin-bottom: 20px;
}
#contents .gallery ul {
display: flex;
justify-content: space-between;
}
#contents .gallery li {
width: 110px;
height: 150px;
background-color: #fff;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#contents .gallery li:nth-child(1) {
background-image: url(../images/galleryE_01.jpg);
}
#contents .gallery li:nth-child(2) {
background-image: url(../images/galleryE_02.jpg);
}
#contents .gallery li:nth-child(3) {
background-image: url(../images/galleryE_03.jpg);
}
#contents .gallery li a {
display: block;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
#contents .gallery li a:hover {
background-color: rgba(0, 0, 0, 0);
}
#contents .gallery .more {
position: absolute;
right: 26px;
top: 26px;
color: #fff;
}
#contents .link {
width: 100%;
height: 15%;
}
#contents .link ul {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
#contents .link li {
width: 70px;
height: 60px;
text-align: center;
}
#contents .link li a {
display: block;
padding-top: 40px;
position: relative;
}
#contents .link li a::before {
content: '';
position: absolute;
left: 15px;
top: 0;
width: 40px;
height: 40px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#contents .link li a:hover {
color: #25d57d;
background-color: #1ab36614;
border-radius: 10px;
}
#contents .link li:nth-child(1) a::before {
background-image: url(../images/icon_01.png);
}
#contents .link li:nth-child(2) a::before {
background-image: url(../images/icon_02.png);
}
#contents .link li:nth-child(3) a::before {
background-image: url(../images/icon_06.png);
}
#contents .link li:nth-child(4) a::before {
background-image: url(../images/icon_05.png);
}
/* slider */
#slider {
width: calc(100% - 600px);
height: 100%;
overflow: hidden;
}
#slider .slider__wrap {
width: 400%;
height: 100%;
display: flex;
}
#slider .slider__wrap .slider {
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
display: flex;
align-items: center;
justify-content: center;
}
#slider .slider__wrap .slider .text {
background-color: #61c55494;
width: 350px;
height: 350px;
border-radius: 500px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#slider .slider__wrap .slider .text h3 {
color: #fff;
font-size: 24px;
margin-bottom: 10px;
}
#slider .slider__wrap .slider .text p {
color: #fff;
}
#slider .slider__wrap .slider.s1 {
background-image: url(../images/sliderE_01.jpg);
}
#slider .slider__wrap .slider.s2 {
background-image: url(../images/sliderE_02.jpg);
}
#slider .slider__wrap .slider.s3 {
background-image: url(../images/sliderE_03.jpg);
}
.popup-view {
width: 20%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #61c554;
border: 4px solid #139202;
padding: 20px;
display: none;
text-align: center;
word-break: keep-all;
}
.popup-view h4 {
margin-bottom: 20px;
text-align: left;
color: #fff;
}
.popup-view p {
margin-bottom: 50px;
text-align: left;
font-size: 14px;
color: #fff;
}
.popup-view button {
display: inline-block;
background-color: #139202;
border: 4px solid #139202;
color: #fff;
padding: 10px 20px;
cursor: pointer;
}
/* footer */
#footer {
width: 100%;
display: flex;
background-color: #f0f0f0;
}
#footer .footer1 {
width: 200px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #858585;
}
#footer .footer2 {
width: calc(100% - 400px);
}
#footer .footer2 .footer2-1 {
width: 100%;
height: 60px;
text-align: center;
}
#footer .footer2 .footer2-1 li {
display: inline-block;
}
#footer .footer2 .footer2-1 li a {
padding: 20px 10px;
display: inline-block;
}
#footer .footer2 .footer2-1 li a:hover {
text-decoration: under;
text-underline-position: under;
}
#footer .footer2 .footer2-2 {
width: 100%;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
#footer .footer3 {
width: 200px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
}
#footer .footer3 select {
width: 90%;
height: 30px;
}- html 코드의 태그와 id명 class명을 가져와서 알맞는 스타일과 속성을 입력해줍니다.
SCRIPT
$(function(){
let currentIndex = 0;
$(".slider__wrap").append($(".slider").first().clone(true));
setInterval(function(){
currentIndex++;
$(".slider__wrap").animate({marginLeft: -100 * currentIndex + "%"}, 600);
if(currentIndex == 3){
setTimeout(function(){
$(".slider__wrap").animate({marginLeft: 0}, 0);
currentIndex = 0;
}, 700);
}
}, 3000);
// 메뉴
$(".nav > ul > li").mouseover(function(){
$(this).find(".submenu").stop().slideDown();
})
$(".nav > ul > li").mouseout(function(){
$(this).find(".submenu").stop().slideUp();
})
// 팝업
$(".popup-btn").click(function(){
$(".popup-view").show()
})
$(".popup-close").click(function(){
$(".popup-view").hide()
})
})- 이번 script는 jQuery를 사용해봤습니다.
- html 코드에서 script 링크를 상단 부분에 입력을 했기 때문에 script 처음 스타트를 $(function(){})으로 시작해줍니다. 그런 다음 { } 안에 script를 입력해줍니다.
- 먼저 메뉴에 마우스를 오버했을 때 submenu가 내려오고 마우스가 아웃되면 submenu가 올라가게 해줍니다.
- $( )으로 먼저 선택자를 가져오고 .mouseover 메서드를 사용하고 함수로 submenu 메뉴 부분을 가져와서 내려오게 하기 위해 slideDown( )을 사용해줍니다.
- 반대로 올라가게 하기 위해 .mouseout 메서드를 사용하고 함수로 submenu 메뉴 부분을 가져와서 올라가게 하기 위해 slideUp( )을 사용해줍니다.
- 슬라이드 부분의 이미지를 좌로 움직이게 슬라이드 효과를 줄겁니다. 먼저 변수를 0으로 저장해줍니다. 이미지의 움직이는 영역을 가져오기 위해 영역의 부모를 선택자로 가져옵니다. 그리고 슬라이더의 이미지를 선택자로 가져옵니다. 그리고 이미지의 width값을 가져오기 위해 .width( ) 메서드를 사용해줍니다. 그리고 끊기지 않게 나타나게 하기 위해 첫번째 이미지를 복사해서 마지막 이미지 뒤에 붙여줄겁니다. 그러기 위해 append( ) 메서드를 사용해서 .first.clone(true)를 사용해줍니다.
- 시간을 3초 지나면 슬라이드 효과를 주기 위해 setInterval(function(){}, 3000) 함수를 사용해줍니다. 변수를 0으로 저장해준 것을 ++연산자를 사용해서 1씩 증가시켜줍니다. 이미지의 움직이는 영역을 .animate( ) 메서드를 사용해서 왼쪽으로 이미지의 가로값만큼 보내기 위해 marginLeft으로 (-이미지의 가로값*변수) 만큼 보냅니다. 그리고 변수의 인덱스 값이 이미지의 갯수의 값과 같을 때 이미지의 움직이는 영역을 .animate( ) 메서드를 사용해서 marginLeft을 0으로 옮겨줍니다. 그리고 변수를 0으로 다시 되돌려줍니다.
- 모달창(팝업창)은 페이지 부분의 class 명을 선택자로 가져와서 그 부분을 클릭했을때 나타나고 창의 닫기 버튼을 클릭했을때 사라지게 해줍니다. 그래서 $( )으로 선택자를 가져와서 .click( ) 메서드를 사용해서 모달창의 class 명을 가져와서 .show( )를 사용해서 나타나게 하고 창의 닫기 버튼을 선택자로 가져와서 .hide( )를 사용해서 사라지게 해줍니다.
728x90
반응형
