<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">
<!-- 구글 심볼 불러오기 -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
</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';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
font-weight: 300;
font-style: normal;
}
/* 500 */
@font-face {
font-family: 'GmarketSans';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
font-weight: 500;
font-style: normal;
}
/* ---- Pretendard ---- */
/* 400 -> 본문 기본 폰트 */
@font-face {
font-family: 'Pretendard';
src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
/* 700 */
@font-face {
font-family: 'Pretendard';
src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
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>
<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 |