4일차 - :hover (3) + 애니메이션 효과

HTML

      <header id="hd">
        <div class="container d-flex justify-content-between align-items-center">
            <h1><a href=""><img src="" alt="">세계의 미술작품</a></h1>
            <ul id="gnb" class="d-flex">
                <!-- position:absolute는 나를 감깐 부모태그 중 position:relative 선언한 것만 부모로 인정 & 이를 기준으로 움직임 -->
                <li class="rel">
                    <a href="">소장처별</a>
                    <!-- 스타일 지정 시, 공통 클래스는 잡지 마라 .abr{} (X) -->
                    <ul class="abs">
                        <li><a href="">소메뉴1</a></li>
                        <li><a href="">소메뉴2</a></li>
                        <li><a href="">소메뉴3</a></li>
                    </ul>
                </li>
                <li><a href="">장르별</a></li>
                <li><a href="">테마별</a></li>
                <li><a href="">시대별</a></li>
            </ul>
        </div>
    </header>

CSS 스타일 추가

4. 애니메이션 효과 - hidden: overflow

힌트

• height: 160px;
• height: 0;
• transition: 0.5s;
• overflow: hidden; // 넘치면 막는다! overflow //

<style>
    #gnb > li:hover ul{ height: 160px; /* display: block; */ } 
    /* 애니메이션 사용하려면 auto이거나 display:none display:block 등 수치가 안되는 것 지워야 */
    
    #gnb ul{
            border: 1px solid #222;
            background-color: white;
            width: 120px;
				/* display: none; --------소메뉴 숨어!-------- */
            height: 0;
            transition: 0.5s;
            overflow: hidden; /* --------넘치면 막는다! overflow-------- */
    }
    #gnb ul a{ color: black; display: block; }
</style>

애니메이션 사용하려면 auto이거나 display:none display:block 등 수치가 안되는 것 지워야!

---

총정리

    <style>
    /* reset cdn */
        *{ margin: 0; padding: 0;}
        a{ color: #222222; text-decoration: none;}
        li, dt, dd{ list-style: none; }
        
    /* 공통 클래스 */
        .container { max-width: 1280px; margin: 0 auto;}
        
        .rel{ position: relative;}
        .abs{ position: absolute; }
        .d-block{ display: block;}        
        .d-none{ display: none;}

        .d-flex{ display: flex; }
        .justify-content-between{ justify-content: space-between; }
        .align-items-center{ align-items: center; }

    /* CSS layout */ /* 공통클래스를 절대 추가해서 쓰지 않는다. */
        #hd{ background-color: black; }
        #hd a{ color: white; } /* 이 집안의 모든 <a> 글자색 white */
        #hd h1 a { font-size: 2em; }

        #gnb li{ margin-left: 1rem; } /* 1rem만큼 글자간 여백 & 끝은 여백 없음 */
        #gnb li a{ 
            padding: 1rem; 
            border-radius: 30px; 
            transition: 0.5s; /* 트랜지션 */
        } 
        #gnb > li:hover > a{ background-color: yellow; color: black; }
        #gnb > li:hover ul{ height: 160px; } /* display: block; *//* 대메뉴 li에 마우스 올리면 소메뉴 등장 */
        #gnb ul{ 
            border: 1px solid black; 
            background-color: white; 
            width: 120px; 
            /* display: none;  *//* --------소메뉴 숨어!-------- */
            height: 0;
            transition: 0.5s;
            overflow: hidden; /* 넘치면 막는다 */
        }
        #gnb ul a{ color: black; display: block; }
    </style>

    <header id="hd">
        <div class="container d-flex justify-content-between align-items-center">
            <h1><a href="">세계의 미술작품</a></h1>
            <ul id="gnb" class="d-flex">
                <li class="rel">
                    <a href="">소장처별</a>
                    <ul class="abs">
                        <li><a href="">소메뉴1</a></li>
                        <li><a href="">소메뉴2</a></li>
                        <li><a href="">소메뉴3</a></li>
                    </ul>
                </li>
                <li><a href="">장르별</a>
                    <ul class="abs">
                        <li><a href="">소메뉴1</a></li>
                        <li><a href="">소메뉴2</a></li>
                        <li><a href="">소메뉴3</a></li>
                    </ul></li>
                <li><a href="">테마별</a>
                    <ul class="abs">
                        <li><a href="">소메뉴1</a></li>
                        <li><a href="">소메뉴2</a></li>
                        <li><a href="">소메뉴3</a></li>
                    </ul></li>
                <li><a href="">시대별</a>
                    <ul class="abs">
                        <li><a href="">소메뉴1</a></li>
                        <li><a href="">소메뉴2</a></li>
                        <li><a href="">소메뉴3</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </header>