카카오 증권 메인 페이지 만들기 1

 

 

https://codepen.io/guenhyuck/pen/NWOKyEP

<!-- 유용한 링크 -->
<!-- cdnsj : https://cdnjs.com/ -->
<!-- 폰트어썸 아이콘 리스트 : https://fontawesome.com/icons?d=gallery&m=free -->

<!-- 구글 폰트 불러오기 -->
<!-- rotobo(400/700/900), notosanskr(400/600/900) -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700;900&family=Roboto:wght@400;700;900&display=swap" rel="stylesheet">

<!-- 폰트어썸 불러오기 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">

<!-- 제이쿼리 불러오기 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<div class="top-bar">
  <div class="con height-100p flex flex-jc-sa">
    <a href="#" class="logo flex flex-ai-c">
      <img src="https://kakaopaysec.com/resources/images/bi.png" alt="">
    </a>

    <nav class="menu-box-1">
      <ul class="height-100p flex">
        <li><a href="#" class="flex flex-ai-c height-100p">회사소개</a></li>
        <li><a href="#" class="flex flex-ai-c height-100p">비즈니스</a></li>
        <li><a href="#" class="flex flex-ai-c height-100p">경영정보</a></li>
        <li><a href="#" class="flex flex-ai-c height-100p">고객센터</a></li>
        <li><a href="#" class="flex flex-ai-c height-100p">채용정보</a></li>
      </ul>
    </nav>
  </div>
</div>


/* 노말라이즈 */
body,
ul,
li,
h1 {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

label[for] {
  cursor: pointer;
  user-select: none;
}


/* 탑바 */
.top-bar {
  height: 72px;
  background-color: #afafaf; /* 임시 */
  border-bottom: 1px solid #f4f4f4;
}

.top-bar > .con > .menu-box-1 > ul > li > a {
  font-weight: bold;
  color: #1e1e1e;
  font-size: 17px;
  padding: 0 10px;
  position: relative;
}

.top-bar > .con > .menu-box-1 > ul > li > a::after {
  content: "";
  position: absolute;
  bottom: 0;
  background-color: black;
  left: 0;
  width: 0;
  transition: width 0.3s;
  height: 3px;
}

.top-bar > .con > .menu-box-1 > ul > li:hover > a::after {
  width: 100%;
}

상단의 로고와 메뉴만 클릭하게 만들어 놓은 상태