웹 페이지 구성하기

header 1차 메뉴, 2차 메뉴 만들기

 

 

html 작성 예시

    <header>
      <div class="header_con">
        <!-- 로고 -->
        <h1>
          <a href="/">Professional</a>
        </h1>

        <!-- 메뉴 -->
        <nav>
          <ul>
            <li>
              <a href="#">Home</a>
              <ul class="submenu">
                <li><a href="#">menu</a></li>
                <li><a href="#">menu</a></li>
                <li><a href="#">menu</a></li>
              </ul>
            </li>
            <li>
              <a href="#">회사소개</a>
              <ul class="submenu">
                <li><a href="#">menu</a></li>
                <li><a href="#">menu</a></li>
                <li><a href="#">menu</a></li>
              </ul>
            </li>
            <li>
              <a href="#">제휴신청</a>
              <ul class="submenu">
                <li><a href="#">menu</a></li>
                <li><a href="#">menu</a></li>
                <li><a href="#">menu</a></li>
              </ul>
            </li>
            <li>
              <a href="#">고객센터</a>
              <ul class="submenu">
                <li><a href="#">menu</a></li>
                <li><a href="#">menu</a></li>
                <li><a href="#">menu</a></li>
              </ul>
            </li>
          </ul>
        </nav>

        <!-- 아이콘 묶음 -->
        <div class="icons">
          <div class="search">
            <img src="./img/search.svg" art="검색" />
          </div>
          <div class="home">
            <img src="./img/home.svg" art="집" />
          </div>
          <div class="favorite">
            <img src="./img/favorite.svg" art="하트" />
          </div>
        </div>
      </div>
    </header>

 

css 입력 예시

header {
  width: 100%;
  height: 84px;
  position: fixed;
  top: 0;
  left: 0;
  /* 스크롤을 내리면 헤더가 나를 따라다니게 하기 */
}

.header_con {
  width: 1316px;
  overflow: hidden;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

h1 {
  font-size: 30px;
  line-height: 84px; /* header 높이와 동일 */
}

nav {
  width: fit-content;
  height: fit-content;
}

nav > ul {
  width: fit-content;
  height: fit-content;
  margin: 0 auto;
  display: flex;
  column-gap: 40px;
  position: relative; /* 지금 위치로 기준 설정*/
  text-align: center;
  line-height: 84px;
}

ul:hover > li:not(:hover) a {
  color: thistle;
}
/* ul 안에 li에 마우스를 올리면 선택한 글 빼고 컬러를 변경 */
.submenu {
  width: 100%;
  height: 0; /*  height: 0; 기준으로 보여준다 라는 의미 */
  overflow: hidden;
  line-height: 40px;
  position: relative;
  top: 0;
  left: 0;
  /* 서비스 팁?! */
  transition: 0.3s;
}

/* nav의 자손 ul의 자손 li의 영역에
마우스가 올라가면 li안에 있는 서브메뉴를
보여달라는 뜻 = 단일메뉴 */
nav > ul > li:hover .submenu {
  height: 120px;
}

/* 만약 어디에 마우스를 올리든 2차 메뉴를 다 보여주길 원할 시
nav > ul:hover > li .submenu {
  height: 120px;
}*/

/* 아이콘들 */

.icons {
  width: 184px;
  height: 48px;
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
}

.icons > div {
  width: 48px;
  height: 48px;
  box-sizing: border-box;
  padding: 13px;
}

.icons > div:hover {
  background-color: rgb(241, 231, 241);
  border-radius: 100%;
}
/* 영역을 보기 위해 배경색을 입히는 겁니다
작업이 다 끝나면 다 지워줍니다.*/

html 작성 예시

 

css 적용하기

 

 

 

 

초기화 사이트

https://meyerweb.com/eric/tools/css/reset/

CSS Tools: Reset CSS

 

마무리

저는 예시용으로 영상을 촬영한 후에 제가 생각했던
웹페이지 느낌에 맞게 수정하였습니다.

오늘 남은 하루도 힘내시길 바랄게용! 화이팅!😆