Navigation Bar part Three
글자에 도형을 추가하려면
display: block;
넓이와 높이를 주려면
width, height
원형을 만들고 싶으면 항상 넓이와 높이 절반의 크기로
border-radius
글자를 가운데로 오게하고싶으면
display: flex;
justify-content; center;
align-items: center;
하지만 가운데로 안오는 이유는? display: block; 때문이다.
block -> flex로 변경
색변경은 color
폰트굵기는 font-weight
메세지 아이콘의 위에 오도록 하는 법 position: absolute;
하지만 absolute는 가장 가까운 relative값을 준 부모를 기준으로 이동하기 때문에
Friends.html에서 초록줄의 빨간색 nav_link를 가장 가까운 부모로 만들어야 함.
그러면 nav-bar.css에 있는 nav__link에 position:relative;를 준다.
★ 항상 position absolute를 사용할땐 relative를 준다.★
top right bottom left 값이 반대로 적용되는 이유
Position: relative;는 레이아웃이 처음 위치하는 곳을 기준으로 옮긴다
원하는 방향으로 밀어낼 생각으로 값을 주면 이해하면 편함
💻