5일차 - 헤더 세팅 복습&마무리!

1. reset cdn

<style>
    *{ margin: 0; padding: 0; }
    a{ color: #222222; text-decoration: none; }
    li, dt, dd{ list-style: none; }
</style>

2. 2단 메뉴

항상! <블록 태그> 안에 <인라인 태그>를 넣어야 함

• a*4 (X)
• li*4>a (O)

1단메뉴 header#hd>.container>h1>a>img^^ul#gnb>li*4>a

2단메뉴
header#hd>.container>h1>a>img^^ul#gnb>li4>a.d1{대메뉴$}+ul.d2>li5>a{소메뉴}

header#hd>.container>h1>a>img^^ul#gnb>li.d1_li4>a.d1_a{대메뉴$}+ul.d2_ul>li5>a{소메뉴}

header#hd>.container.d-flex.justify-content-between.align-items-center>h1>a>img^^ul#gnb>li.d1_li.position-relative4>a.d1_a{대메뉴$}+ul.d2_ul.position-absolute>li5>a{소메뉴}

    <header id="hd">
        <div class="container">
            <h1><a href=""><img src="" alt="">로고</a></h1>
            <ul id="gnb">
                <li>
                    <a href="">대메뉴</a>
                    <ul class="d2">
                        <li><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>
                </li>
                <li>
                    <a href="">대메뉴</a>
                    <ul class="d2">
                        <li><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>
                </li>
                <li>
                    <a href="">대메뉴</a>
                    <ul class="d2">
                        <li><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>
                </li>
                <li>
                    <a href="">대메뉴</a>
                    <ul class="d2">
                        <li><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>
                </li>
            </ul>
        </div>
    </header>

3. 공통 클래스

<style>
    .container{ max-width:1200px; margin: 0 auto; }
</style>

4. CSS 스타일 추가추가

4-1. 대메뉴 a에만 글자색 white

<style>
	.container{ max-width:1200px; margin: 0 auto; }
    
    #hd{ background-color: #222; }
    #gnb >li > a{ color: white; font-size: 2em; line-height: 1; }
</style>

4-2. 자식들을 정렬하기 위해 부모에 display:flex 지정

<style>
    .container{ max-width:1200px; margin: 0 auto; }
    #hd{ background-color: #222; }
    #gnb >li > a{ color: white; font-size: 2em; line-height: 1; }

    #hd .container{
    	display: flex;
    	justify-content: space-between;
    	align-items: center;
    }
    
    #gnb >li > a{ color: white; font-size: 2em; line-height: 1; }
</style>

4-3. 부모에 #gnb{ display: flex; } 지정2

<style>
    .container{ max-width:1200px; margin: 0 auto; }
    #hd{ background-color: #222; }
    #gnb >li > a{ color: white; font-size: 2em; line-height: 1; }

    #hd .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    }

    #gnb{ display: flex; }

    #gnb >li > a{ color: white; font-size: 2em; line-height: 1; }
</style>

4-4. position: absolute의 부모 태그에 position: relative; 지정

<style>
    .container{ max-width:1200px; margin: 0 auto; }
    #hd{ background-color: #222; }
    #gnb >li > a{ color: white; font-size: 2em; line-height: 1; }

    #hd .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    }
    #gnb{ display: flex; }

    #gnb > li { position: relative; }
    #gnb ul{ position: absolute; }

    #gnb >li > a{ color: white; font-size: 2em; line-height: 1; }
</style>

완성품 다시보기

HTML 다시보기

    <header id="hd">
        <div class="container">
            <h1><a href=""><img src="" alt="">로고</a></h1>
            <ul id="gnb">
                <li>
                    <a href="">대메뉴</a>
                    <ul class="d2">
                        <li><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>
                </li>
                <li>
                    <a href="">대메뉴</a>
                    <ul class="d2">
                        <li><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>
                </li>
                <li>
                    <a href="">대메뉴</a>
                    <ul class="d2">
                        <li><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>
                </li>
                <li>
                    <a href="">대메뉴</a>
                    <ul class="d2">
                        <li><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>
                </li>
            </ul>
        </div>
    </header>

+) position: absolute + left:100%