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

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

비주얼 스튜디오 코드 19_ 연꽃축제 예제_banner, contents 넣기

조반짝 2023. 6. 8. 16:47

728x90

_배너

배너에 이미지 넣기

h2 - 제목 넣기

img - 배너 이미지 넣기

css- 제목 위치 잡아주기

배너 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">
</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">
            <article class="notoice">
                <h3>공지사항</h3>
                <ul>
                    <li></li>
                </ul>
            </article>
            <article class="gallery">
                <h3>갤러리</h3>
                <ul>
                    <li></li>
                </ul>
            </article>
            <article class="link">
                <h3>바로가기</h3>
                <ul>
                    <li></li>
                </ul>
            </article>
        </section>
        <footer id="footer"></footer>
    </div>

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

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

배너 css

#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{}

_컨텐츠

html-컨텐츠 내용 넣어주기

css-컨텐츠

배너가 위에 올라가게 되면 submenu에 z-index로 레이어층을 띄워줘야한다.

ul에서 boder-top으로 선을 넣어준다.

padding-top: 선 밑 10px 여백주기

a태그, span태그 : 인라인구조

인라인구조를 블럭구조로 바꿔줘야한다.

가상요소 넣어주기

li에 overflow: hidden; 에 사용하면 html에 li 각각에 clearfix에 주지 않아도 된다. 일정범위를 넘으면 다 잘라버린다.

단, nav에는 사용하지않음!!

nav에 clearfix만 사용

#contents .notice ul li에 overflow: hidden; 적용

컨텐츠_갤러리 넣어주기

컨텐츠_갤러리 html

 <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>

컨텐츠_갤러리css

#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);
}

컨텐츠_바로가기 만들어주기

바로가기까지 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">
</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">
                        <!-- 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"></footer>
    </div>

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

    <script>
        $(".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;
}

#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: 0;
    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: lightcyan;
}

728x90

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

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

비주얼 스튜디오 코드 21 _ 연꽃축제 예제 _ 팝업창 만들기 (0)	2023.06.09
비주얼 스튜디오 코드 20_ 연꽃축제 예제 _ footer (0)	2023.06.09
비주얼 스튜디오 코드18_ 연꽃축제 예제_header 사이드 (0)	2023.06.08
비주얼 스튜디오 코드 17_ 마우스 오버 효과 (0)	2023.06.08
비주얼 스튜디오 코드 16_ header 사이드에 넣기 (0)	2023.06.07

현재글비주얼 스튜디오 코드 19_ 연꽃축제 예제_banner, contents 넣기

조반짝의 도전일지

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

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

Today :
Yesterday :

조반짝의 도전일지