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

비주얼 스튜디오 코드 16_ header 사이드에 넣기

조반짝 2023. 6. 7. 18:20
728x90
반응형

01 헤더 사이드로 보내기

#header, #banner, #contents, #footer 에 float: left;를 넣어 주면 헤더가 사이드에 오게 된다.

 

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>Document</title>
    <link rel="stylesheet" href="./css/style3.css">
</head>
<body>
    <div id="wrap">
        <header id="header">
            <h1 class="logo">
                <img src="./logo.png" alt="로고이미지">
            </h1>
            <nav class="nav">네비</nav>
        </header>
        <section id="banner">배너영역</section>
        <section id="contents">컨텐츠영역</section>
        <footer id="footer">푸터영역</footer>
    </div>

</body>
</html>

css

@charset "utf-8";
/*reset*/

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

li{
    list-style: none;
}

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

img{
    display: block;
}

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

#wrap{
    width: 1200px;
    margin: 0 auto;

}

#header{
    width: 300px;
    height: 750px;
    background-color: #666;
    float: left;   
}

#header .logo{
    width: 300px;
    height: 150px;
    background-color: #e3f2fd;
    /* text-align: center;
    line-height: 150px; */
    /*이미지를 넣을때는 text-align, line-height이 적용이 안됨*/
    display: flex;
    align-items: center; /*세로 가운데 정렬*/
    justify-content: center; /*가로 가운데 정렬*/
    /*이미지 적용시 가운데 정렬(블럭구조의 가운데 정렬)*/
}

#header .logo img{

}
#header .nav{}

#banner{
    width: 900px;
    height: 450px;
    background-color: #999;
    float: left;
}

#contents{
    width: 900px;
    height: 200px;
    background-color: #888;
    float: left;
}

#footer{
    width: 900px;
    height: 100px;
    background-color: #777;
    float: left;
}

02 가운데 정렬하기 _ flex

 

인라인 구조(텍스트)

text-align: center;
line-height: 150px;

블럭구조(이미지)

display: flex;
    align-items: center; /*세로 가운데 정렬*/
    justify-content: center; /*가로 가운데 정렬*/
    /*이미지 적용시 가운데 정렬(블럭구조의 가운데 정렬)*/

로고가 이미지일 때 부모에 가운데정렬(display:flex...) 명령을 넣어줘야한다.

#header .logo{
    width: 300px;
    height: 150px;
    background-color: #e3f2fd;
    /* text-align: center;
    line-height: 150px; */
    /*이미지를 넣을때는 text-align, line-height이 적용이 안됨*/
    display: flex;
    align-items: center; /*세로 가운데 정렬*/
    justify-content: center; /*가로 가운데 정렬*/
    /*이미지 적용시 가운데 정렬(블럭구조의 가운데 정렬)*/
}

#header .logo img{

}

 

헤더가 사이드에 있으면 네비게이션에는 float 안 띄워도 됨

 

네비게이션 아코디언효과

<!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>Document</title>
    <link rel="stylesheet" href="./css/style3.css">
</head>
<body>
    <div id="wrap">
        <header id="header">
            <h1 class="logo">
                <img src="./logo.png" alt="로고이미지">
            </h1>
            <nav class="nav">
                <ul>
                    <li><a href="#">메뉴1</a>
                        <ul class="submenu">
                            <li><a href="#">서브메뉴1</a></li>
                            <li><a href="#">서브메뉴1</a></li>
                            <li><a href="#">서브메뉴1</a></li>
                            <li><a href="#">서브메뉴1</a></li>
                        </ul>
                    </li>
                    <li><a href="#">메뉴2</a>
                        <ul class="submenu">
                            <li><a href="#">서브메뉴2</a></li>
                            <li><a href="#">서브메뉴2</a></li>
                            <li><a href="#">서브메뉴2</a></li>
                            <li><a href="#">서브메뉴2</a></li>
                        </ul>
                    </li>
                    <li><a href="#">메뉴3</a>
                        <ul class="submenu">
                            <li><a href="#">서브메뉴3</a></li>
                            <li><a href="#">서브메뉴3</a></li>
                            <li><a href="#">서브메뉴3</a></li>
                            <li><a href="#">서브메뉴3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">메뉴4</a>
                        <ul class="submenu">
                            <li><a href="#">서브메뉴4</a></li>
                            <li><a href="#">서브메뉴4</a></li>
                            <li><a href="#">서브메뉴4</a></li>
                            <li><a href="#">서브메뉴4</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").mouseover(function(){
        $(this).find(".submenu").stop().slideDown(200);
    });

    $(".nav>ul>li").mouseout(function(){
        $(this).find(".submenu").stop().slideUp(200);
    });

    </script>
</body>

    
</html>
@charset "utf-8";
/*reset*/

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

li{
    list-style: none;
}

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

img{
    display: block;
}

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

#wrap{
    width: 1200px;
    margin: 0 auto;

}

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

#header .logo{
    width: 300px;
    height: 150px;
    background-color: #e3f2fd;
    /* text-align: center;
    line-height: 150px; */
    /*이미지를 넣을때는 text-align, line-height이 적용이 안됨*/
    display: flex;
    align-items: center; /*세로 가운데 정렬*/
    justify-content: center; /*가로 가운데 정렬*/
    /*이미지 적용시 가운데 정렬(블럭구조의 가운데 정렬)*/
}

#header .logo img{}
#header .nav{}
#header .nav ul{}
#header .nav ul li{
   position: relative;
}

#header .nav ul li a{
    background-color: darkblue;
    display: block;
    /*텍스트 블럭구조로 변경*/
    color: #fff;
    text-align: center;
    line-height: 50px;
}

#header .nav ul li:hover{}
   
#header .nav ul li .submenu{
    display: none;
    
}

#header .nav ul li .submenu li{}

#header .nav ul li .submenu li a{
    background-color: lightblue;
    color: #000;
}

#header .nav ul li .submenu li a:hover{
    background-color: aquamarine;
}

#banner{
    width: 900px;
    height: 450px;
    background-color: #999;
    float: left;
}

#contents{
    width: 900px;
    height: 200px;
    background-color: #888;
    float: left;
}

#footer{
    width: 900px;
    height: 100px;
    background-color: #777;
    float: left;
}

 

네비게이션 사이드로 나오게하기

 

 

<!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>Document</title>
    <link rel="stylesheet" href="./css/style3.css">
</head>
<body>
    <div id="wrap">
        <header id="header">
            <h1 class="logo">
                <img src="./logo.png" alt="로고이미지">
            </h1>
            <nav class="nav">
                <ul>
                    <li><a href="#">메뉴1</a>
                        <ul class="submenu">
                            <li><a href="#">서브메뉴1</a></li>
                            <li><a href="#">서브메뉴1</a></li>
                            <li><a href="#">서브메뉴1</a></li>
                            <li><a href="#">서브메뉴1</a></li>
                        </ul>
                    </li>
                    <li><a href="#">메뉴2</a>
                        <ul class="submenu">
                            <li><a href="#">서브메뉴2</a></li>
                            <li><a href="#">서브메뉴2</a></li>
                            <li><a href="#">서브메뉴2</a></li>
                            <li><a href="#">서브메뉴2</a></li>
                        </ul>
                    </li>
                    <li><a href="#">메뉴3</a>
                        <ul class="submenu">
                            <li><a href="#">서브메뉴3</a></li>
                            <li><a href="#">서브메뉴3</a></li>
                            <li><a href="#">서브메뉴3</a></li>
                            <li><a href="#">서브메뉴3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">메뉴4</a>
                        <ul class="submenu">
                            <li><a href="#">서브메뉴4</a></li>
                            <li><a href="#">서브메뉴4</a></li>
                            <li><a href="#">서브메뉴4</a></li>
                            <li><a href="#">서브메뉴4</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").mouseover(function(){
        $(this).find(".submenu").stop().slideDown(200);
    });

    $(".nav>ul>li").mouseout(function(){
        $(this).find(".submenu").stop().slideUp(200);
    });

    </script>
</body>

    
</html>
@charset "utf-8";
/*reset*/

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

li{
    list-style: none;
}

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

img{
    display: block;
}

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

#wrap{
    width: 1200px;
    margin: 0 auto;

}

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

#header .logo{
    width: 300px;
    height: 150px;
    background-color: #e3f2fd;
    /* text-align: center;
    line-height: 150px; */
    /*이미지를 넣을때는 text-align, line-height이 적용이 안됨*/
    display: flex;
    align-items: center; /*세로 가운데 정렬*/
    justify-content: center; /*가로 가운데 정렬*/
    /*이미지 적용시 가운데 정렬(블럭구조의 가운데 정렬)*/
}

#header .logo img{}
#header .nav{}
#header .nav ul{}
#header .nav ul li{
   position: relative;
}

#header .nav ul li a{
    background-color: darkblue;
    display: block;
    /*텍스트 블럭구조로 변경*/
    color: #fff;
    text-align: center;
    line-height: 50px;
}

#header .nav ul li:hover{}
   
#header .nav ul li .submenu{
    display: none;
    position: absolute;
    width: 100%;
    /*포지션 시 너비값 초기화되기 때문에 너비값 다시 지정*/
    left: 300px;
    top: 0;
    z-index: 10;
}

#header .nav ul li .submenu li{}

#header .nav ul li .submenu li a{
    background-color: lightblue;
    color: #000;
}

#header .nav ul li .submenu li a:hover{
    background-color: aquamarine;
}

#banner{
    width: 900px;
    height: 450px;
    background-color: #999;
    float: left;
}

#contents{
    width: 900px;
    height: 200px;
    background-color: #888;
    float: left;
}

#footer{
    width: 900px;
    height: 100px;
    background-color: #777;
    float: left;
}
728x90
반응형
저작자표시 비영리 변경금지

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

비주얼 스튜디오 코드18_ 연꽃축제 예제_header 사이드  (0) 2023.06.08
비주얼 스튜디오 코드 17_ 마우스 오버 효과  (0) 2023.06.08
비주얼 스튜디오 코드⑮ 트렌스폼을 이용해서 효과주기_2  (0) 2023.06.07
비주얼 스튜디오 코드⑭ 피그마이용해서 이미지크기 조절 ㅣ 콘텐츠 모양을 자유롭게 변형하기_2  (0) 2023.06.05
비주얼 스튜디오 코드⑬ 콘텐츠 모양을 자유롭게 변형하기  (0) 2023.06.05

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

  • 현재글비주얼 스튜디오 코드 16_ header 사이드에 넣기

관련글

티스토리툴바