728x90 Web 개발/HTML.CSS27 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 - flex(2) 안녕하세요, 지난 시간에 정리하였던 container에 부여하는 flex 속성에 이어서 오늘은 items에 적용하는 속성들에 대해 간단히만 정리하려 합니다! Items -. order : Item의 순서를 설정 (기본값 : 0) -. flex-grow : Item의 증가 너비 비율을 설정 (숫자가 클수록 큰 너비를 차지) (기본값 : 0) -. flex-shrink : Item의 감소 너비 비율을 설정 (숫자가 클 수록 큰 너비가 줄어듬) (기본값 : 1) -. flex-basis : Item의 (공간 배분 전) 기본 너비를 설정 (기본값 : auto / item 안의 요소의 너비가 item의 기본 너비에 비례) flex-basis만 간단히 코드와 결과 화면으로 확인해보겠습니다. Good job A He.. 2021. 6. 9. 이전 1 2 3 4 ··· 7 다음
