노마드코더 코코아톡 클론코딩 9일차

navigation bar는 보통 내부에 ul, 또 그 안에 많은 li들로 구성되어 있고 각 li들은 링크를 포함한다. 검색엔진 구글도 navigation을 찾아서 ul의 li안에 있는 링크들을 가져오게끔 만들어져 있다.

>> VSC의 단축키로 navigation의 하위 요소까지 한번에 자동 완성 시킬 수 있다.

nav>ul>li*4 : nav 안에 ul 안에 li가 4개

어떤 요소를 항상 같은 위치에 고정시키려면 : position: fixed;

하단바의 위치를 고정시켰더니 이렇게 마지막 아이콘이 사라졌다. 이럴 때 사용하는 마법의 문장!

box-sizing: border-box; → 아이콘들이 한 줄에 다 보임

**CSS box padding의 기본 원리

: 200px의 박스에 50px의 padding을 추가하면, css는 기존 박스의 200px를 유지하기 위해 50px만큼 박스를 늘린다.

→ 250px의 박스가 됨.

>>이를 방지하기 위해 box-sizing: border-box; 를 쓰면 박스의 크기를 유지한 채 padding을 줄 수 있다.

css에게 "내가 padding을 줘도 신경쓰지마. 내 box 사이즈를 늘리지 말아줘"라고 말하는 것.

메신저 개수 표시 (동그라미)가 안보이다가 display: flex; 를 하니까 갑자기 나타났다.

>> display: flex 더 공부하기

메신저 개수 표시가 메신저 아이콘 뒤에 있다가 position: absolute 를 하니까 아이콘 위로 나타났다.

→ 아이콘에도 position: relative 를 적용해서 부모를 기준으로 위치 수정

🐶🦒