Winnie The Pooh Bear 웹디자인 기능사 실기 연습문제_강원천문대

웹디자인기능사

웹디자인 기능사 실기 연습문제_강원천문대

코딩은 처음이라 2023. 5. 13. 21:22

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형

웹디자인 기능사 실기 연습문제_강원천문대

 

 

 

 

 

💜 웹디자인 기능사 실기 연습문제

코드 보기 / 완성 화면

 

 

웹디자인 기능사 실기 연습문제인 강원천문대 홈페이지를 만들어봤습니다.

 

 

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="../23.05.12/css/index.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 class="wrap">
        <div class="header">
            <div class="logo">
                <a href="#">
                    <h1>강원천문대</h1>
                </a>

            </div>
            <div 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>
                        </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>
                    <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>
            </div>
        </div>
        <div id="slider">
            <div class="sliderWrap">
                <div class="slider">
                    <a href="#"><img src="imges/slider01.jpg" alt="천문관학교육관 소개"></a>
                    <div class="text">
                        <h2>천문과학교육관 시설 소개</h2>
                        <p>영상강의실로 놀러오세요!</p>
                    </div>
                </div>
                <div class="slider">
                    <a href="#"><img src="imges/slider02.jpg" alt="천문관학교육관 이용 안내"></a>
                    <div class="text">
                        <h2>천문과학교육관 이용 안내</h2>
                        <p>어린이를 위한 천문 과학관</p>
                    </div>
                </div>
                <div class="slider">
                    <a href="#"><img src="imges/slider03.jpg" alt="천문관학교육관 소개"></a>
                    <div class="text">
                        <h2>별을 보는 고요한 정상</h2>
                        <p>강원 천문대로 놀러오세요!</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="section">
            <div class="info">
                <h3 class="info-menu">
                    <a href="#" class="active">공지사항</a>
                    <a href="#">갤러리</a>
                </h3>
                <div class="info-cont">
                    <ul class="notice">
                        <li><a href="#">강원천문대 2023년 휴관일 안내</a><span>2023.05.01</span></li>
                        <li><a href="#">강원천문대 2023년 온라인 예매 안내</a><span>2023.05.02</span></li>
                        <li><a href="#">강원천문대 휴관일 및 이벤트 안내</a><span>2023.05.03</span></li>
                        <li><a href="#">강원천문대 주차장 이용 및 숙박 안내</a><span>2023.05.04</span></li>
                    </ul>
                    <ul class="gallery">
                        <li><a href="#"><img src="imges/gallery01.jpg" alt="독일 천문대"></a></li>
                        <li><a href="#"><img src="imges/gallery02.jpg" alt="미국 천문대"></a></li>
                        <li><a href="#"><img src="imges/gallery03.jpg" alt="영국 천문대"></a></li>
                    </ul>
                </div>

            </div>
            <!-- //sec1 -->

            <div class="banner">
                <h3>강원천문대 온라인 예매하기</h3>
                <a href="#">예매하기</a>
                <!-- <img src="imges/banner1.jpg" alt="강원천문대 온라인 예매하기"> -->
            </div>
            <!-- banner -->
            <div class="link">
                <h3>이달의 별자리 구경하기</h3>
                <a href="#">바로가기</a>
            </div>
        </div>
        <div class="footer">
            <div class="fot1">
                <h4>강원천문대</h4>
            </div>
            <div class="fot2">
                <div class="fot2-1">
                    <ul>
                        <li><a href="">개인정보처리방침</a></li>
                        <li><a href="">저작권보호정책</a></li>
                        <li><a href="">이메일무단수집거부</a></li>
                        <li><a href="">CCTV 설치 및 운영지침</a></li>
                    </ul>
                </div>
                <div class="fot2-2">
                    COPYRIGHT &copy; 2023, All Rights Reseved
                </div>
            </div>
        </div>
    </div>
</body>

</html>

메뉴, 슬라이드, 탭메뉴, 광고, 푸터로 영역을 나눠 HTML을 작업해줬습니다.

 

 

 

CSS

@charset "UTF-8";

* {
    padding: 0;
    margin: 0;
    /* color: #333; */
    /* font-family: '맑은 고딕'; */
}

body {
    color: #333;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: #333;
}
img {
    vertical-align: top;
}
.wrap {
    width: 1200px;
    margin: 0 auto;
    /* background-color: #ccc; */
}

/* header */
.header {
    display: flex;
    height: 100px;
    background-color: #cbbfdb;
    position: relative;
    z-index: 1000;
}

.header .logo {
    width: 20%;
    /* background-color: #a79595; */
}

.header .logo a {
    display: inline-block;
    padding: 30px 40px;
    color: #fff;
}

.header .nav {
    width: 80%;
    /* background-color: #af6060; */
    text-align: right;
}

.header .nav>ul {
    margin-top: 23px;
}

.header .nav>ul>li {
    display: inline-block;
    position: relative;
}

.header .nav>ul>li>a {
    color: #fff;
    padding: 15px 45px;
    background-color: #a696bb;
    display: block;
}

.header .nav>ul>li>a:hover {
    background-color: #5a4a6e;
}

.header .nav>ul>li>ul {
    /* display: none; */
    text-align: center;
    background-color: #fff;
    display: none;
    position: absolute;
    top: 52px;
    left: 0;
    width: 100%;
}

/* .header .nav>ul>li>ul>li {} */

.header .nav>ul>li>ul>li>a {
    padding: 10px 20px;
    display: block;
}

.header .nav>ul>li>ul>li>a:hover {
    background-color: #a696bb;
}

/* slider */
#slider {
    height: 300px;
    /* background-color: #d87e7e; */
}

#slider .sliderWrap {
    position: relative;
}

#slider .sliderWrap .slider {
    position: absolute;
    left: 0;
    top: 0;
}

#slider .sliderWrap .slider img {
    vertical-align: top;
}

/* .slider .sliderWrap .slider {} */
#slider .sliderWrap .slider .text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 20px 30px;
}

#slider .sliderWrap .slider .text h2 {
    color: #fff;
}

#slider .sliderWrap .slider .text p {
    color: #fff;
}

/* section */
.section {
    width: 100%;
    display: flex;
}

.info {
    width: 33.3333%;
    /* height: 200px; */
    background-color: #2b28ce31;
    padding: 20px;
}

.section .info h3 {
    margin-bottom: 10px;
    font-size: 22px;
}
.section .info a.active {
    text-decoration: underline;
}
.section .info .notice ul {}

.section .info li {
    display: flex;
}

.section .info .notice li a {
    width: 75%;
    font-size: 16px;
    line-height: 1.8;
}

.section .info .notice li a:hover {
    text-decoration: underline;
}

.section .info .notice li span {
    width: 25%;
    text-align: right;
}

.section .info .gallery {
    display: flex;
}

.section .info .gallery li {
    margin-right: 17px;
    padding-top: 3px;
}

.banner {
    width: 33.4333%;
    height: 200px;
    background-image: url(../imges/banner1.jpg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.banner h3 {
    color: #fff;
}

.banner a {
    background-color: rgba(255, 255, 255, 0.4);
    padding: 10px 20px;
    border-radius: 50px;
    margin-top: 10px;
}

.banner a:hover {
    background-color: rgba(82, 88, 172, 0.4);
}

.section .link {
    width: 33.3333%;
    height: 200px;
    background-color: #914f4f;
    background-image: url(../imges/banner2.jpg);
}

.section .link h3 {
    color: #fff;
    padding: 20px;
}

.section .link a {
    width: 100px;
    height: 100px;
    /* border-color: rgba(255, 255, 255, 0.4); */
    background-color: #ffffff6b;
    display: block;
    border-radius: 50%;
    text-align: center;
    margin-left: 150px;
    line-height: 100px;
}

/* footer */
.footer {
    height: 100px;
    display: flex;
    background-color: #aba2b8;
}

.footer .fot1 {
    border-right: 1px solid #fff;
    width: 20%;
}

.footer .fot1 h4 {
    font-size: 30px;
    padding: 32px 30px;
    color: #cdcdcd;
}

.footer .fot2 {
    width: 80%;
    height: 100px;
}

.footer .fot2 .fot2-1 {
    width: 100%;
    height: 50px;
    text-align: center;
}

.footer .fot2 .fot2-1 ul {
    padding-top: 16px;
}

.footer .fot2 .fot2-1 li {
    display: inline-block;
    border-right: 1px solid #333;
}

.footer .fot2 .fot2-1 li:last-child {
    border: 0;
}

.footer .fot2 .fot2-1 li a {
    padding: 10px;
}

.footer .fot2 .fot2-1 li a:hover {
    text-decoration: underline;
}

.footer .fot2 .fot2-2 {
    width: 100%;
    height: 50px;
    text-align: center;
    padding-top: 10px;
    box-sizing: border-box;
}

기본 틀을 먼저 잡아주고 나서

디자인 작업에 들어갔습니다.

 

메뉴, 이미지슬라이드, 탭메뉴 부분의 CSS를 잘 잡아줘야

스크립트가 제대로 작동하기 때문에 신경써서 작업을 해줍니다.

 

 

SCRIPT

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="script/script.js"></script>
// $(document).ready(function(){

// })


$(function () {
    // 메뉴 : 하나씩 나오기
    $(".nav > ul >  li").mouseover(function () {
        $(this).find(".submenu").stop().slideDown(200);
    });
    $(".nav > ul >  li").mouseout(function () {
        $(this).find(".submenu").stop().slideUp(200);
    });

    //슬라이드 : 페이드 효과
    let currentIndex = 0;
    const $slider = $(".slider");
    $slider.hide().first().show();   //모든 이미지 숨기고 첫번째 이미지 나타남

    setInterval(function () {
        let nextIndex = (currentIndex + 1) % $slider.length;

        $slider.eq(currentIndex).fadeOut(300);
        $slider.eq(nextIndex).fadeIn(1200);

        currentIndex = nextIndex;
    }, 3000)

    // 탭 메뉴
    const tabBtn = $(".info-menu > a");
    const tabCont = $(".info-cont > ul");
    tabCont.hide().eq(0).show();

    tabBtn.on("click", function () {
        const index = $(this).index();

        $(this).addClass("active").siblings().removeClass("active");
        tabCont.eq(index).show().siblings().hide();
    });
});

jQuery를 이용했습니다.

 

$(document).ready(function(){})는 HTML문서가 모두 로드될 때까지 기다렸다가, 해당 함수 안의 코드를 실행하라는 의미입니다. $(function(){}) 은 $(document).ready(function(){})와 동일한 의미를 가지며 간단하게 표현할 수 있습니다.

 

메뉴는 마우스 오버와 아웃 이벤트를 이용해 하위 메뉴를 슬라이드 업/다운 하는 코드입니다.

.nav>ul>li는 HTML 문서에 클래스가 nav인 요소의 하위에 있는 ul 태그의 하위 li태그를 선택하고

mouseover()와 mouseout()함수를 사용해 마우스 오버와 아웃 이벤트에 대응하고 .find() 함수를 사용해 해당 요소의 하위 요소를 선택합니다. 그리고 .stop() 함수를 사용해 현재 애니메이션이 실행 중일 경우 애니메이션을 중지하고 새로운 애니메이션을 시작합니다.

 

슬라이드는 이미지를 일정시간 간격으로 바꾸어 보여주는 코드입니다.

setInterval() 함수를 사용해 일정 시간 간격으로 실행되는 반복문을 만들고, $slider변수를 사용해 슬라이드의 이미지를 선택합니다. eq() 함수를 사용해 슬라이드의 이미지 중 현재 이미지와 다음 이미지를 선택하고, fadeOut() 함수와 fadeIn()함수를 사용해 현재 이미지를 사라지게 하고, 다음 임지를 나타나게 합니다. % 연산자를 사용해 이미지 인덱스가 슬라이드 이미지의 개수를 넘어가면 다시 0으로 돌아갑니다.

 

탭메뉴는 메뉴 버튼을 클릭하면 해당 메뉴와 연결된 콘텐츠를 보여주는 코드입니다. $() 함수를 사용해 메뉴 버튼과 콘텐츠를 선택합니다. index()함수를 사용하여 클릭한 버튼의 인덱스를 가져와 해당 콘텐츠를 보여주고, 형제 요소들은 숨깁니다. addClass()함수와 removeClass()함수를 사용해 버튼의 스타일을 변경합니다.

 

 

반응형

'웹디자인기능사'의 다른글

  • 현재글웹디자인 기능사 실기 연습문제_강원천문대

관련글

댓글

티스토리툴바