css 기초 정리(3)

2020-01-01

해당 Post는 Transition에 대한 내용임

css 기초 정리(3)

Transition

Transitions는 무엇인가?
Transitions -이동/변경- 을 멋지게 보여주는 효과

for example

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>transition</title>
    <style>
      .box{
        background-color : green;
        color:white;
        transition : all .5s ease-in-out;// 변경사항을 0.5초 이내에
      } //ease-in-out 이란 천천히 변경되게 설정함
      .box:hover {
        background-color : blue;
        color : black;
      }
      .box:active {
        background-color : red;
        color : white;
      }
    </style>
  </head>
  <body>
    <span class = "box">
      Text
    </span>
  </body>
</html>

Transitions이란 이렇게 어떤 state가 바뀔때 적용이 됨.
state들은 hover, active, focus, visited가 있음.

  • hover : 요소 위에 마우스 커서 올려놓을 때 스타일 지정.
  • active : 요소를 마우스로 클릭하는 순간의 스타일 지정.
  • focus : 요소에 커서 위치해 선택된 동안의 스타일 지정.
  • visited : 방문한 경우 요소의 속성을 스타일 지정.