본문 바로가기
웹/웹(코딩)

웹 _ 018일차 [GS에너지 상단바 구현]

웹은지 2024. 8. 9. 18:39

<index.html>

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GS에너지 상단바 구현</title>
  <link rel="stylesheet" href="style.css">
  <!-- 구글 심볼 불러오기 -->
</head>
<body>
  <!-- ---- 상단바 ---- -->
  <div class="top-bar">
    <div class="logo-box">
      <img src="image/logo_g 1.png" alt="로고 이미지">
    </div>
    <nav class="menu-box">
      <!-- ul>li*6>a[href="#"].fw-700.fs-19.fc-222 -->
      <ul>
        <li><a href="#" class="fw-700 fs-19 fc-222">Company</a></li>
        <li><a href="#" class="fw-700 fs-19 fc-222">ESG Management</a></li>
        <li><a href="#" class="fw-700 fs-19 fc-222">Beyond</a></li>
        <li><a href="#" class="fw-700 fs-19 fc-222">Business</a></li>
        <li><a href="#" class="fw-700 fs-19 fc-222">Media Center</a></li>
        <li><a href="#" class="fw-700 fs-19 fc-222">Careers</a></li>
      </ul>
    </nav>
    <div class="user-menu-box">
      <div class="lg-box">
        <!-- span.fw-700.fs-18.fc-22{KR} -->
        <span class="fw-700 fs-18 fc-22">KR</span>
        <span id="keyboard-icon" class="material-symbols-rounded">
        keyboard_arrow_down</span>
      </div>
      <div class="menu-icon-box img-box">
        <img src="image/menu-icom.svg" alt="메뉴 아이콘">
      </div>
    </div>  
  </div>
</body>
</html>

 

<style.css>

/* 폰트 불러오기 */
/* ---- 'GmarketSans' ---- */
/* 300 */
@font-face {
  font-family: 'GmarketSans';
  font-weight: 300;
  font-style: normal;
}
/* 500 */
@font-face {
  font-family: 'GmarketSans';
  font-weight: 500;
  font-style: normal;
}
/* ---- Pretendard ---- */
/* 400 -> 본문 기본 폰트 */
@font-face {
  font-family: 'Pretendard';
  font-weight: 400;
  font-style: normal;
}
/* 700 */
@font-face {
  font-family: 'Pretendard';
  font-weight: 700;
  font-style: normal;
}
/* 라이브러리 */
.fw-300{font-weight: 300;}
.fw-500{font-weight: 500;}
.fw-700{font-weight: 700;}

.fs-18{font-size: 18px;}
.fs-34{font-size: 34px;}
.fs-65{font-size: 65px;}

.fc-fff{color: #fff;}
.fc-222{color: #222;}

.img-box>img{
  background-color: red;
  display: block;
  width: 100%;
}

/* 코드 시작 */
/* ---- 노멀라이즈 ---- */
body, ul,li {
  margin: 0; padding: 0;
  list-style: none;
}
a{
  color: inherit;
  text-decoration: none;
}
/* 다른 태그에는 폰트 적용이 안되어야 하기 때문에 body태그를 따로 선택해서 폰트를 적용한다.  */
body{
  font-family: 'Pretendard', sans-serif;
}

 /* ---- 상단바 ---- */
.top-bar{
  border: 1px solid red;
  padding-left: 100px; padding-right: 100px;
  height: 180px;
  /* text-aline: right; */
  display:flex; justify-content: space-between;
}

.top-bar>.logo-box{
  border: 1px solid orange;
  width: 230px;
  display: flex; align-items: center;
}
/* img태그중에 간혹가다가 알 수 없는 이유로 여백이 나오지 않는다. */
/* .logo-box>img{
  background-color: red;
} */
.top-bar>.menu-box{
  border: 1px solid orange;
}
.menu-box>ul{
  border: 1px solid green;
  display: flex; height: 100%;
  align-items: center;
  gap: 40px;
}
.menu-box>ul>li{
  border: 1px solid blue;
}
.menu-box>ul>li>a{
  background-color: pink;
}
.top-bar>.user-menu-box{
  border: 1px solid orange;
  width: 230px;
  display: flex; align-items: center;
  justify-content: flex-end;
  gap: 28px;
}
.user-menu-box>.lg-box{
  border: 1px solid green;
  display: flex; align-items: center;
  overflow: hidden;
}
.lg-box>span{
  background-color: gray;
}
#keyboard-icon{
font-size: 24px;
margin-bottom: -3px;
letter-spacing: -2px;
}
.user-menu-box>.menu-icon-box{
  border: 1px solid green;
  width: 30px;
}

 

<menu.icom>

<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="4" cy="4" r="4" fill="#ED6F04"/>
<circle cx="4" cy="20" r="4" fill="#CCCCCC"/>
<circle cx="4" cy="36" r="4" fill="#CCCCCC"/>
<circle cx="20" cy="4" r="4" fill="#CCCCCC"/>
<circle cx="20" cy="20" r="3" fill="#FBBA00"/>
<circle cx="20" cy="36" r="4" fill="#CCCCCC"/>
<circle cx="36" cy="4" r="4" fill="#016FB3"/>
<circle cx="36" cy="20" r="4" fill="#009B96"/>
<circle cx="36" cy="36" r="2" fill="#8DB943"/>
</svg>

 

 

'웹 > 웹(코딩)' 카테고리의 다른 글

웹 _ 020일차 [코드몽키 / 메뉴바 만들기 훈련]  (0) 2024.08.13
웹 _ 019일차 [희성T 첫 수업]  (0) 2024.08.12
웹 _ 017일차 [폰트관련 정보]  (0) 2024.08.09
웹 _ 014일차 [구현-혼자 연습]  (0) 2024.08.05
웹 _ 013일차[구현 실습]  (0) 2024.08.02

'웹/웹(코딩)' Related Articles

티스토리툴바