Navigation Bar
- navigation bar는
<nav></nav>안에서 작업한다. navigation은 보통 내부에는ul로 나눠지고 그 안에 많은li로 구성된다. li안에는 주로<a>가 있다.
<nav>
<ul>
<li>
<a></a>
</li>
</ul>
</nav>-
nav-bar.css 파일을 만들어 styles.css에 import 해준다. (파일분리)
-
@import를 할땐 @import한것들에 대한 순서를 잘 맞추는것이 좋다. @import는 위에서부터 순서대로 적용되므로 예를들면 변수에 관한 내용을 import할때 제일 밑에 @import해주게 되면 위에서 @import한 파일에 적용이 안될수도 있다. -
nav가 아닌 ul인 nav__list에 flex를 하는 이유는 li(flex item)의 flex container는 바로 부모인 ul이기 떄문이다.
-
<a>link태그들은 기본값으로 blue색상을 가지고 있음.
color:inherit;는 부모로부터 색을 상속받는 것이다.
이 경우에는 a(자식)가 색상을 li(부모)으로 부터 상속받는다.
여기선 li에서 색상을 따로 지정을 안했으므로 defalut색상은 블랙이다. 즉 블랙 색상을 상속받아 적용된다. -
reset.css 파일에서
a { color: inherit; text-decoration: none;}으로 전역<a>태그에 색깔을 바꿔줌.
이렇게 하면<a>가 쓰이는곳에서,<a>의 부모로부터 색상을 상속받는다.
position:fixed; 및 bottom: 0; 만하게 되면 왼쪽처럼 네비게이션 바가 이상하다. width:100%를 해주자.
width: 100%를 사용하면 해당 요소의 너비가 부모 요소의 너비에 대한 백분율로 설정된다. 즉, 부모 요소의 가로 너비의 100%를 차지하게 된다. 여기서는<body>가 부모요소이고<body>는 브라우저화면의 전체 너비를 가지는 가장 상위 요소이므로.nav의 너비는 브라우저 화면의 전체 너비에 대한 백분율인 100%를 가지게된다.
😂 하지만 제일 오른쪽 아이콘이 잘린다.=>.nav에서 padding 때문에 그렇다. => box-sizing: border-box;를 하면 해결된다.
box-sizing: border-box
- width가 200px의 박스에 50px의 padding-left를 주면, css는 기본적으로 기존박스의 크기도 유지하고 padding도 유지하기 위해서 기존 박스의 200px에 50px만큼 박스를 늘림. 그럼 width가 250px인 박스가 됨.
하지만 원하는 width는 padding을 포함해서 200px이므로 기존박스의 오른쪽 부분이 잘려서 노출될수도있음.
-> 이를 해결하기 위해box-sizing: border-box;를 주면 CSS에게 "내가 padding을 줘도 신경쓰지마. 내 box 사이즈를 늘리지 말아줘"라는 뜻이며 기존 box의 content가 보일 부분을 늘리지 않음.
즉, width가 200px의 박스에 50px의 padding-left를 주면, 박스의 크기를 늘리지 않으므로 padding 50px + 기존박스 150px를 해서 총 200px이 되는것이다. 박스의 사이즈를 늘리는것을 원하지 않으므로 기존박스가 150px가 되도 상관이 없는것이다.
이제 아이콘위에 채팅창 알림표시를 만들어보자.
-
아이콘위에 채팅창 알림표시를 만들기위해
<span>을 작성함.
.nav__notification {
background-color: tomato;
width: 20px;
height: 20px;
}👇span에 width나 height를 적어주면 display:inline이기때문에 적용이안된다.
=> display:block을 사용해야함
.nav__notification {
background-color: tomato;
width: 30px;
height: 30px;
display: block;
border-radius: 15px;
}👇하지만 안의 컨텐츠 1을 정렬하기 위해서 display:flex를 사용한다.
.nav__notification {
background-color: tomato;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 15px;
}-
display: flex;는 내부 요소를 유연하게 배치하기 위한 CSS 속성입니다.
이를 통해 flex 컨테이너 내의 요소들을 가로 또는 세로 축을 기준으로 정렬하고 간격을 조절할 수 있습니다. -
이 경우, ".nav__notification" 클래스에 "display: flex;"를 적용하면
span요소가 flex 컨테이너로 작동하게 됩니다.
그 결과,내부 요소(content, 1)를 가운데로 정렬하기 위해 "justify-content: center;"와 "align-items: center;"를 사용할 수 있습니다.
이렇게 하면 span 요소 내부의 content(텍스트 또는 다른 내용)가 가운데로 정렬되며, 필요에 따라 좌우로 이동할 수 있게 됩니다. -
<span>은 inline요소라서 내부에 있는 요소들을 가로로 나란히 배치하거나 정렬하는 데 제한이 있다. 그래서 block요소로 바꿔줘야하는데,<span>대신에<div>와 같은 block요소를 사용하면 될거같은데 굳이<span>을 display:flex;로 바꾸는 이유는
<span>의 "내부요소"인 "텍스트"에 대해서 유연하게 배치하기 위함이다.
즉, 위의 CSS 코드는 ".nav__notification" 클래스에 대한 스타일을 지정하고 있으며,
해당 스타일이 적용된 span 요소는 가로 30px, 세로 30px 크기로 설정되며, 배경색은 tomato로 지정됩니다. 그리고 "display: flex;"를 사용하여 내부 요소를 가운데로 정렬하도록 설정하고 있습니다.
- 동그란 모양을 만들기 위해선 border-radius를 width와 height의 반으로 하면됨
ex) width:20px; height:20px; border-radius: 10px
- 아이콘위에 채팅창 알림표시를
position: absolute를 이용해서 옮길 때왜 top bottom, left right를 반대로 적는건지는 padding을 준다고 생각하면 될것같다.
top:10px이라고하면 top에 padding을 10px준다라고 해석하면 편하다!
❗ 참고로position:absolute;는 가장 가까운 부모 요소에 position:relative가 있다면, 그 부모 기준으로 top, bottom, left, right 속성을 이용해서 위치를 조정할수있다.
참고! 폰트어썸 아이콘 크기 조절하는 코드 예시
<i class="fas fa-wifi fa-xs"></i>
<i class="fas fa-wifi fa-sm"></i>
<i class="fas fa-wifi fa-lg"></i>
<i class="fas fa-wifi fa-2x"></i>
<i class="fas fa-wifi fa-3x"></i>
<i class="fas fa-wifi fa-5x"></i>
<i class="fas fa-wifi fa-7x"></i>
<i class="fas fa-wifi fa-10x"></i>
