6일차 - 로고 SVG 파일 (3)

9.

HTML

    <header id="hd" class="rel">
        <div class="container d-flex justify-content-between align-items-center">
            <h1><a href="#none"  class="d-block">
                <img src="./img/logo.svg" alt="" class="d-block">
                <img src="./img/logo_w.svg" alt="" class="d-block">
                </a>
            </h1>
            <ul id="gnb" class="d-flex">
                <li class="rel">
                    <a href="#none" class="d1">회사소개</a>
                    <ul class="abs d2">
                        <li><a href="#none">소메뉴</a></li>
                        <li><a href="#none">소메뉴</a></li>
                        <li><a href="#none">소메뉴</a></li>
                        <li><a href="#none">소메뉴</a></li>
                        <li><a href="#none">찾아오시는길</a></li>
                    </ul>
                </li>
                <li class="rel">
                    <a href="#none" class="d1">견적</a>
                    <ul class="abs d2">
                        <li><a href="#none">소메뉴</a></li>
                        <li><a href="#none">소메뉴</a></li>
                    </ul>
                </li>
                <li class="rel">
                    <a href="#none" class="d1">대메뉴</a>
                    <ul class="abs d2">
                        <li><a href="#none">소메뉴</a></li>
                        <li><a href="#none">소메뉴</a></li>
                        <li><a href="#none">소메뉴</a></li>
                        <li><a href="#none">소메뉴</a></li>
                        <li><a href="#none">소메뉴</a></li>
                    </ul>
                </li>
                <li class="rel">
                    <a href="#none" class="d1">대메뉴</a>
                    <ul class="abs d2">
                        <li><a href="#none">소메뉴</a></li>
                        <li><a href="#none">소메뉴</a></li>
                        <li><a href="#none">소메뉴</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </header>

9-1. #gnb 안의 모든 a태그에 display: block

a태그, img 태그 = 인라인 태그 (margin 좌우는 먹는데, 상하는 안 먹음)
↓↓↓
display: block; 인라인 태그를 블록형으로 지정, 블록 스타일 적용 가능!
display: inline-block; 인라인-블록형으로 지정, 블록 스타일 적용 가능!

<style>             
  	#hd{ background-color: black; padding: 1rem 0;} 
    #hd h1 img{ height: calc(100% - 1rem); }
  
	#hd h1 img:nth-child(2),
    #hd h1:hover img:nth-child(1) { display:none; }
  	/* --------logo_w 숨어!-------- */
  	/* display: block;과 콤비, logo에 마우스 올리면 logo_w 등장 */

    #hd h1:hover img:nth-child(2),
    #hd h1 img:nth-child(1) { display:block; }
  	/* logo에 마우스 올리면 display: block;(logo_w) 재등장 */

    #gnb a{ display: block; } /* #gnb 안의 모든 a태그에 display: block */
    
	#gnb .d1{ 
    color:white; /* 대메뉴만 흰색 */
    font-size: 2em; 
    padding: 1rem 1.5rem; /* width값 x padding으로 */
	}      
</style>

padding: 1rem 1.5rem; 인라인 태그 a는 width값 x, padding으로!

9-2. 소메뉴 :hover (추가)

<style>                     
    #gnb .d2{
    background-color: yellow;
    font-size: 1.2rem;
    padding: 0 1.5rem;
    line-height: 2;
    left: 0;
    right: 0;
    height: 0;
    overflow: hidden;
    transition: 0.5s;
	}
    
    #gnb li:hover .d2{ height: 160px; }
</style>

9-3. 소메뉴 갯수마다 창 높이 다르게 열리기

#gnb li:hover .d2{ height: 160px; } :nth-child로 각각 높이 값 주기!
+) .d2가 아닌, li에 :hover!

• li 높이 = 폰트사이즈 1.2rem * line-height 2 = 2.4rem
  
• li 높이(2.4rem) * 5 (소메뉴 갯수) + 3 (padding-top 1.5rem + padding-bottom 1.5rem)
  

<style>
    /* ----- 소메뉴 hover ----- */
    #gnb .d2{
        background-color: yellow;
        font-size: 1.2rem;
        padding: 0 1.5rem;
        line-height: 2;
        left: 0;
        right: 0;
        height: 0;
        overflow: hidden;
        transition: 0.5s;
    }
    /* #gnb li:hover .d2{ height: 160px; } */
    /* ----- 소메뉴 hover ----- */

	/* ----- 소메뉴 갯수마다 창 높이 다르게 열리기 ----- */
    #gnb li:nth-child(1):hover .d2{
        height: calc( 2.4rem * 5 + 3rem );
    }

    #gnb li:nth-child(2):hover .d2{
        height: calc( 2.4rem * 2 + 3rem );
    }

    #gnb li:nth-child(3):hover .d2{
        height: calc( 2.4rem * 5 + 3rem );
    }

    #gnb li:nth-child(4):hover .d2{
        height: calc( 2.4rem * 3 + 3rem );
    }
	/* ----- 소메뉴 갯수마다 창 높이 다르게 열리기 ----- */
    
    #gnb li:hover .d1 { color: yellow; } /* 예쁘게 대메뉴에 색넣기 */
</style>

10. 소메뉴 위아래 여백 주기

첫 번째 자식에 margin-top 주지 않기!!!!! padding(탐/바텀) 쓴다!!!!!

<style>
    /* 나의 답 */
    /* #gnb li:hover li a{ margin-top: 12px; } */

    #gnb .d2 li:first-child{
        padding-top: 1.5rem;
    }

    #gnb .d2 li:last-child{
        padding-bottom: 1.5rem;
    }
</style>