transition-timing-function
-
<HTML/CSS> Transition 2 - 마우스를 올리면 요소의 크기와 위치 변화컴퓨터 알아가기/HTML CSS 2022. 9. 16. 19:30
지난시간 마우스를 올리면 글씨색이 변한다던가 사이즈가 변하는 기초적인 transition 기능을 이해해 보았습니다만, 이번시간에는 사이즈가 변하면서 위치가 이동되는 내역을 이해해 보도록 하겠습니다. HTML상 클래스명이 squre인 태그를 만들고 다음과 같이 칼라가 회색인 네모박스를 만들어 봅니다. 이번에는 간단한 CSS 영역이므로 HTML상 같이 사용하도록 하겠습니다. 브라우저상 다음과 같이 나옵니다. 이 네모박스를 마우스를 올려 놓았을때 왼쪽으로 100px 움직이면서 크기는 두배로 늘어나는 애니메이션 기능을 공부하고자 하는데 transition 기능을 사용하면 됩니다. 필요한 기능을 고민해 보면 다음과 같이 정리할 수 있습니다. ① 마우스 올리는 기능은 hover ② 크기 2배인 경우는 hover시 ..
-
CSS Transition : Hover, Transition duration, Transition delay, Timing function, Transition 단축속성값, Transition 단축조합컴퓨터 알아가기/HTML CSS 2021. 5. 21. 19:30
CSS Transition 즉 CSS 전환은 한마디로 시각적으로 변환되는 것을 말합니다. 예를 들어 마우스를 올리면 색이 변하는 것처럼요. 다음 CSS와 브라우저를 기준으로 예를 들겠습니다. 하나의 태그로 나타내면 브라우저는 다음과 같습니다. ▒ Hover Hover는 CSS 변환에서 가장 쉽게 볼 수 있는 속성입니다. 마우스를 올렸을때 Hover를 사용한 속성값을 표시해 줍니다. 사용법은 지정하고자하는 이름에 콜론 ":" 과 함께 hover라고 표시해 줍니다. 다음 CSS는 trans 클래스에 hover를 사용하여 위 그림의 Orange색을 연두색계열로 바꾸어 주는 코드입니다. 그리고 나서 Hello!에 마우스를 대보면 다음과 같이 색이 변합니다. ▒ Transition Duration (전환 시간) ..