코딩 자율학습 HTML + CSS + 자바스크립트: 6.6 전환 효과 속성 적용하기

slide 1 of 23, currently active
slide 2 of 23
slide 3 of 23
slide 4 of 23
slide 5 of 23
slide 6 of 23
slide 7 of 23
slide 8 of 23
slide 9 of 23
slide 10 of 23
slide 11 of 23
slide 12 of 23
slide 13 of 23
slide 14 of 23
slide 15 of 23
slide 16 of 23
slide 17 of 23
slide 18 of 23
slide 19 of 23
slide 20 of 23
slide 21 of 23
slide 22 of 23
slide 23 of 23

CSS

6.6

전환 효과 속성 적용하기

6.6.1 전환이란

CSS에서 한 요소에 적용된 스타일 속성값을 다른 속성값으로 변하게 하는 것을 전환(transition)이라고 합니다. 전환이 어떤 건지 다음 코드를 보며 이해해 봅시다.

06/06/transition.html

  <style>
    .red-box{
      width:100px;
      height:100px;
      background-color:red;
    }
    .red-box:hover{
      background-color:blue;
    }
  </style>
</head>
<body>
  <div class="red-box"></div>
</body>

그림 6-70 실행결과

코드를 실행하면 빨간색 요소가 보입니다. 빨간색 요소에 마우스를 올리면 :hover 가상 클래스 선택자 때문에 파란색으로 변합니다. 이처럼 전환은 기존 속성값이 다른 값으로 변경되는 것을 말합니다. 그리고 CSS3에서 이런 전환이 발생할 때, 전환 효과를 직접 속성으로 지정할 수 있는 전환 효과 속성이 새로 추가됐습니다.

신간 소식 구독하기

뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.