CSS를 이용해서 효과 주기(비디오 버전)

좋아요
지금쯤 여러분은

'setInterval'을 쓸 지

'requestAnimationFrame'
을 쓸 지 고민이 될 거에요

여러분이
효과를 주고 싶을 때요

하지만 전
더 나아가서

다른 선택지를
제시할게요

크롬, 파이어폭스와
익스플로러 10 이상에서는

CSS로 효과를 주는
다른 방법이 있어요

자바스크립트를
사용하지 않고 말이죠

방금 쓴 코드를
주석 처리하고

ohnoes 효과를
적용해 볼게요

여기 전체를
주석 처리할게요

태그를
추가하는 걸로 시작해보죠

그리고 CSS 규칙같은 걸
추가할거에요

하지만 사실 이건
효과를 정의하는 것이죠

여기에
'@keyframes'을 쓰고

효과의 이름을
쓰세요

'getbigger'

그리고
중괄호를 닫아요

이 간단한 효과를
주기 위해서는

한 상태에서
다른 상태로 전환시킬 때요

이걸 시작(from)과
종료(to)상태라고 할게요

시작상태(from)
안에는

시작 CSS 속성에 대해
적어주면 돼요

처음에 50픽셀로
정했던 것 기억나죠?

종료상태(to)
안에는

종료 속성에 대해
적어주면 돼요

이건 아마 300픽셀 정도
였을거에요

기억나시죠?

이제 효과를
정의했으니까

브라우저에게
말해줘야해요

어떤 요소에
이 효과를 적용할 지 말이죠

그래서 ohnoes에게
일반적인 CSS규칙을 줄 거에요

이 안에서는
효과 이름을 정해주고

그러니까
'getbigger'죠

효과 지속시간을
정해줘요

3초 겠네요

여러분이 사용하는
브라우저에 따라서

이렇게 생각하고
있을지도 몰라요

우와 멋져요
작동하네요!

하지만
다른 브라우저에서는

사파리나
크롬에서는 말이죠

작동하지
않을 수도 있어요

그건 '브라우저 접두어'
(vendor prefix) 때문이에요

종종
브라우저는

멋진 새 기능을
도입하기로 하는데

하지만 그 기능에
접두어를 붙여서

이건 나중에 바뀔 수도 있다고
표시해 주는 거에요

이건 그냥
그 브라우저의

그 기능에 대한
접근일 뿐이에요

크롬에서
작동하게 하려면

만약 아직 기능이
준비가 되지 않았다면

우리가 방금 했던 걸
복사해서

앞에 'webkit'을
추가해줘야 해요

그러니까
이 부분을 똑같이 쓰고

'-webkit-'을
여기다 쓰세요

그리고 여기도 또 쓰고
'-webkit-'을 붙이세요

우와
멋져요!

이제 모든 브라우저에서
커지게 될 거에요

여러분이 이 영상을
볼 때 쯤이면

브라우저 접두어를
안 써도 됐으면 좋겠네요

하지만 이런 게 있다는 걸
알고있으면 좋아요

다음에 이걸 언젠가
써야할 때가 올 지도 모르니까요

CSS로 효과를 주는 방법이
또 한가지 더 있어요

이건 전환 속성을
사용하는 거에요

브라우저가 부드럽게
전환을 할 수있게 해줘요

한 속성에서
다음 속성으로요

예를 들어
글자 크기를

남은 시간에 따라
커지게 하고 싶다고 해요

마우스 포인터를
위에 올릴 때 말이죠

이걸 자바스크립트로
할 수 있어요

마우스 오버에 대한
이벤트를 주는 걸로요

그리고 requestAnimationFrame
을 사용해서

매번 글자 크기 속성을
증가시켜주는 거에요

하지만 이걸
CSS만으로도 할 수 있어요

생각해봐요

일반적으로
글자 크기를 어떻게 키우죠?

CSS에서 마우스를
올렸을 때 말이죠

이건 호버(hover)를
사용하면 할 수 있어요

'#countdown: hover'
라고 쓰고

'font-size: 150px;'
라고 해요

좋아요
이제 우리는 브라우저에게

글자 크기 속성을
전환시키고

전환이 얼마 동안
일어나야 하는지 말해줘야해요

그리고 어떤
시간 함수를 쓸 지도요

'transition: font-size 1s linear'
라고 쓰고

이제 이 프로그램을
멈추고

마우스를 올리고
어떻게 되나 보세요

크롬, 파이어폭스나
익스플로러 10 이상을 쓴다면

이건 천천히
커지게 될 거에요

이 방식을 쓰면
브라우저 접두어는 필요없어요

여러분이 할 수 있는
수많은 것들이 있어요

CSS효과와 전환을
사용해서 말이죠

그리고 브라우저는 빠르게
효과를 잘 만들어 줘요

그러니까 두 가지 모두
많이 찾아보길 바래요