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

비주얼 스튜디오 코드18_ 연꽃축제 예제_header 사이드

조반짝 2023. 6. 8. 11:02
728x90
반응형

<와이어프레임>

html

css

헤더, 배너, 컨텐츠, 푸터에 각각 float:left 명령을 넣어줘야 header가 side에 들어가게됨

 

헤더부분 html

css - 헤더로고

html - nav영역 넣어주기

css - nav영역 넣어주기

j-query -nav 

네비게이션-아코디언 형식 

네비게이션 - 사이드 형식

전체 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"></section>
        <section id="contents"></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%;
}
#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: greenyellow;
}

#banner{
    width: 700px;
    float: left;
    height: 350px;
    background-color: lightcoral;
}
#contents{
    width: 700px;
    float: left;
    height: 200px;
    background-color: lightskyblue;
}
#footer{
    width: 700px;
    float: left;
    height: 100px;
    background-color: lightcyan;
}

submenu 길게 늘리고 싶을 때

submenu에 height과 배경색을 넣어주면된다.

728x90
반응형
저작자표시 비영리 변경금지

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

비주얼 스튜디오 코드 20_ 연꽃축제 예제 _ footer  (0) 2023.06.09
비주얼 스튜디오 코드 19_ 연꽃축제 예제_banner, contents 넣기  (0) 2023.06.08
비주얼 스튜디오 코드 17_ 마우스 오버 효과  (0) 2023.06.08
비주얼 스튜디오 코드 16_ header 사이드에 넣기  (0) 2023.06.07
비주얼 스튜디오 코드⑮ 트렌스폼을 이용해서 효과주기_2  (0) 2023.06.07

'☭DEVELOPER/#2 웹개발(자바기반 풀스택)'의 다른글

  • 현재글비주얼 스튜디오 코드18_ 연꽃축제 예제_header 사이드

관련글

티스토리툴바