본문 바로가기
2023/HTML

[HTML]

by Or0i쿠 2023. 4. 14.

show 나타남 fadeIn/out 서서히 나타나고 사라짐 
    <script>
        //팝업창
        $(".click").click(function(){
            // $("#layer").show();
            $("#layer").fadeIn();
        })
        $(".close").click(function(){
            // $("#layer").hide();
            $("#layer").fadeOut();
        })

더보기 
<!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">
</head>
<body>
    <div id="wrap" class="clearfix">
        <header id="header">
            <h1 class="logo">
                <a href="index.html"><img src="./img/logo.png" alt="남도맛기행"></a>
            </h1>
            <nav class="nav">
                <ul>
                    <li><a href="#">협회소개</a>
                    <ul class="sub">
                        <li><a href="#">인사말</a></li>
                        <li><a href="#">명인</a></li>
                        <li><a href="#">오시는길</a></li>
                    </ul>
                    </li>
                    <li><a href="#">행사안내</a>
                        <ul class="sub">
                            <li><a href="#">요리경연대회</a></li>
                            <li><a href="#">전시참가</a></li>
                            <li><a href="#">참가신청</a></li>
                        </ul></li>
                    <li><a href="#">홍보마당</a>
                        <ul class="sub">
                            <li><a href="#">축제소식</a></li>
                            <li><a href="#">보도자료</a></li>
                            <li><a href="#">레시피</a></li>
                        </ul>
                    </li>
                    <li><a href="#">회원마당</a>
                        <ul class="sub">
                            <li><a href="#">Q&A</a></li>
                            <li><a href="#">사진갤러리</a></li>
                            <li><a href="#">공지사항</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </header>

        <section id="box">
            <section id="banner">
                <ul>
                    <li><img src="./img/banner01.png" alt=""></li>
                    <li><img src="./img/banner02.png" alt=""></li>
                    <li><img src="./img/banner03.png" alt=""></li>
                </ul>
            </section>
            <section id="contents" class="clearfix">
                <div class="notice">
                    <h3>공지사항</h3>
                    <ul class="clearfix">
                        <li class="click"><a href="#">[남도 맛 기행] 공지사항입니다.공지사항입니다</a></li>
                        <li><a href="#">[남도 맛 기행] 공지사항입니다.공지사항입니다</a></li>
                        <li><a href="#">[남도 맛 기행] 공지사항입니다.공지사항입니다</a></li>
                        <li><a href="#">[남도 맛 기행] 공지사항입니다.공지사항입니다</a></li>
                        <li><a href="#">[남도 맛 기행] 공지사항입니다.공지사항입니다</a></li>
                    </ul>
                </div>
                <div class="gallery">
                    <h3>배너</h3>
                    <ul>
                        <li><img src="./img/gallery01.png" alt=""></li>
                        <li><img src="./img/gallery02.png" alt=""></li>
                        <li><img src="./img/gallery03.png" alt=""></li>
                    </ul>
                </div>
                <div class="link">
                    <h3>바로가기</h3>
                    <ul>
                        <a href="#"><img src="./img/link.png" alt=""></a>
                    </ul>
                </div>
            </section>
            <footer id="footer" class="clearfix">
                <div class="f_logo">
                        <a href="#"><img src="./img/logo.png" alt=""></a>
                </div>
                <div class="f_menu">
                    <ul>
                        <a href="#">개인정보처리방침</a>
                        <a href="#">이메일</a>
                        <a href="#">회사정보</a>
                        <a href="#">무단수집정보</a>

                    </ul>
                 
                </div>
                <div class="f_cl">
                    <ul>
                        <address>
                            (우) 대표전화 : (000) 00-0000 팩스 : (000)000-000
                        </address>
                        <p>
                            Copylight ⓒ 2023. All rights reserved.
                        </p>
                    </ul>
                    
                </div>
            </footer>
        </section>
        <div id="layer">

            <em class="title">2023년 4월 13일 우천으로 인한<br> 공연취소 및 연기안내</em>
            <span class="desc">
                안녕하세요. 남도맛기행 운영진입니다. <br><br>
                금일 예정되어 있었던 각종 행사 및 공연이 우천으로 인하여<br>
                긴급하게 취소되어 양해 말씀 전달드리려 합니다.<br> 
                아쉽지만, 이후 방문해주시면<br>
                더 멋지고 화려한 공연과 각종 행사로 보답드리도록 하겠습니다.<br><br>
                감사합니다.
            </span>

            <span class="sub_desc">남도맛축제 운영위원회</span>
            <a href="#" class="close">닫기</a>
            

        </div>

    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script>
        //팝업창
        $(".click").click(function(){
            // $("#layer").show();
            $("#layer").fadeIn();
        })
        $(".close").click(function(){
            // $("#layer").hide();
            $("#layer").fadeOut();
        })

        $(".nav>ul>li").mouseover(function(){
            $(this).find(".sub").stop().slideDown(200)
        })
        $(".nav>ul>li").mouseleave(function(){
            $(this).find(".sub").stop().slideUp(200)
        })
    </script>
</body>
</html>
@charset "utf-8";
*{margin: 0;padding: 0; box-sizing: border-box;}
li{list-style: none;}
a{text-decoration: none; color: whitesmoke;}
img{display: block;}
.clearfix::after, clearfix::before{content: ""; display: block;clear: both;}
/* wrap */
#wrap{width: 1000px; margin: 0 auto; position: relative;}

/* header */
#header{width: 200px;height: 650px; float: left; background-color: white;}
/* .logo */
#header .logo{width: 100%; height: 100px; background-color: white;
    float: left;
}
#header .logo{}
#header .logo>a>img{padding-top: 25px;}

/* nav */
#header .nav{
    float: left; padding-left: 25px;
}
#header .nav>ul>li{width: 150px; height: 40px; display: block;
    background-color: darkblue; text-align: center; line-height: 40px;
    position: relative; 
}
#header .nav>ul>li:hover{background-color: dodgerblue;}
#header .nav>ul>li>a{}
#header .nav>ul>li>.sub{position: absolute;
    left: 150px; top: 0; display: none;}
#header .nav>ul>li>.sub>li{width: 150px; height: 40px; background-color: blueviolet; text-align: left;
}
#header .nav>ul>li>.sub>li>a{display: block; padding-left: 15px;}
#header .nav>ul>li>.sub>li:hover{background-color: violet;}

/* box */
#box{width: 800px; float: left;}

/* banner */
#banner{width: 100%;height: 350px; background-color: aquamarine; 
    position: relative;
}
#banner>ul>li{position: absolute;}

/* contents */
#contents{width: 100%; height: 200px; background-color: aliceblue;}
#contents >div{padding: 10px; width: 33.33%; height: 200px; float: left;}
#contents >div>h3{display: block; width: 100px; height: 40px; 
    background-color: darkblue; color: white; text-align: center; line-height: 40px;
}
#contents >div>ul{border-top: 2px solid darkblue;}

/* .notice */
#contents .notice{}
#contents .notice>ul{padding: 5px;}
#contents .notice>ul>li{
    padding-left: 5px; padding-top: 5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#contents .notice>ul>li>a{color: black; position: relative;}
#contents .notice>ul>li>a::before{position: absolute;
    content: ""; background-color: black;
    width: 3px; height: 3px; left: -5px; top: 10px;
}
/* .gallery */
#contents .gallery{ background-color: white;}
#contents .gallery>ul>li{float: left; padding: 5px; padding-top: 15px;}
#contents .gallery>ul>li:last-child{padding-right: 0;}
/* link */
#contents .link{}
#contents .link>ul>a>img{padding-top: 7px;}

/* footer */
#footer{background-color: white;}
#footer .f_logo{width: 200px; height: 100px; float: left;}
#footer .f_logo>a>img{padding-top: 30px;}

#footer .f_menu{width: 600px; height: 50px;float: left}
#footer .f_menu>ul{line-height: 50px; text-align: center; }
#footer .f_menu>ul>a{color: black; position: relative; padding: 5px;}
#footer .f_menu>ul>a::before{position: absolute; background-color: black;
    content: ""; width: 1px;height: 15px; top: 8px; left: -5px;
}
#footer .f_menu>ul>a:first-child::before{width: 0;}

#footer .f_cl{width: 600px; height: 50px;float: left;}
#footer .f_cl>ul{text-align: center;}
#footer .f_cl>address{font-size: 13px;}
#footer .f_cl>p{font-size: 15px;}

#layer{width: 500px; height: 400px; background-color: whitesmoke;
    position: absolute; left: 50%;top: 0%; 
    transform: translate(-50%, 50%);
    border: 3px solid darkblue; 
    padding: 20px;
    display: none;
}
#layer .title{font-style: normal; color: darkblue;
    font-size: 26px; display: block; line-height: 1.4; font-weight: bold;
    border-bottom: 3px solid darkblue; padding-bottom: 15px; margin-bottom: 20px;
}
#layer .span{
    display: block;
    font-weight: 700; 
}

#layer .sub_desc{
    display: block; margin-top: 15px;
    font-size: 16px; font-weight: bold; text-align: center;
}
#layer .close{display: block; line-height: 40px; text-align: center;
    width: 40px; height: 40px; background-color: darkblue;
    position: absolute; right: 0; bottom: 0;

}
저작자표시 비영리 동일조건 (새창열림)

'2023 > HTML' 카테고리의 다른 글

[HTML]  (0) 2023.04.18
[HTML] 필터  (0) 2023.04.14
[html] 축제 홈페이지 만들기  (0) 2023.04.12
[html] 웹페이지 구상  (0) 2023.04.11
[HTML] 유진건설 홈페이지 기본적인 틀 만들기  (0) 2023.04.11

관련글

티스토리툴바