[Onepage 코딩하기] 쇼핑몰 메인페이지 - header&nav편 + 햄버거 메뉴창 만들기

이번에 코딩과제로 받았던 페이지는 TIFFANY&PRISM의 메인화면 

실제로 있는 페이지 인것 같지는 않고 기초로 쉽게 따라할수 있게 제작된듯?

 

이번에는 header과 nav의 html 코딩과정을 업로드 해보려한다.

그 중, 이번편은 민트색 부분 header과 분홍색 부분 nav제작과정

header

div를 크게하나 만들고 그안에 다시 div를 만든후 h1, ul>li요소를 넣어준다.

그 후 햄버거 버튼은 p>span*5로 제작했다.

<div id="Wrap">
  <header>
    <div>
      <h1>
        <a href="#"><img src="images/logo.png" alt="
        Tiffany & Prism"></a>
      </h1>
      <ul>
        <li><a href="#">sign up</a></li>
        <li><a href="#">sign in</a></li>
      </ul>
    </div>
      <p id="btn">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </p>
  </header>
  </div>

nav

nav안에 명칭인 h2 메인네비게이션과 div요소를 넣어준다.

div요소 안에는 ul과 li로 각각의 칸들을 만들어주고 누르면 나오는 네비게이션은 다시 ul과 li로 코딩해준다.

<nav>
      <h2 class="hide">메인네비게이션</h2>
      <div>
        <ul>
          <li><a href="#">COLLECTIONS</a>
            <ul>
              <li><a href="#">submenu01</a></li>
              <li><a href="#">submenu02</a></li>
              <li><a href="#">submenu03</a></li>
            </ul>
          </li>
          <li><a href="#">Gifts</a>
            <ul>
              <li><a href="#">submenu04</a></li>
              <li><a href="#">submenu05</a></li>
              <li><a href="#">submenu06</a></li>
            </ul>
          </li>
          <li><a href="#">Brilliant Light</a>
            <ul>
              <li><a href="#">submenu07</a></li>
              <li><a href="#">submenu08</a></li>
              <li><a href="#">submenu09</a></li>
            </ul>
          </li>
          <li><a href="#">The WORLD OF PRISM</a>
            <ul>
              <li><a href="#">submenu10</a></li>
              <li><a href="#">submenu11</a></li>
              <li><a href="#">submenu12</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>

h2의 "메인네비게이션"이라는 글귀는 없애주기 위해 class="hide"로 처리

나중에 css 작업시에 한꺼번에 없앨 예정이다.