[CSS] 하단 navigation bar, 숫자 아이콘 만들기

• navigation bar 만들기 (bottom)
  - navigation 안의 ul 안에 많은 li들로 구성되는데, 구글도 navigation을 찾아서 ul의 li 안에 있는 link를 가져오게 설정됨
  - 단축키 ->  nav>il>li*(갯수)>a
    그 후 #과 tab만으로 간편하게 작성이 가능하다.
  
      <nav>
          <ul>
              <li>
                  <a href=""></a>
              </li>
          </ul>
      </nav>
  
  - 점 3개(icon)는 ellipsis 라고 한다.
  - 속성과 class 이름이 똑같아도 상관없다.
          ex. <nav class="nav">
  - 메인 styles.css에 다른 요소의 css를 import 할 때, 순서를 지키는 것이 정말 중요하다.
          1. font import
          2. 모든 style reset
          3. variables.css import
          -> 이 세 가지가 순서가 조금이라도 바뀌면 적용 안됨!
  
  
  
• navigation bar 하단에 고정하기
      position: fixed
      bottom: 0
      width:100% (배열이 깨지는 경우)
      box-sizing: border-box 
      -> css에 '내가 paddiing을 줘도 box 사이즈를 늘리지 마'라고 하는 것
  
  
• 아이콘 색상 검은색으로 통일하기
      1. css 파일에 아래 추가하거나
          .nav__link { color: inherit; }
  
      2. reset.css에 아래 추가하기 (이걸 더 추천!)
          a {  color: inherit;
              text-decoration: none; }
  
   
• nav-bar 메세지 숫자 아이콘 만들기
• **  nav__noti는 span이라서 height, width 적용x
      display:block 설정을 해줘야 블록이 된다.
• **  대상을 겹치게 하고 싶다면
      원하는 요소에 position: absolute 사용
          (BUT!!) 
          absolute는 가장 가까운 relative를 가진 부모 기준으로 움직임
          nav-bar에서는 따로 지정을 안할 경우 body 기준으로 움직이기 때문에
          nav__link(부모)에 position:relative를 지정해줘야 원하는대로 움직임
• icon은 text(font) 라고 생각하면 됨!
• ** 사진 사이즈 변경 시 가로세로 비율 유지하고 싶을 때 사용
       ->   object-fit: cover;

 

 

막상 이것저것 만지니 우당탕탕..ㅋㅋㅋ잘 해보자

 

 

 

---

TIL 끝!