안녕!
배운건 직접 써먹어봐야 내 머릿속에 남습니다.
오늘은 있어보이는 반응형 Nav 바를 만들어볼거에요.
기본재료 준비
header 태그 안에
- 로고 이미지
- ul 태그(3개의 네비게이션 링크들이 담긴)
- a태그(버튼이 담긴)
로 구성하고 아주 기본적인 스타일링을 해줄게요.
>HTML
<body>
<header>
<img class="logo" src="logo.svg" alt="logo" />
<nav>
<ul class="nav_links">
<li><a href="#">Services</a></li>
<li><a href="#">Projexts</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<a class="cta" href=""><button>Contact</button></a>
</header>
</body>>CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #24252a;
}
li,
a,
button {
font-family: "Montserrat";
font-weight: 500;
font-size: 16px;
color: #edf0f1;
text-decoration: none;
}
.nav_links {
list-style: none;
}
.nav_links li {
display: inline-block;
padding: 0px 20px;
}
button {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
}
부모요소에 display:flex 주기
header {
display: flex;
}display:flex 속성을 주자 마자, 세로로 배치되어있던 각각의 item들이 가로로 붙었다.
왜 가로냐? flex는 horizontally, 즉 가로축을 중심으로 정렬되는게 기본값이니까~
justify-content로 중심축의 정렬방식 설정하기
header {
display: flex;
justify-content: space-between;
}
item마다의 space가 들어갔다.
align-items로 반대축의 정렬방식 설정하기
header {
display: flex;
justify-content: space-between;
align-items: center;
}
차지하고있는 height 안에서 모든 items들이 중간정렬되었다.
눈에띄는 변화가 없어보이지만, 임의로 header에 height값을 높게 줘보면
세로축에서 정확히 가운데 위치한 것을 알 수 있다.
header와 각각의 item들에 space 설정하기
이번에는 간단하게 header에 패딩값을 줌으로써 space를 설정했다.
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 5%;
}
화면의 크기가 커져도 그 비율은 유지하는 걸 볼 수 있다!
이렇게 아주 간단하게 flex를 이용한 있어보이는 Nav 바 완성!
응용 1 - justify-content:flex-end 사용
- justify-content: flex-end를 주고
- .logo에 margin-right: auto 를 준 경우 (남는 공간에서 오른쪽에 다 마진을 사용해줘~)
응용2 - logo와 contact버튼의 순서를 바꾸고싶을 때
.logo {
order: 1;
}
.cta {
order: -1;
margin-right: auto;
}
짜잔!
'Front-End Developer > CSS' 카테고리의 다른 글
| 약방의 감초같은 image sprite기법으로 이모티콘 넣기 (2) | 2022.04.14 |
|---|---|
| 가운데정렬의 난 case 1 - 이미지와 텍스트 수직정렬하기 (0) | 2022.04.11 |
| Flex 별 거 아냐 - 자식요소편 (0) | 2022.04.09 |
| 니가 누구던지 센터로 가버려 - CSS 중앙정렬 4가지 방법 (5) | 2022.04.07 |
| Flex 별 거 아냐 - 부모요소 편 (2) | 2022.04.07 |