웹디자인 기능사 연습문제 2

html

웹디자인 기능사 연습문제 2

grovy 2023. 5. 13. 23:39

728x90

2023웹디 기능사 실기문제를 만들어볼거에요

사이즈를 정해놓구 만들어서 깨졌지만 이해 부탁드려요 '~'

요렇게 만들어졌구요

요 레이아웃을 보구 만들었어요

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 class="wrap">
        <div id="header">
            <div class="header__left">
                <h1 class="logo"><a href="#">강원천문대</a></h1>
            </div>
            <div class="header__right">
                <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="images/slider01.jpg" alt="천문과학교육관 시 소개"></a>
                    <div class="text">
                        <h2>천문과학교육관 시설 소개</h2>
                        <p>영상강의실로 놀러오세요!</p>
                    </div>
                </div>
                <div class="slider">
                    <a href="#"><img src="images/slider02.jpg" alt="천문과학교육관 이용 안내"></a>
                    <div class="text">
                        <h2>천문과학교육관 이용 안내</h2>
                        <p>어린이를 위한 천문 과학관!</p>
                    </div>
                </div>
                <div class="slider">
                    <a href="#"><img src="images/slider03.jpg" alt="천문과학교육관 소개"></a>
                    <div class="text">
                        <h2>별을 보는 고요한 정상</h2>
                        <p>강원천문대로 놀러오세요!</p>
                    </div>
                </div>
            </div>
        </div>
        <div id="contents">
            <section 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.11</span></li>
                        <li><a href="#">강원천문대 2023년 온라인 예매</a><span>2023.05.10</span></li>
                        <li><a href="#">강원천문대 휴관일 및 이벤트 안내</a><span>2023.05.09</span></li>
                        <li><a href="#">강원천문대 휴관일 안내</a><span>2023.05.08</span></li>
                    </ul>
                    <ul class="gallery">
                        <li><a href="#"><img src="images/gallery01.jpg" alt="천문대1"></a></li>
                        <li><a href="#"><img src="images/gallery02.jpg" alt="천문대2"></a></li>
                        <li><a href="#"><img src="images/gallery03.jpg" alt="천문대3"></a></li>
                    </ul>
                </div>
            </section>
            <!-- //content1 -->
            <section class="banner">
                <h3>강원천문대 온라인 예매하기</h3>
                <a href="#">예매하기</a>
            </section>
            <!-- banner -->
            <article class="link">
                <h3>이달의 별자리</h3>
                <a href="#">바로가기</a>
            </article>
            <!-- link -->
        </div>
        <div 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="#">cctv설치 및 운영지침</a></li>
                    </ul>
                </div>
                <div class="footer2-2">
                    COPYRIGHT &copy; 2023 All Right Reserved
                </div>
            </div>
        </div>
    </div>
    <script src="script/script.js"></script>
</body>
</html>

css 부분

@charset "UTF-8";
* {
    margin: 0;
    padding: 0;
    color: #333333;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
    color: #333333;
}
img {
    vertical-align: top;
}
.wrap{
    width: 1200px;
    margin: 0 auto;
}
/* header */

#header {
    width: 1200px;
    display: flex;
    background-color: #0C51A6;
}
.header__left {
    width: 20%;
    height: 100px;
}
.header__left a {
    display: inline-block;
    padding: 30px 40px;
    color: #fff;
}
.header__right {
    z-index: 1000;
    width: 80%;
    height: 100px;
    text-align: right;
}
.header__right > ul {
    margin-top: 24px;
}
.header__right > ul > li {
    display: inline-block;
    position: relative;
    
}
.header__right > ul > li > a {
    padding: 15px 45px;
    background-color: #052B5A;
    color: #fff;
    display: block;
}
.header__right > ul > li > a:hover {
    background-color: #021B3A;
}
.header__right > ul > li > ul {
    display: none;
    text-align: center;
    background-color: #fff;
    position: absolute;
    width: 100%;
    top:51px;
    left: 0;
    
    /* z-index: 1000; */
}
.header__right > ul > li > ul > li > a {
    padding: 10px 20px;
    display: block;
}
.header__right > ul > li > ul > li > a:hover {
    background-color: #6189B9;
}
/* slider */
#slider {
    width: 1200px;
    height: 300px;
    background-color: #BD9494;
}
#slider .sliderWrap {
    position: relative;
}
#slider .sliderWrap .slider {
    position: absolute;
    left: 0;
    top :0;
}
#slider .sliderWrap .slider img{
    vertical-align: top;
}
#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;
}
/* banner */
#contents {
    width: 1200px;
    height: 200px;
    display: flex;
}
#contents .info {
    width: 400px;
    height: 200px;
    background-color: #78ADCC;
    padding: 20px;
    box-sizing: border-box;
}
#contents .info h3 {
    margin-bottom: 10px;
    font-size: 22px;
}
#contents .info h3 a.active {
    text-decoration: underline;
}

#contents .info .notice li {
    display: flex;
}
#contents .info .notice li a {
    width: 75%;
    font-size: 16px;
    line-height: 1.8;
}
#contents .info .notice li a:hover {
    text-decoration: underline;
}
#contents .info .notice li span {
    width: 25%;
    text-align: right;
}
#contents .info .gallery {
    display: flex;
    
}
#contents .info .gallery li{
    padding-top: 3px;
    margin-right: 17px;
}



.content1 {
    width: 33.3333%;
    height: 200px;
    background-color: #92D3E7;
}
.banner {
    width: 33.3333%;
    height: 200px;
    background-color: #3F8AA1;
    background-image: url(../images/banner.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);
    border-radius: 50px;
    padding: 10px 20px;
    margin-top: 10px;
}
.banner a:hover {
    background-color: rgba(112, 102, 252, 0.4);
}
.link {
    width: 33.3333%;
    height: 200px;
    background-image: url(../images/link.jpg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.link h3 {
    color: #fff;
}
.link a{
    background-color: rgba(255,255,255,0.4);
    border-radius: 50px;
    padding: 10px 20px;
    margin-top: 10px;
}
.link a:hover{
    background-color: rgba(112, 102, 252, 0.4);
}
/* footer */
#footer {
    width: 1200px;
    display: flex;
    height: 100px;
    background-color: rgb(66, 100, 250);
}
.footer1 {
    width: 20%;
    height: 100px;
    
}
.footer1 h4 {
    font-size: 30px;
    color: #cdcdcd;
    padding: 30px 30px;
}
.footer2 {
    width: 80%;
    height: 100px;
}
.footer2-1 {
    width: 100%;
    height: 50px;
    text-align: center;
}
.footer2-1 li{
    display: inline-block;
    border-right: 1px solid #fff;
}
.footer2-1 li:last-child{
    border: 0;
}
.footer2-1 ul{
    padding-top: 10px;
}
.footer2-1 ul a{
    padding: 10px;
    color:  #fff;

}
.footer2-1 ul a:hover{
    text-decoration: underline;
}
.footer2-2 {
    width: 100%;
    height: 50px;
    text-align: center;
    padding-top: 10px;
    box-sizing: border-box;
    color:  #fff;

}

그리고 자바스크립트 부분

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

    // $(".header__right > ul > li").focusin(function(){
    //     $(this).find(".submenu").stop().slideDown(200);
    // }) 
    // $(".header__right > ul > li").focusout(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(1200);
        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();
    })
    
});

메뉴 : 하나씩 나오기
.header__right 클래스 하위의 ul 태그의 하위 li 태그에 마우스를 올리면, 해당 li 태그 하위의 .submenu 클래스를 슬라이드 다운 시킨다.
.header__right 클래스 하위의 ul 태그의 하위 li 태그에서 마우스를 뗄 때, 해당 li 태그 하위의 .submenu 클래스를 슬라이드 업 시킨다.

슬라이드 효과
slider 클래스를 가진 요소를 찾아서 모두 숨기고, 첫 번째 이미지만 보이도록 한다.
3초마다, 현재 이미지(currentIndex)를 기준으로 다음 이미지(nextIndex)를 결정한다.
현재 이미지는 1.2초 동안 페이드 아웃되고, 다음 이미지는 1.2초 동안 페이드 인된다.
currentIndex 변수를 nextIndex로 업데이트한다.

탭 메뉴 ( 공지사항 )
.info-menu 클래스 하위의 a 태그를 클릭하면, 클릭한 a 태그의 인덱스 값을 가져와서 해당 인덱스 값을 가진 .info-cont 클래스 하위 ul 태그만 보이고, 나머지는 숨긴다.
클릭한 a 태그에는 active 클래스를 추가하고, 나머지 a 태그에서는 active 클래스를 제거한다.

포인트 !

html을 먼저 만들고

css로 슬라이드가 보여질 화면과 sub메뉴를 완성시킨뒤

script를 작업해야 에러잡기도 쉽고 코드 짜기도 쉬워요 !

현재글웹디자인 기능사 연습문제 2

300x250

카페인 중독

GIT 블로그

Loading data ...

setInterval, php 게시판 하단 페이징 기능, php 페이징기능, 비밀번호 정규식, 페럴렉스 가로효과, php ajax 유효성체크, php게시판 목록보기, 페럴렉스 세로 가로 세로, 프로그래머스, php 게시판 수정, 사이트유형, slider 효과 jquery, php ajax, 코딩테스트, javascript, slider 효과 gsap, jquery submenu, slider 효과 javascript, javascript musicplayer 만들기, 웹디 2023형 실기,

Today :
Yesterday :

숨만쉬어도 귀여운타입:D