코코아클론강의 요약 #6.10~6.13

* Navigation bar in HTML

nav>ul>li*4>a  를 입력하면

하단의 내용이 생성됨 (#은 직접 입력한 것)

<nav>
      <ul>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
      </ul>
    </nav>

 

- navigation bar의 콘텐츠를 icon으로 지정하려면

  <li>
          <a href="friends.html"><i class="fas fa-user"></i></a>
        </li>

<a href>icon link</a> 

 

 

* Fontawesome의 icon size

fa-xs

fa-sm

fa-lg

fa-2x

fa-3x

...

fa-10x

 

* Color: inherit

: 모든 링크 <a>의 색상은 default = blue 이것을 바꿔주려면

 

1. 해당 CSS 파일에 하단의 내용을 입력

.nav__link {
    color:inherit;
}

2. reset.css 파일에 하단의 내용을 입력

a {
    color:inherit;
}

-> 모든 link가 color를 부모로부터 상속받기를 원한다.

 

* Navigation bar 위치 하단 고정

.nav {
position: fixed;
bottom: 0;
width: 100%;
}

 

이렇게 한 뒤에 패딩값이나 무언가때문에 contents가 화면 내에 다 표시가 되지 않을 때는

box-sizing: border-box; 를 입력해주면 됨

* 겹쳐서 보여주는 방법

.nav__notification {
    background-color: tomato;
    display: block;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    color: white;
    font-weight: 600;
    position: absolute;
    right: 5px;
}

이 때 < nav_notification>을 감싸고 있는 <nav_ink>에 position:relative; 를 줘야됨

 

* 

* 

* 

*