4일차 - reset cdn -> 공통 클래스

reset cdn

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">
            <li><a href="">소장처별</a></li>
            <li><a href="">장르별</a></li>
            <li><a href="">테마별</a></li>
            <li><a href="">시대별</a></li>
        </ul>
    </div>
</header>

reset cdn 추가

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

    .rel { position: relative; }
    .abs { position: absolute; }
                        
    .d-block{ display: block; }
    .d-block{ display: flex; }
    .d-block{ display: none; }
        
    .d-flex{ display: flex; }
    .justify-content-between{ justify-content: space-between; }
    .align-items-center{ align-items: center; }
</style>

공통 클래스 (CSS 스타일 추가)

<style>
    #hd{ background-color: black;} /* 이 집안의 모든 <a> 글자색 white */
    #hd a{ color: white; }

    #hd h1 a { font-size: 2em; }
    #gnb { margin-left: auto; }
    
    #gnb li{ margin-left: 2rem; } /* 글자 여백 떨어지게 & 막내는 여백 없게 */
</style>