온라인 강의/HTML CSS 심화 (6) 썸네일형 리스트형 본문 영역 애니메이션 구현하기 쇼핑몰 본문의 영역에 마우스를 올렸을 때, 해당 영역의 배경색이 변하는 효과와, 이미지에 마우스를 올렸을 때, 이미지가 확대되는 효과를 구현해 봅시다! #main article.one:hover { }를 입력하고, 중괄호 안에, 마우스를 올리면 바뀌고자 하는 배경색을 background-color: ; 형태로 값은 #8683bd로 입력합니다. 효과가 동작되는 과정을 볼 수 있도록, #main article.one { } 중괄호 안에 transition의 property와 duration 속성값을 transition: ; 형태로 입력합니다. property : background-color duration : 0.3s 나머지 .two와 .three 클래스에도 마찬가지로 적용합니다. .two property.. 메뉴 영역 애니메이션 구하기 쇼핑몰 상단의 메뉴 버튼 텍스트에 마우스를 올렸을 때, 텍스트 색깔이 변하는 애니메이션 효과를 구현해 봅시다! index.css파일을 열어서 아래 속성값을 작성해봅시다. 효과가 동작되는 과정을 볼 수 있도록, #intro nav ul li a { } 중괄호 안에 transition의 property와 duration 속성값을 transition: ; 형태로 추가입력합니다. property 속성값 : color duration 속성값 : 0.3s #intro nav ul li a:hover { }를 입력하고, 중괄호 안에, 마우스를 올리면 바뀌고자 하는 텍스트 색깔을 color: ; 형태로 입력합니다. 색상은 #917f7f로 합니다. index.css파일의 79번째줄을 바꿔줍니다. #intro nav ul.. Transform & Animation transform과 animation을 결합하면 다양한 애니메이션 효과를 만들 수 있습니다. 해당 실습에서는 회전하는 애니메이션 효과를 만들어 봅시다! .box1 안에 animation 속성을 입력합니다. 애니메이션 이름은 rotation으로 설정합니다. duration으로 1500ms을 입력합니다. 이때, 1000ms은 1s입니다. timing-function으로 linear을 입력합니다. iteration-count으로 infinite을 입력하여, 반복 효과가 무한으로 나타나도록 합니다. direction으로 alternate을 입력하여, 왕복 효과가 나타나도록 합니다. @keyframes rotation { }를 작성하여 from과 to를 설정합니다. from은 transform: rotate(-1.. Animation animation은 특정 지점별로 애니메이션 효과를 적용할 때 사용됩니다. name, duration, timing-function, delay, iteration-count, direction 속성을 사용하여, 가로폭이 반복적으로 길어지고 좁아지는 효과를 만들어 봅시다! 또한 @keyframes changeWidth { }를 사용하여 효과가 어떤 형태로 일어날지 정해봅시다! animation-name으로 changeWidth를 입력하여, 애니메이션의 이름을 설정합니다. animation-duration으로 3s를 입력합니다. animation-timing-function으로 linear을 입력합니다. animation-delay로 1s를 입력합니다. animation-iteration-count으로 6.. Transition transition은 특정 조건 하에서 애니메이션이 동작되는 과정을 보여주고자 할 때 사용됩니다. property, duration, timing-function, delay 속성을 사용하여, 마우스를 올렸을 때 가로폭이 길어지는 효과를 만들어 봅시다! 태그 안에 .transition:hover { width: 300px; }를 입력하여, 특정 영역 마우스를 올렸을 때, 가로폭이 300px로 변하도록 합니다. transition-property로 width를 넣어, width에 효과를 적용하도록 합니다. transition-duration로 2s를 넣어, 효과가 2초 동안 일어나도록 합니다. transition-timing-function로 linear를 넣어, 효과 속도를 일정하게 합니다. transi.. Transform transform은 특정 영역을 회전시키거나, 확대/축소시키거나 각도를 변경하여 비틀거나 위치를 변경하는 등의 효과를 적용할 때 사용됩니다. rotate, scale, skew, translate 속성값을 사용하여 각각의 효과를 적용해 봅시다! .transform클래스 내에 아래 속성값을 작성해보며 각각의 실행결과를 비교해봅시다. 이때 margin: 200px 0 0 200px; 을 입력하여 결과물을 확인합니다. 도형을 45도 회전시키기 위해 transform: rotate();의 괄호 안에 45deg를 넣고 실행해봅시다. 가로폭은 두 배, 세로폭은 세 배 확대하기 위해 transform: scale();의 괄호 안에 2, 3을 넣어 실행해봅시다. x좌표와 y좌표를 바꿔주기 위해 transform: tr.. 이전 1 다음
