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를 작업해야 에러잡기도 쉽고 코드 짜기도 쉬워요 ! 

'html'의 다른글

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

관련글

댓글

티스토리툴바