4일차 - 공통 클래스

reset cdn

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

---

HTML

• 1단 메뉴 #hd>h1>a>img^^ul#gnb>li*4>a{대메뉴$}

공통클래스 .container 빼고 세팅하라. 공통클래스는 언제 사라질지 모름.
공통클래스 빼버리는 순간, 선택자 설계가 안 맞아 스타일 날아감!

<header id="hd">
        <div class="container">
            <h1><a href=""><img src="" alt="">png로고</a></h1>
            <ul id="gnb">
                <li><a href="">대메뉴1</a></li>
                <li><a href="">대메뉴2</a></li>
                <li><a href="">대메뉴3</a></li>
                <li><a href="">대메뉴4</a></li>
            </ul>
        </div>
    </header>

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

---

common (공통 클래스)

누구든지 쓸 수 있는 클래스

공통클래스 .container 빼고 세팅하라. 공통클래스는 언제 사라질지 모름.
공통클래스 빼버리는 순간, 선택자 설계가 안 맞아 스타일 날아감!

.container 컨테이너는 공통스타일로 둔다

• 데스크탑을 위한 max-width 지정 (반응형)
• 모바일을 위한 가로마진 auto & 가운데 정렬 (반응형)

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

EX) 공통 클래스 .container를 적용한 div

<div id="hd">
       <div class="container"></div>
   </div>
   <div class="container"></div>
   <footer>
       <div class="container"></div>
   </footer>

position: absolute, relative

position: relative;

• 서열을 지킴. 요소들이 포개지지 않음
• 가장 먼저 짤 것!
• 유기적으로 이동하는 자동 시스템

<style>
    .rel { position: relative; }
    .abs { position: absolute; }
</style>

position: absolute;

• ex.팝업, 채팅으로 문의하기 버튼
• 뒤에 페이지가 있든 없든 가리고 뜨는 팝업
• 서로 관계 없음

display: block, flex, none

<style>
    .d-block{ display: block; }
    .d-block{ display: flex; }
    .d-block{ display: none; }
</style>

display:flex

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

결론! 공통 클래스

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

    .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>

layout (초보자를 위한)

공통클래스를 절대 추가해서 쓰지 않는다

<style>
    #hd{}
    #hd    h1{}
    #hd    h1  a{}
    #gnb{}
    #gnb    li{}
    #gnb    li  a{}     
</style>