어떤 사이트를 가던 상단 nav bar는 있다.
이런걸 쉽게 만드는 방법로 grow-flex가 있다.
<style>
.navbar{
background-color: pink;
width: 500px;
display: flex;
color: white;
font-size: 30px;
}
.navbar div{
padding: 10px;
}
</style>
<body>
<nav class="navbar">
<div>Logo</div>
<div style="flex-grow: 2;"></div>
<div>product</div>
<div>services</div>
</nav>
</body>
</html>
양쪽 끝에 무언가를 배치하고 싶을 때 flex-grow를 사용하면 아주 쉽게 만들 수 있다.
'프로그래밍 > Web' 카테고리의 다른 글
| [Web] Open graph에 대한 간단한 설명과 사용법 (0) | 2022.05.05 |
|---|---|
| [Web] 내가 많이 쓰는 Emmet 기능 (0) | 2022.05.05 |
| [Web] 폰트 부드럽게 만들기(anti aliasing) (0) | 2022.05.05 |
| [Web] 웹폰트 첨부방법, woff 사용으로 용량 줄이기 (0) | 2022.05.05 |
| [Web] Table을 이용하여 장바구니 만들기 (0) | 2022.05.05 |
댓글