2차 메뉴가 있는 header 구성해보기

< 2차 메뉴가 있는 header 구성해보기 >

css 초기화 하기 전 구조를 다 짠 모습이 이렇게 보여야한다.

2차 메뉴 구조 코딩 ↓

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>2차 메뉴가 있는 header</title>
    <!-- css연결/ 항상 초기화 파일이 먼저 연결되어야한다 -->
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <header>
      <div class="header_con">
        <!-- 로고 -->
        <h1>
          <a href="/">kakao</a>
        </h1>
        <!-- 메뉴 -->
        <nav>
          <ul>
            <li>
              <a href="#">소개</a>
              <ul class="submenu">
                <!--원래는 여기아래에 a 태그 넣어야한다-->
                <li>menu</li>
                <li>menu</li>
                <li>menu</li>
              </ul>
            </li>
            <li>
              <a href="#">이야기</a>
              <ul class="submenu">
                <li>menu</li>
                <li>menu</li>
                <li>menu</li>
              </ul>
            </li>
            <li>
              <a href="#">기술과 서비스</a>
              <ul class="submenu">
                <li>menu</li>
                <li>menu</li>
                <li>menu</li>
              </ul>
            </li>
            <li>
              <a href="#">약속과 책임</a>
              <ul class="submenu">
                <li>menu</li>
                <li>menu</li>
                <li>menu</li>
              </ul>
            </li>
            <li>
              <a href="#">뉴스</a>
              <ul class="submenu">
                <li>menu</li>
                <li>menu</li>
                <li>menu</li>
              </ul>
            </li>
            <li>
              <a href="#">투자정보</a>
              <ul class="submenu">
                <li>menu</li>
                <li>menu</li>
                <li>menu</li>
              </ul>
            </li>
          </ul>
        </nav>
        <!-- 아이콘들 -->
        <div class="icons">
          <div class="search">
            <img src="./img/search.svg" alt="검색" />
          </div>
          <div class="language">
            <img src="./img/language.svg" alt="언어" />
          </div>
          <div class="dark">
            <img src="./img/dark_mode.svg" alt="다크모드" />
          </div>
        </div>
      </div>
    </header>
  </body>
</html>

1. css 파일에서 웹폰트 연결해주고 boby불러와서 font-family랑 글자 색 폰트 사이즈를 지정해준다.

(height 5000은 스크롤 만들기위해서 잠시 해놓은 것뿐이다. 신경 안써도 된다.)

2. nav에서 li 안에 또 다시 ul 과 li를 만들어주면 2차 메뉴를 만들 수 있다.

로고는 클릭하면 메인페이지로 연결되어야하니깐 a태그에 /(=메인페이지) 라고 써준다.

2차 메뉴 ul들을 class submenu로 지정해준다.

<h1>

<a href="/">kakao</a>

</h1>

<nav>

<ul>

<li>

</ul>

</li>

<li>

</ul>

</li>

<li>

</ul>

</li>

<li>

</ul>

</li>

<li>

</ul>

</li>

<li>

</ul>

</li>

</ul>

</nav>

3. 해더의 전체영역은 width 브라우저 100%으로 해주고 height는 원하는 해더 높이값 지정해준다.

☆ header에 position: fixed;를 해주면 스크롤을 움직여도 해더가 브라우저 탑부분 위치에 고정되어 따라다닌다.

position: fixed;을 쓰고 top:0; left:0;으로 좌표값 설정해줘야한다.

로고, 메뉴, 아이콘들이 들어있는 header_con에 display:flex와 justify-content:space-between으로 위치 잡아준다.

4. 메뉴 영역 nav는 width와 height를 fit-content로 넓이 높이를 자식요소에 맞춰 감싸게 설정해준다.

5. 뒤에서부터 hover을 해석하면 이해하기 쉽다. ul에 마우스를 올리면/ 마우스를 올리지 않은, li는 컬러를 #888로 바꿔라

6. ☆ 2차 메뉴들을 묶어놓은 .submenu는 숨겨져있다가 1차 메뉴에 마우스를 올리면 나타나야한다

숨기는 법은,

height:0px; 을 주고 overflow:hidden;을 줘서 숨겨놓는다. 높이값이 있을 때 overflow:hidden;을 쓰면 높이값을 벗어난 부분을 숨기는 특징이 있으니 높이를 0px로 두고 숨기는 것이다. (펼쳐지는 효과를 줄려면 dispaly:none;이 아니라overflow:hidden; 써야한다)

위에 ul에 line-height를 84px를 줬어서 .submenu들도 이걸 상속받게 된다. 근데 그러면 너무 넓기때문에 .submenu도 따로 line-height을 준다.

*** submenu에 position: relative;를 주면 나중에 서브메뉴 글자들끼리 사이를 좁히고 싶거나 넓히고 싶을 때 top에 숫자를 조절해주면 조절할 수 있기 때문에 position: relative;을 적용해준다.

7. ☆ 1차 메뉴에 마우스를 올렸을 때 2차 메뉴를 보여주는 방법 2가지

-1번째 방법:

1차 메뉴에 마우스를 올리면 해당하는 2차 메뉴를 보여줘라

nav의 자손 ul의 자손 li의 영역에 마우스가 올라가면 해당 li안의 있는 .submenu를 보여줘라 (단일메뉴)

nav > ul > li:hover .submenu {

height: 120px; }

메뉴들이 각 한개당 40px line-height고 서브메뉴가 3개씩 들어가 있으니 높이가 40*3해서 120이니 height를 120으로 설정

높이 0, 오버플로우히든으로 숨겨놨으니깐 높이를 다시 줘서 나타나게 한다.

-2번째 방법:

1차 메뉴에 마우스를 올리면 모든 2차 메뉴를 보여줘라

nav의 자손 ul 영역에 마우스가 올라가면 모든 자손 li 안의 모든 .submenu를 보여줘라

nav > ul:hover > li .submenu {

height: 120px;}

=========================

8. 아이콘은 패딩으로 가운데 정렬해준다. (아이콘에 패딩 줄땐 박스사이징 보더박스 잊지말기- )

</div>

</div>

</div>

</header>

</body>

</html>

'예제 실습' 카테고리의 다른 글

실습) split shire 사이트 클론 코딩 (0)	2024.06.25
실습) Google (0)	2024.06.24
실습) 네이버 회원가입 창 (0)	2024.06.21
실습) table 게시판 만들기 (0)	2024.06.19
1차 메뉴만 있는 Header 구성해보기 (0)	2024.06.17

얼레벌레

2차 메뉴가 있는 header 구성해보기

'예제 실습' 카테고리의 다른 글

티스토리툴바

2차 메뉴가 있는 header 구성해보기

'예제 실습' 카테고리의 다른 글

'예제 실습' Related Articles

티스토리툴바