Menu Slider & Modal (2) - Style Nav

본 포스트는 udemy.com에 올라온 Brad Traversy의 20 Web Projects With Vanilla JavaScript 강의 중 하나를 정리한 내용입니다.

https://www.udemy.com/course/web-projects-with-vanilla-javascript/ 

20 Web Projects With Vanilla JavaScript

 

 

 

왼쪽 Navigation Bar을 CSS로 꾸며보겠다.

 

 nav {
  background-color: var(--primary-color);
  border-right: 2px solid rgba(200, 200, 200, 0.1);
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100vh;
  z-index: 100;
}

배경색은 primary-color (#30336b)

오른쪽에 border을 줘서 header와 main section에 구분선

글자색은 흰색 #fff

 

position:fixed;

top:0;

left:0;

을 줘서 말 그대로 왼쪽 위에 달라붙게

 

 

width:200px로 너비를 주고

height:100vh;로 높이를 줘서 화면 아래까지 다 내려오도록

 

 

z-indx:100 큰 숫자 줘서(ㅋㅋ) 확실히 튀어 나와서 볼 수 있게!

 

 

 

 

nav .logo {
  padding: 30px 0;
  text-align: center;
}

로고 이미지(여기서는 저 남자 사진)이 들어가는 div 박스인데

위,아래 padding을 주고

text-align:center을 해서 사진을 중앙에 배치시킨다.

 

 

nav .logo img {
  height: 75px;
  width: 75px;
  border-radius: 50%;
}

 

이미지의 height과 width를 일치시키고 border-radius:50%를 주면 반듯한 동그라미 이미지가 완성

 

 

 

nav ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

메뉴 ul들의 마진, 패딩을 없애고

li들 앞에 있는 점(dot)을 없애기 위해 list-style을 none으로 한다.

 

 

 

nav ul li {
  border-bottom: 2px solid rgba(200, 200, 200, 0.1);
  padding: 20px;
}

li들끼리 간격을 넓히기 위해 padding을 주고

구분선을 주기 위해 border-bottom

 

 

nav ul li:first-of-type {
  border-top: 2px solid rgba(200, 200, 200, 0.1);
}

:first-of-type pseudo selector를 이용해서 첫번째 li에는 border-top도 줬다

위에 logo 이미지와의 구분선을 위해서.

 

 

nav ul li a {
  color: #fff;
  text-decoration: none;
}

메뉴 li에 다 <a> tag를 걸어놨다.

anchor 태그의 경우에는 글자색과 아래에 생기는 파란선을 없애려면

이렇게 직접 a tag에 style을 줘야한다.

(li에 주면 효과 없음)

 

 

 

nav ul li a:hover {
  text-decoration: underline;
}

메뉴에 hover over했을 때, 해당 메뉴 underline이 생기게

(개인적으로 그냥 underline만 생기는건 크게 좋아하는 스타일을 아닌..........)

 

 

 

nav {
  background-color: var(--primary-color);
  border-right: 2px solid rgba(200, 200, 200, 0.1);
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100vh;
  z-index: 100;
  transform: translateX(-100%);
}

 

nav bar 스타일을 다 마치고 나서

다시 <nav> 태그에

transform: translateX(-100%);

속성을 줬다.

nav bar는 우리가 toggle 버튼을 눌렀을 때만 나타나게 할 것이기 때문에

기본 스타일을 다 마친 후에는 일단 숨겨놨다.

 

나중에 toggle 버튼 기능이 다 완료되면,

toggle 버튼을 누르면 우리가 스타일한 nav 메뉴가 나타나고

다시 toggle 버튼을 누르면 화면에서 사라진다.

 

 

 

 

 

 

 

 

 

 

---

position:fixed와 position:sticky

참고: https://developer.mozilla.org/en-US/docs/Web/CSS/position

position

 

 

나온 김에 복습하려고.. 그냥 mdn 문서를 혼자 직역하며 정리해본다..

 

position: fixed;

- position:fixed를 주면 그 element는 원래 html document에 있던 flow에서 아예 제거되버린다.

다시 좀 더 풀어써서 말해보자면, 

normal document flow에서 fixed element를 위한 자리가 아예 사라지고

그 element가 마치 처음부터 없었던 것처럼!!!

layout에서 그냥 사라진다!

그리고 그 다음 element들이 쭉쭉 배치됨.

- 그리고 혼자 화면에서 붕- 떠서는 top, right, bottom, left 값들에 의해 위치가 정해짐

 

 

position:sticky;

- sticky를 하면 일단 normal document flow에 그대로 위치해 있다.

- 근데 스크롤바를 내리면 다른 document element들은 사라지는데

position:sticky element는 그 자리에 그대로 붙어 있다.