#06.TIL | HTML&CSS(Nav-bar제작 with position속성, display속성)
Nav-bar 제작(with display)
HTML과 CSS를 학습중에 CSS의 position과 display속성의 중요성을 다시금 알게 되었는데, 내용들을 정리해보면서 유튜브를 보며 따라 만들었던 Nav-bar에 속성들을 어떻게 적용시켰는지 보고 리뷰해보기로 했다.
사실 이번 학습전까지는 display속성의 flex가 그저 block 요소들을 가로로 줄세우고, justify-content로 정렬할 수 있다는 정도만 알고 있었다. 하지만, flexboxfroggy와 유튜브 드림코딩을 보면서 수평축, 수직축, 중심축에 대한 개념과 flexbox의 다양한 활용법 등을 알게 되었다.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc"
crossorigin="anonymous"/>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>web</title>
</head>
<body>
<nav class="nav-bar">
<div class="nav-bar-logo">
<a href="#">
<i class="fab fa-airbnb fa-lg"> </i>
<span>Nav-bar</span>
</a>
</div>
<ul class="nav-bar-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Weddings</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Bookings</a></li>
</ul>
<div class="nav-bar-icon">
<a href="#"><i class="fab fa-twitter fa-lg"></i></a>
<a href="#"><i class="fab fa-facebook-square fa-lg"></i></a>
</div>
<a href="#" class="nav-bar-ham"><i class="fas fa-bars fa-lg"></i></a>
</nav>
</body>
<script src="index.js"></script>
</html>우선, HTML코드는 앞서 공부했던 Semantic tag중 하나의 nav태그로 구성하였고, 이 태그안에는 hidden을 가지는 nav-bar-ham을 제외하면 다음과 같이nav-bar-logo , nav-bar-menu, nav-bar-icon라는 3개의 block box가 생기게 된다.
그렇다면 완성작처럼 일자형태의 nav-bar를 구성할려면 display속성을 어떻게 활용할 수 있을까. 먼저, 이 block box들을 display: flex로 바꿔 줄 수 있다. 그러면 다음과 같이 nav-bar라는 flex-container안에 flex item들이 생성되고 block속성이 사라지게 된다.
그러면 main axis는 row이고, cross axis는 column이기 때문에 justify-content: space-between 을 사용하여 flex-item들을 균등한 간격을 가지고 양쪽 끝에 정렬할 수 있다.
그리고, 두번째 flex-item인 nav-bar-menu역시도 block속성의 li로 구성된 block box이기때문에 display: flex와 가독성을 위해 list-style: none과 자식인 li태그에 margin을 주게 되면
이렇게 뼈대만 있지만, display속성을 이용해 간편하게 원하는 구조의 nav-bar를 얻을 수 있게 되었다.
Nav-bar 제작(with position)
그렇다면 아까 언급했던 햄버거모양의 메뉴 아이콘은 평상시에는 hidden속성을 가지다가 웹이 줄어들면 block속성을 가지고 다시 나타나야되는데 어떻게 위치를 조정할 수 있을까. CSS position속성을 사용하면 쉽게 구성할 수 있다. 평상시에는 flex-item들과 상관없이 position: absolute를 통해 부모인 nav-bar의 오른쪽으로부터 10px떨어진곳에 위치하게 된다.
.nav-bar-ham {
position: absolute;
right: 10px;
display: none;
}
아마 보이지는 않지만 페이스북 아이콘과 겹쳐져 있을것이다. 그러다가 스크린의 가로가 630px아래가 되면 display: block속성을 주어 화면에 볼 수 있게 된다.
@media screen and (max-width: 630px) {
.nav-bar-ham {
display: block;
}} ;
오늘 오늘 Repl.it을 진행하며 동시에 과거에 작성했던 코드를 되돌아 보며 어떻게 position속성과 display속성을 부여할 수 있는지 살펴보게 되었고, 헷갈리고 지나쳤던 부분들도 다시 알게 되었다. 또한, 정확히 인지하지 못했던 부모-자식간의 관계, 중심축 등의 중요한 개념들도 습득하게 되었다.
이번 학습을 통해 앞으로 레이아웃을 구성할 기회가 있으면 무턱대고 코드를 작성하기 보다는 container와 item들의 구조를 잘 생각하고 만들어야겠다는 생각이 들었다.
