728x90
반응형
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 폰트 시작 */
@font-face {
font-family: 'LotteMartDream';
font-style: normal;
font-weight: 400;
src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff') format('woff');
}
@font-face {
font-family: 'LotteMartDream';
font-style: normal;
font-weight: 700;
src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamBold.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamBold.woff') format('woff');
}
@font-face {
font-family: 'LotteMartDream';
font-style: normal;
font-weight: 300;
src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamLight.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamLight.woff') format('woff');
}
html {
font-family: 'LotteMartDream', sans-serif;
}
/* 폰트 끝 */
/* 노말라이즈 시작 */
body {
margin: 0px;
}
a {
color: inherit;
text-decoration: none;
}
ul, li {
padding: 0;
list-style: none;
margin: 0;
}
.bg-red {
background-color: red;
}
.bg-blue {
background-color: blue;
}
.bg-green {
background-color: green;
}
/* 노말라이즈 끝 */
/* 라이브러리 시작 */
.con {
margin-left: auto;
margin-right: auto;
}
.block {
display: block;
}
/* 라이브러리 끝 */
/* 커스텀 시작 */
:root {
--site-width: 1200px;
}
.con-min-width {
min-width: var(--site-width);
}
.con {
width: var(--site-width);
}
/* 탑바 시작 */
.top-bar {
background-color: black;
color: white;
}
.top-bar__left-box {
width: 200px;
display: inline-block;
vertical-align: top;
}
.top-bar__right-box {
width: calc(100% - 200px);
display: inline-block;
vertical-align: top;
text-align: right;
}
.top-bar__logo {
padding: 12px 0;
font-size: 2rem;
}
.top-bar__menu-box-1 {
display: inline-block;
}
.top-bar__menu-box-1 > ul > li {
display: inline-block;
}
.top-bar__menu-box-1 > ul > li > a {
padding: 20px;
}
.top-bar__menu-box-1 > ul > li > a:hover {
background-color: white;
color: black;
}
/* 탑바 끝 */
/* 커스텀 끝 */
</style>
</head>
<body>
<header class="top-bar con-min-width">
<div class="con">
<div class="top-bar__left-box">
<a href="#" class="top-bar__logo block">
Developers
</a>
</div><!--
--><div class="top-bar__right-box">
<div class="top-bar__menu-box-1">
<ul>
<li><a href="#" class="block">아이템 1</a></li>
<li><a href="#" class="block">아이템 2</a></li>
<li><a href="#" class="block">아이템 3</a></li>
<li><a href="#" class="block">아이템 4</a></li>
</ul>
</div>
</div>
</div>
</header>
</body>
</html>728x90
반응형
'코딩공부' 카테고리의 다른 글
| 나만의 클린코드 요약 (0) | 2023.11.01 |
|---|---|
| CSS 일정비율 조절 (0) | 2022.10.20 |
| 이미지 링크주소 (0) | 2022.10.07 |
| 자식선택자와 후손선택자 (0) | 2022.10.06 |
| 클래스101 개발자 로드맵 (1) | 2022.10.01 |