2일차 - 에밋 & 1뎁스, 2뎁스

네비게이션 3종류

• GNB 글로벌 네비게이션 : 항상 노출 (위쪽)
• LNG 로컬 네비게이션 : 특정 페이지 (왼쪽)
• CNB 컨텐츠 네비게이션 : 컨텐츠 분리 (탭처럼 숨어있는 것)

에밋을 복사해 1단 메뉴 만들기 (1뎁스)

에밋 Emmet

header#hd>.container>h1>a>img^^ul#gnb>li.gnb*4>a{대메뉴}

    <header id="hd">
        <div class="container">
            <h1><a href="">로고</a></h1>
            <ul id="gnb">
                <li class="gnb1"><a href="">대메뉴1</a></li>
                <li class="gnb2"><a href="">대메뉴2</a></li>
                <li class="gnb3"><a href="">대메뉴3</a></li>
                <li class="gnb4"><a href="">대메뉴4</a></li>
            </ul>
        </div>
    </header>

을 복사해 1단 메뉴 만들기

header#hd>.container>h1>a>img^^ul#gnb>li*4>a{}

분할하기

header#hd   .container  h1  a  img
header#hd   .container  ul#gnb  li    a{}

1뎁스 메뉴 만들기

header#hd{}
header#hd   .container{}
header#hd   .container  h1{} 		/* #hd h1{} 동일*/
header#hd   .container  h1  a{}
header#hd   .container  h1  a  img{}

header#hd{}
header#hd   .container{}
header#hd   .container  ul#gnb{} 		/* #gnb 동일*/
header#hd   .container  ul#gnb  li{}
header#hd   .container  ul#gnb  li    a{}	 /* #gnb a{} 동일*/

에밋을 복사해 2단 메뉴 만들기 (2뎁스) -중략-

소메뉴가 있는 2단 메뉴(2뎁스) emmet

header#hd
	.container
		h1 > a > img
		ul#gnb > li*4 > a + ul.d2 > li*4 > a

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

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