[CSS]
.nav-container {
display: flex;
height: 40px;
padding: 10px;
background: darkkhaki;
/* 세로 - 가운데 정렬 */
align-items: center;
}
.nav-item {
margin-right: 10px;
}
[HTML]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="css/flexbox.css" rel="stylesheet">
</head>
<body>
<nav class="nav-container">
<div class="nav-item">ShooShop</div>
<div style="flex-grow: 1;"></div>
<div class="nav-item">Products</div>
<div class="nav-item">Services</div>
</nav>
</body>
</html>': ) Web > 웹 스터디' 카테고리의 다른 글
| [HTML, CSS 실습] 반응형 레이아웃 만들기 - 쇼핑몰 레이아웃 (0) | 2023.11.19 |
|---|---|
| [HTML, CSS] 반응형 레이아웃 만들기 (media query 문법) (2) | 2023.11.19 |
| [HTML, CSS] 레이아웃 만들기 - Flexbox (2) | 2023.11.19 |
| [HTML, CSS] 웹 폰트(커스텀폰트) 넣는 방법 / anti-aliasing (0) | 2023.11.19 |
| [HTML, CSS] pseudo-class 로 클릭 시 스타일 바꾸기 (0) | 2023.11.19 |
