CSS_transition, opacity, overflow

▶️ transition 속성

  .box {
    opacity : 0;
    transition : all 1s;
  }

transition을 부여하면 적용된 CSS가 변할때 서서히 변경해준다. all은 모든스타일을 지정하는 것이고(여기서는 opacity만 따로 줄 수도 있음) 1s는 1초에 걸쳐서 서서히 변경해달라는 의미이다.

▶️ 세부 transition 속성

  .box {
    transition-delay: 1s; /* 시작 전 딜레이 */
    transition-duration: 0.5s; /* transition 작동 속도 */
    transition-property: opacity; /* 어떤 속성에 transition 입힐건지 */
    transition-timing-function: ease-in; /* 동작 속도 그래프조정 */
  }

동작 속도 그래프 조정은 아래 사이트에서 세부 조정이 가능하다. https://cubic-bezier.com/

▶️ opacity속성

  .box {
    opacity : 0
  }

현재 HTML 요소의 투명도를 조절할 수 있다.0부터 1까지의 실수를 입력할 수 있고, 0.5는 반투명이다.

▶️ overflow속성

  <div style="width: 50px; height: 50px; overflow: hidden">
      <p>aaaaaaaaaaaaaaaaaaa</p>
  </div> 

1. overflow라는 속성은 박스의 폭이나 높이를 초과하는 내부요소를 처리하기 위한 속성이다. hidden 값을 주면 넘치는 내부요소를 자동으로 잘라 없애준다.
2. overflow : visible은 넘치는 부분을 그대로 보여주고, overflow : scroll은 넘치는 요소를 보기 위한 스크롤바를 만든다.