CSS Transition : Hover, Transition duration, Transition delay, Timing function, Transition 단축속성값, Transition 단축조합

CSS Transition 즉 CSS 전환은 한마디로 시각적으로 변환되는 것을 말합니다. 예를 들어 마우스를 올리면 색이 변하는 것처럼요. 

 

다음 CSS와 브라우저를 기준으로 예를 들겠습니다. 

 

 

하나의 <div>태그로 나타내면 브라우저는 다음과 같습니다. 

 

 

 

---

 

▒ Hover

 

Hover는 CSS 변환에서 가장 쉽게 볼 수 있는 속성입니다. 마우스를 올렸을때 Hover를 사용한 속성값을 표시해 줍니다. 사용법은 지정하고자하는 이름에 콜론 ":" 과 함께 hover라고 표시해 줍니다. 다음 CSS는 trans 클래스에 hover를 사용하여 위 그림의 Orange색을 연두색계열로 바꾸어 주는 코드입니다. 

 

 

그리고 나서 Hello!에 마우스를 대보면 다음과 같이 색이 변합니다. 

 

 

---

 

▒ Transition Duration (전환 시간)

 

이번에는 trans 클래스에 전환 시간을 다음과 같이 CSS를 작성해 봅니다. 

 

 

마우스를 Hello 박스에 올려 놓으면 2초의 시간동안 색이 변하는 것을 볼 수 있습니다. 이거는 글로는 표현이 안되네요. 사람의 눈이 깝빡이는 속도(400ms)가 빠르기 때문에 second(초)를 millisecond(천분의 1초)로 CSS를 바꾸고 마우스를 올려서 확인해 보기 바랍니다. 

 

---

 

▒ Transition Delay

 

transition-delay 속성은 어떤 변환이 일어나기전까지 시간을 지연시키는 역할을 합니다. CSS 코드는 다음과 같이 작성합니다. 

 

 

---

 

▒ Timing Function

 

 

변환에 대한 전환시간과 지연시간등을 조절 하는 기능을 Timing Function이라고 하고 속성이름으로는 transition-timing-function으로 나타냅니다. 속성값으로는 다음이 있습니다. 

 

▶ ease-in 

 

변환 시작은 천천히 시작되나 끝나는 시간까지 빠르게 변함

 

▶ ease-out

 

변환 시작은 빠르게 시작되나 끝나는 시간까지 천천히 변함

 

▶ ease-in-out 

 

변환 시작은 느리게 시작하고 중간에 빨라지다가 끝나는 시간이 느려짐

 

▶ linear

 

처음부터 끝까지 일정한 시간으로 변환

 

---

 

▒ Transition Shorthand

 

역시 CSS변환에도 축약된 속성값을 사용할 수 있습니다. 다음 CSS를 기준으로 보면 

 

 

위 transition-속성값이 쓰여있는 4가지 값은 자주 사용하게 됩니다. 따라서 다음과 같이 줄여서 사용할 수 있습니다. 

 

 

---

 

▒ 단축속성 Combination

 

바로 위 예제는 단축속성값으로 색 변환에 대한 시간을 duration, timing 기능, delay만 표시하였는데 추가되는 속성을 같이 넣고자 하면 다음과 같이 쉼표 "," 로 연결해 줍니다. 

 

 

 

---

 

지금까지 CSS에 대하여 기본을 전부 확인하였습니다. 어떻게 보면 지루할수도 있었고 흥미를 잃을 수도 있는 시간도 있었으리라 봅니다만 하나하나 새로운 것을 늦은 나이에도 배울 수 있다는 기쁨이 더 큰 것 같습니다. 

 

지금껏 해 온 HTML과 CSS는 코드를 이해하기 위한 기본이고 기회가 되는만큼 자신 스스로가 여러 소스를 보면서 나만의 홈페이지를 만들어 보는게 어떤지요?

 

저도 이제부터는 틈나는 대로 제가 해보고 싶었던 페이지작업을 진행할 예정입니다. 준비하면서 또 필요한 언어가 있으면 공부할것이며 그로인해 제2의 인생을 열 수 있는 기회가 생길지 누가 알겠습니까?

 

일방적으로 제가 말했지만 그래도 여기까지 보신분이 있다면 수고 하셨고 고맙습니다. 

 

이제부터입니다!!!!