css 스타일로 전환 효과 주기

네 안녕하세요, 이번 포스팅에서는 css로 전환 효과를 주는 방법에 대하여 알아보도록 하겠습니다.

전환 효과도 이전에 작성한 포스팅인 애니메이션 효과처럼 많이 쓰는 방법 중 하나입니다.

그럼 지금부터 시작하도록 하겠습니다.

1. 전환 효과 사용하기

html에서의 전환이란, html 태그에 적용이 된 css의 프로퍼티 값이 변할 때,

그 값의 변화를 서서히 진행시켜서 애니메이션 효과를 내는 방법을 이야기합니다.

그리고 일반적인 애니메이션 효과와 다르게 1회만 이루어진다는 특징이 있습니다.

전환 효과를 사용하는 방법은 다음과 같습니다.

1 - 1. 전환 프로퍼티와 전환 시간 지정하기 : transition 이용

제일 먼저 할 것은 전환 프로퍼티를 이용하여 해당 프로퍼티와 전환 시간을 지정하는 것입니다.

사용하는 프로퍼티의 이름은 transition입니다.

사용 방법은 아래와 같습니다.

transition : 전환 프로퍼티 전환 시간
/*전환 프로퍼티 : 이 프로퍼티의 값이 변하면 현재 값에서 새 값으로 전환 효과를 줌
  전환 시간 : 현재 값에서 새 값으로 변하는 데 걸리는 시간*/

이렇습니다.

그래서 이걸 직접 적용해서 써보면 이렇게 쓸 수 있습니다.

span {
    transition : font-size 5s; /* 전환 프로퍼티 : font-size, 전환 시간 : 5초 */
}

1 - 2. 전환 효과 시작하기

전환 효과는 전환 프로퍼티의 값이 변경되면 자동으로 시작이 됩니다.

제일 쉬운 예시로 이벤트 속성을 적용시켜 주면 그런 일이 일어납니다.

이렇게 쓸 수 있습니다.

span:hover {
    font-size : 500%;
}

이렇게 쓰게 되면 마우스 커서가 올라갔을 때 글자 크기가 500%로 확대되게 됩니다.

그럼 이제 이들을 이용해서 한 번 코드를 작성해 보도록 하겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>전환</title>
    <style>
        span {
            transition: font-size 5s;
        }
        span:hover {
            /* 5초에 걸쳐 500%까지 글자 키우는 전환 효과 시작 */
            font-size : 500%;
        }
    </style>
</head>
<body>
    <h3>font-size에 대한 전환</h3>
    <hr>
    <p><span>꽝!</span> 글자에
     마우스를 올려보세요.</p>
    </body>
</html>

이제 결과를 보도록 하겠습니다.

이런 식으로 마우스 커서가 올라가게 되면 글자가 커지게 되고,

반대로 커서를 내리면 글자 크기가 원래대로 돌아오게 됩니다.

여기까지 전환 효과를 주는 방법에 대하여 알아보았습니다.

다음 포스팅에서는 변환 효과를 주는 방법에 대하여 알아보도록 하겠습니다.

긴 글 읽어주신 독자분들께 진심으로 감사드립니다~

저작자표시 비영리 변경금지

'html, css, 자바스크립트 > css' 카테고리의 다른 글

css 스타일로 변환 효과 주기 (0)	2023.06.30
css 스타일로 애니메이션 주기 (0)	2023.05.22
css 폼 요소에 마우스 처리 하기 (0)	2023.05.15
css 폼 요소 테두리 꾸미기 (0)	2023.05.08
css 폼 요소에 스타일 입히기 (0)	2023.05.08

개발러 L의 뻔fun한 코딩

css 스타일로 전환 효과 주기