[수업노트](20.10.30)D+16 position-fixed/::before/::after/transistion/opacity

1. position-fixed

- 스크롤바를 따라 다닌다

- 유령: absolute,fixed/사람:relative,static

---

2. ::before/ ::after

- 공통되는 데이터가 엘리먼트의 말머리나 말미에 넣어야 할때 CSS 속성을 부여하여 한번에 바꿔줌
- 선택 엘리먼트와는 부모자식 관계이다.(before는 가장 첫째 자식, after는 가장 막내자식)

- ul > li::after { content:"님"; } 입력시 모든 div텍스트 뒤에 님이 표시됨

- 기본 display는 inline이다

<!-- ul>li*10{연예인 $} -->
<ul>
    <li><!-- ::before의 자리 -->연예인 1<!-- ::after의 자리 --></li>
    <li>연예인 2</li>
    <li>연예인 3</li>
    <li>연예인 4</li>
    <li>연예인 5</li>
    <li>연예인 6</li>
    <li>연예인 7</li>
    <li>연예인 8</li>
    <li>연예인 9</li>
    <li>연예인 10</li>
   

/* ::after => 새로운 막내자식을 추가한다. */
ul > li::after {
    content:"님";
}

/* ::after => 새로운 막내자식을 추가한다. */
ul > li::before {
    content:"위대하신 ";
}
ul > li::after, ul > li::before {
    display:block;
}

---

3. transition

- 너비나 높이 배경색 등의 속성값이 변할때 시간을 설정할 수 있다.

 ex) {transition: width 1s 5s, height 2s 3s;}

  → 너비 값이 지정한 값으로 5초 뒤에 1초 동안 작동한다

      높이 값이 지정한 값으로 3초 뒤에 2초 동안 작동한다.

 - 너비가 auto일때 작동하지않음, 코드펜에서는 body height:100vh(화면에 맞춘다);를 지정해주어야 작동한다.

 

 * CSS 가상선택자hover를 사용할때 

   - hover 가상선택자에 transition 값은 동작되는 값 

   - 일반 선택자에 transition 값은 돌아가는 값 

 

---

4. opacity

- 불투명도(0: 투명/1: 불투명)