비주얼 스튜디오 코드 21 _ 연꽃축제 예제

☭DEVELOPER/#2 웹개발(자바기반 풀스택)

비주얼 스튜디오 코드 21 _ 연꽃축제 예제 _ 팝업창 만들기

조반짝 2023. 6. 9. 11:24

728x90

푸터까지 완성한 홈페이지

html 팝업창 내용 작성하기

<br> 엔터

미리보기에서 이렇게 뜨게됨

팝업창이 움직일 수 있도록 position: absolute; 명령을 주고 #wrap을 기준점으로 잡아 position: relative 명령을 준다.

absolute;는 절대주소이기 때문에 0,0에 위치하게 됨

그래서 left: 50%, top: 50%를 한다.

하지만 top: 50%가 적용이 안되는데 #header, #banner, #contents, #footer에 들어간 float으로 인해 높이값이 없어지기 때문에 :clearfix 대신 overflow:hidden을 사용한다. 단, 네비게이션에는 overflow:hidden 사용을 하지 말것!!

layer의 부모가 wrap이기 때문에 overflow:hidden과 position:realtive를 wrap에 넣어준다.

text-align: justify 문단의 양쪽 정렬

양쪽 정렬로 하면 가독성이 좋다.

닫기창을 움직이려면 팝업창에 absolute를 넣어서 닫기창은 팝업창을 기준으로 움직일 수 있다.

닫기창에 absolute를 넣어서 닫기창을 움직여준다. right, bottom 처음에 0으로 기준잡고 치수를 높여주면서 이동해주면된다.

팝업창 닫아주기

#layer에 display: none; 명령어로 팝업창이 감춰지도록한다.

공지사항을 클릭했을때 팝업창이 뜨도록해야함

공지사항 ul > li 에 clearfix click을 추가함

이벤트 명령어를 넣어주면 공지사항을 클릭했을 때 팝업창이 뜨게된다.

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">
    <link rel="stylesheet" href="./css/all.css">
</head>
<body>
    <div id="wrap">
        <header id="header">
            <h1 class="logo">
                <img src="./img/logo.png" alt="부여연꽃 축제 로고이미지">
            </h1>
            <nav 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>
                        </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>
            </nav>
        </header>
        <section id="banner">
            <h2>부여연꽃축제</h2>
            <img src="./img/banner.png" alt="연꽃배너이미지">
        </section>
        <section id="contents" class="clearfix">
            <!-- clearfix를 넣어줘야 footer가 위에 안올라옴 contents가 id라 class로 넣어줘야함-->
            <article class="notoice">
                <h3>공지사항</h3>
                <ul>
                    <li class="clearfix click">
                        <!-- a태그와 span태그에 float을 주기위해 clearfix를 준다. -->
                        <a href="#">부여 연꽃 축제기간이 06월 15일부터 시작됩니다.</a>
                        <span>05-30</span>
                    </li>
                    <li class="clearfix">
                        <a href="#">연꽃 축제기간 중 타지에서 오는 관광객에게 2,000원 할인 행사를 하고 있습니다.</a>
                        <span>05-25</span>
                    </li>
                    <li class="clearfix">
                        <a href="#">서울 구로구에 계시는 분들은 부여와 자매구로 5,000원 할인하고 있습니다.</a>
                        <span>05-25</span>
                    </li>
                    <li class="clearfix">
                        <a href="#">부여 연꽃 보러 많이 많이 오세요.</a>
                        <span>05-24</span>
                    </li>
                </ul>
            </article>
            <article class="gallery">
                <h3>갤러리</h3>
                <ul>
                    <li>
                        <img src="./img/gall_1.png" alt="연꽃갤러리이미지01">
                        <span>바로가기</span>
                    </li>
                    <li>
                        <img src="./img/gall_2.png" alt="연꽃갤러리이미지02">
                        <span>바로가기</span>
                    </li>
                    <li>
                        <img src="./img/gall_3.png" alt="연꽃갤러리이미지03">
                        <span>바로가기</span>
                    </li>
                </ul>
            </article>
            <article class="link">
                <h3>바로가기</h3>
                <ul>
                    <li>
                        <img src="./img/link.png" alt="바로가기이미지">
                        <span>바로가기</span>
                    </li>
                </ul>
            </article>
        </section>
        <footer id="footer" class="clearfix">
            <div class="f_copy">
                <address>서울특별시 구로구 구로1동 하이미디어빌딩 4층 102호 하이미디어</address>
                <p>copyright &copy; 하이미디어 C./, Ltd All Right Reserved.</p>
            </div>
            <div class="f_sns">
                <a href="#"><i class="fa-brands fa-square-facebook"></i></a>
                <a href="#"><i class="fa-brands fa-instagram"></i></a>
                <a href="#"><i class="fa-brands fa-square-twitter"></i></a>
            </div>
            <div class="f_f">
                <select>
                    <option selected="selected">패밀리사이트</option>
                    <option>문화체육관광부</option>
                    <option>한국관광공사</option>
                    <option>한국지역진흥재단</option>
                </select>
            </div>
        </footer>
        <!-- 팝업창 -->
       <div id="layer">
            <em class="title">
                2023년 6월 9일 우천으로 인한<br> 공연취소 및 연기안내
            </em>
            <span class="desc">
                안녕하세요. 부여 연꽃축제 운영진입니다<br><br>
                금일 예정되어 있었던 각종 행사 및 공연이 우천으로 인하여
                긴급하게 취소되어 양해 말씀 전달드립니다.
                아쉽지만, 이후 방문해주시면
                더 멋지고 화려한 공연과 각종 행사로 보답드리도록 하겠습니다
                <br><br>
                감사합니다.
            </span>
            <span class="sub_desc">부여 연꽃축제 운영위원회</span>
            <a href="#" class="close">닫기</a>
       </div>

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

    <!-- .min. 여백을 줄여서 용량이 적은 파일 -->

    <script>
        //팝업창
        $(".click").click(function(){
            // $("#layer").show(); //보이기
            $("#layer").fadeIn(500); //서서히 보여주는 명령어(0.5초 동안)
        });

        $(".close").click(function(){
            // $("#layer").hide();//감추기
            $("#layer").fadeOut(); //서서히 감춰주는 명령어(0.5초동안)
        });

        $(".nav>ul>li").hover(function(){
            //마우스 올렸을 때 이벤트
            $(this).find(".submenu").stop().slideDown(200);
        },function(){
            //마우스 내렸을 때 이벤트
            $(this).find(".submenu").stop().slideUp(200);
        });
    </script>
</body>
</html>

css

@charset "utf-8";

/*reset*/

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li{
    list-style: none;
}

a{
    text-decoration: none;
    color: #222;
}

img{
    display: block;
}

.clearfix::after, .clearfix::before{
    content: "";
    display: block;
    clear: both;
}

#wrap{
    width: 1000px;
    margin: 0 auto;
    position: relative;
    /*팝업창의 기준점*/
    overflow: hidden;
    /*#header, #banner, #contents, #footer을 float으로 인해
    높이값 살리기 :clearfix 대신 사용, 단 네비게이션에는 쓰지 말자*/
}



#header{
    width: 300px;
    float: left;
    height: 650px;
    /* background-color: lightblue; */
}

#header .logo{
    width: 300px;
    height: 150px;
    /*가운데정렬 삼총사*/
    display: flex; /*flex는 반드시 부모한테 넣어라*/
    align-items: center;
    justify-content: center;
    /* background-color: beige; */
}

#header .logo img{}

#header .nav{}
#header .nav ul{}
#header .nav ul li{
    width: 100%;
    position: relative;
}
#header .nav ul li a{
    background-color: #FD89A5;
    display: block;
    line-height: 40px;
    /*줄간격 높여주기*/
    color: #fff;
    font-size: 18px;
    /* text-align: center; */
    padding-left: 70px;
    /*글자 안쪽 정렬*/
}
#header .nav ul li a:hover{
    background-color: lightgreen;
}
#header .nav ul li ul.submenu{
    display: none;
    position: absolute;
    top:0;
    left: 300px;
    width: 100%;
    z-index: 10;
}
#header .nav ul li ul.submenu li{}
#header .nav ul li ul.submenu li a{
    background-color: lightpink;
    padding-left: 90px;
    color: #222;
}
#header .nav ul li ul.submenu li a:hover{
    background-color: lightgreen;
}

#banner{
    width: 700px;
    float: left;
    position: relative;
}

#banner h2{
    position: absolute;
    left: 5%;
    bottom: 10%;
    /* background-color: white; */
    padding: 15px;
    border-radius: 28%;
    /* opacity: 0.5; */
    /* transform: translate(-50%,-50%); */
    color: #000;
    font-size: 40px;
    text-shadow: 5px 5px 5px #fff;
}
#banner img{}


#contents{
    width: 700px;
    float: left;

}

#contents > article{
    width: 33.33%;
    height: 200px;
    padding: 10px;
    /*left, tap 여백10주기*/
    float: left;
}
#contents > article>h3{
    background-color: #FD89A5;
    color: white;
    /* 사각형 90*40px radius적용 */
    width: 90px;
    height: 40px;
    border-radius: 10px 10px 0 0;
    text-align: center;
    line-height: 40px;
}
#contents > article>ul{
    border-top: 1.7px solid #FD89A5;
    padding-top: 10px;
    /*선 밑 10px 여백주기*/
}


#contents .notoice{}
#contents .notoice ul{}
#contents .notoice ul li{
    padding: 5px 0;
    /*줄간격*/
    position: relative;
    /*가상요소 기준점*/
    font-size: 14px;
}

#contents .notoice ul li::before{
    /*가상요소 넣어주기*/
    content: "";
    position: absolute;
    top: 15px;
    left: 0;
    width: 3px;
    height: 3px;
    background-color: #FD89A5;
    
}

#contents .notoice ul li a{
    /* background-color: #999; */
    display: block;
    width: 70%;
    float: left;
    /*왼쪽 배치하기 위해 float띄워줌*/
    white-space: nowrap;
    overflow: hidden;
    /*일정범위가 넘어가면 대상을 숨겨주어라*/
    text-overflow: ellipsis;
    /*텍스트가 일정범위를 넘었을 때 ...넣어라*/
    padding-left: 10px;
    /*왼쪽 여백 들여쓰기*/
}
#contents .notoice ul li span{
    /* background-color: #666; */
    display: block;
    width: 25%;
    float: right;
    /*오른쪽 배치하기 위해 float띄워줌*/
    text-align: right;
    /*글자 오른쪽 정렬*/
}

#contents .gallery{}
#contents .gallery ul{
}
#contents .gallery ul li{
    float: left;
    margin-right: 10px;
    overflow: hidden;
    width: 64px;
    height: 129px;
    /*overflow:hidden시에 li의 너비, 높이값을 넣어줘야 된다.*/
}

#contents .gallery ul li:last-child{
    margin-right: 0;
}

#contents .gallery ul li img{}
#contents .gallery ul li span{
    width: 64px;
    height: 40px;
    font-size: 10px;
    background-color: #000;
    display: block;
    opacity: 0.3;
    color: #fff;
    text-align: center;
    transition: 0.5s;
}

#contents .gallery ul li:hover span{
    transform: translateY(-40px);
}

#contents .link{}
#contents .link ul{}
#contents .link ul li{
   position: relative;
}
#contents .link ul li img{}
#contents .link ul li span{
    width: 213px;
    height: 129px;
    font-size: 12px;
    background-color: white;
    display: block;
    opacity: 0.5;
    color: #666;
    text-align: center;
    line-height: 129px;
    transition: 0.5s;
    position: absolute;
    top: 0;
    left: 0;
}

#contents .link ul li:hover span{
    opacity: 0;
}



#footer{
    width: 700px;
    float: left;
    height: 100px;
    background-color: #FD89A5;
}

#footer>div{
    width: 200px;
    height: 50px;
    float: left;
    padding: 10px;
}
#footer .f_copy{
    /* background-color: #999; */
    width: 500px;
    height: 100px;
    padding-top: 30px;
    text-align: center;
    color: #fff;
}

#footer .f_copy address{
    font-style: normal;
}

#footer .f_sns{
    /* background-color: #888; */
    text-align: center;    
}

#footer .f_sns a{
    font-size: 25px;
    margin-right: 10px;
    color: #fff;
}


#footer .f_sns a:last-child{
    margin-right: 0;
}

#footer .f_f{
    /* background-color: #777; */
    display: flex;
    /* align-items: center; */
    justify-content: center;
}

#layer{
    position: absolute;
    /*절대주소, 기본으로 0,0에 위치하게 됨*/
    left: 50%;
    top: 50%;
    background-color: #fff;
    transform: translate(-50%,-50%);
    width: 500px;
    height: 400px;
    border: 5px solid  #FD89A5;
    z-index: 100;
    /*subnav가 위에 뜨지 않게 하기 위해서 z-index로 팝업창을 맨위로 가게함*/
    padding: 20px;
    display: none;   
}

#layer .title{
    display: block;
    /*밑으로 떨어지게 만듦*/
    font-size: 26px;
    text-align: center;
    font-weight: 700;
    font-style: normal;
    border-bottom: 2px solid  #bdbdbd;
    padding-bottom: 20px;
    /*선의 윗부분 줄 여백주기*/
    margin-bottom: 20px;
    /*선의 밑부분 줄 여백주기*/
    line-height: 1.4;/*한글에서 140%*/
    /*문자 줄간격*/
}

#layer .desc{
    display: block;
    padding: 10px;
    font-size: 14px;
    /* text-align: center; */
    text-align: justify;
    /* 문단의 양쪽정렬 */
}

#layer .sub_desc{
    display: block;
    text-align: center;
    font-weight: 700;
}

#layer .close{
    position: absolute;
    right: 5px;
    bottom: 5px;
    background-color: #FD89A5;
    color: #fff;
    padding: 12px 15px;
    /*직사각형 만들어주기*/
    font-weight: bold;
}

728x90

저작자표시 비영리 변경금지

'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글

비주얼 스튜디오 코드 23_ 마우스오버 효과② (0)	2023.06.12
비주얼 스튜디오 코드 22_ 탭 메뉴 (0)	2023.06.09
비주얼 스튜디오 코드 20_ 연꽃축제 예제 _ footer (0)	2023.06.09
비주얼 스튜디오 코드 19_ 연꽃축제 예제_banner, contents 넣기 (0)	2023.06.08
비주얼 스튜디오 코드18_ 연꽃축제 예제_header 사이드 (0)	2023.06.08

현재글비주얼 스튜디오 코드 21 _ 연꽃축제 예제 _ 팝업창 만들기

조반짝의 도전일지

공부, 취미, 여행 모두 경험해보고 싶은 조반짝의 도전일지입니다. ✨contact_ looby777@naver.com ✨Instagram_holylovuuu_illust

media, 프론트엔드, Parallax, For문, float, 웹디자인, 자바스크립트, offset, CSS, 비주얼스튜디오코드, ACTIVE, HTML, SQL, JavaScript, 코딩테스트, Java, 자바, position, 이클립스, if문,

Today :
Yesterday :

조반짝의 도전일지