728x90 html20 HTML/CSS - animation/다단 안녕하세요, HTML/CSS에서 animation 요소와 다단에 대해 정리해 보겠습니다. 애니메이션 때문에 이미지로는 한계가 있어 코드 위주로 정리하겠습니다.. ◆ animation: 애니메이션이름 지속시간(s) [타이밍 함수 대기시간 반복 획수 반복 방향 전후 상태 재생/정지]; 여기서 애니메이션 이름은 @keyframes의 이름입니다. @keyframes는 2개 이상의 애니메이션 중간 상태(프레임)을 지정해 줍니다. @keyframes는 애니메이션의 변화를 설정해주기 때문에 꼭! 정의해 주어야 합니다! @keyframes 양식 @keyframes 애니메이션 이름 { 0% { 속성: 값; } 50% { 속성: 값; } 100% { 속성: 값; } } .box { width: 100px; height: .. 2021. 6. 27. HTML/CSS - transform 안녕하세요, 오늘은 transform 변환 속성에 대해 정리하겠습니다. transform은 요소들에 이동, 크기 변환, 회전, 비틀기 등을 적용할 때 사용하는 함수입니다. transform은 애니메이션화 할 때 사용하면 유용합니다. 2D 변환과 3D 변환이 있습니다. 직접 코딩하면서 보는 것이 이해하기 쉬우므로 translate만 코드를 보고 나머지는 한 번씩 Codepen에서 실행해보시기 바랍니다! ◆ 2D 변환 이동 : position이라는 속성을 이용해도 동일한 효과를 주지만 position은 배치하고 변경을 안해줘야 하므로 애니메이션이나 변경되는 상황에서는 translate을 사용해줘야합니다! -. translate(x, y) : 이동(X축, Y축) -. translateX(x) : 이동(X축) .. 2021. 6. 23. HTML/CSS - transition 안녕하세요, 오늘은 transition에 대해 공부해보겠습니다. transition은 CSS 속성의 시작과 끝을 지정(전환 효과)하여 중간 값을 애니메이션 해주는 것입니다. 단축 속성으로 transition-properey, transition-duration, transition-timing-function, transition-delay가 있습니다. ◆ transition -. transition-property : 전환 효과를 사용할 속성 이름 (기본값 : all) -. transition-duration : 전환 효과의 지속시간 (기본값 : 0초) -. transition-timing-function : 타이밍 함수 지정 -. transition-delay : 전환 효과의 대기시간 설정 (기본값 .. 2021. 6. 13. HTML/CSS - position(2) 안녕하세요, 이전에 position에 관하여 정리를 했었는데요, 추가로 간략히 정리할 겸 sticky 속성 값까지 추가하여 정리해보려 합니다. position은 요소의 위치 지정 방법의 유형(기준)을 설정하는 속성입니다. ◆ position의 속성 값 -. static : 요소의 기준이 없음/ 배치 불가능 (기본값) -. relative : 요소 자신을 기준으로 배치 -. absolute : 위치 상 부모 요소를 기준으로 배치 (위치 상 부모요소 : position 속성이 부여되어 있는 요소!) -. fixed : 브라우저(뷰포트)를 기준으로 배치 -. sticky : 스크롤 영역 기준으로 배치 position 속성을 사용하면 실질적으로 이동은 top, bottom, left, right 속성에 의해 정.. 2021. 6. 6. 이전 1 2 3 4 5 다음
