728x90 반응형 transition4 [CSS] transition 속성 종류 Transition 사용법 속성 값이 변할 때 부드럽게 전환할 수 있도록 도와주는 것transition 속성은 요소가 새 스타일로 바뀌는 속도, 시간 및 방법을 제어 transition-property: 어떤 속성을 애니메이션할 것인지를 지정합니다.transition-duration: 애니메이션이 걸리는 시간을 설정합니다.transition-timing-function: 애니메이션 속도를 제어하는 함수입니다. 애니메이션이 진행되는 동안의 속도 변화를 정의합니다.transition-delay: 애니메이션이 시작되기 전의 지연 시간을 설정합니다. 1. transition-property .box { transition-property: background-color, width;}transition-pro.. 2024. 6. 30. [CSS] Transform&Transition 2탄 CSS 강의 Ep11_2 - Transform&Transition 2탄 | Transition | 웹 개발 입문 | 함께 웹 개발에 입문해 보는건 어떨까요? (youtube.com)transition에 대해 살펴보기전환이라는 의미. 가로 세로 200px인 div 태그마우스가 hover 됐을 때 가로세로 200px 을 가로세로 400px 로 변경하고 싶은 경우, transition을 사용하면 스무스하게 변형이 가능해진다.사용하는 방법 - transition 속성 이용하기transition-property= 속성 설정 transition이 실행될 때 타이밍 나타내기 단축 속성 사용하기transition 실습하기 box1에 마우스를 올렸을 때 사이즈를 200px 로 하기.transition을 적용할 경우bo.. 2024. 6. 29. [CSS] Transform&Transition 1탄 CSS 강의 Ep11_1 - Transform&Transition 1탄 | Transform | 웹 개발 입문 | 함께 웹 개발에 입문해 보는건 어떨까요? (youtube.com)Tansformtransform 사용 방법X 축으로 div 태그 20px 이동. 특수한 함수를 통해서 다양한 효과 나타낼 수 있음.다양한 효과 skew 함수 = 지정한 각도만큼 왜곡.실습 예시기본 세팅.- 박스 지정스타일링.translate 실습X 축으로 20px 이동한 거 확인 가능.좌측으로 이동하고 싶은 경우 음수 - 를 붙여서 적용시켜주면 됨.이렇게 넣어주면 한 꺼번에 X 좌표, Y 좌표 이동을 할 수 있다.scale 실습scale 안에는 숫자를 넣어주면 됨.2를 넣어줬을 경우,가로가 2 배가 된다.한 50% 줄이고 싶은 .. 2024. 6. 29. [생활코딩] CSS 수업 정리 (15) 전환 속성들의 값이 변경됐을 때 그 전환을 부드럽게 하는 기능 Click a { font-size: 3rem; } 사용자가 마우스를 클릭했을 때, 효과적용 하는 방법 = active 사용 display:inline-block 을 사용해야 transform transition이 적용된다 transform 이라고 하는 속성은 a 엘리먼트가 block level 엘리먼트 이거나, inline-block 인 경우에만 동작. inline 엘리먼트에서는 동작 X 부자연스러운 움직임 동작을 자연스럽게 하려면 = 전환 사용 a 태그에 대해서 모든 효과에 대해서 변화가 일어났을 때 전환이 일어난다 라는 의미 transition-duration:1s; 0.1s al.. 2023. 7. 24. 이전 1 다음 728x90 반응형
