CSStransform 2

[TIL] CSS: 웹에 생동감을 더하는 transform, transition, animation 가이드

CSS transform 속성 - 레이아웃 흐름을 방해하지 않고 요소의 형태와 위치를 시각적으로 변형하는 기법CSS transition 속성 - CSS 속성값 변화를 일정한 시간에 걸쳐 부드럽게 전환하는 애니메이션 가교 역할CSS Animation 속성 - 키프레임을 활용하여 다단계의 복잡하고 반복적인 움직임을 구현하는 설계 방식CSS translate 중앙 정렬 기법 - 요소의 크기에 구애받지 않고 화면 정중앙에 배치하는 실무 레이아웃 공식 CSS 이징(Easing)의 개념 - 속도의 변화를 제어하여 애니메이션에 리듬감과 자연스러움을 부여하는 기술 CSS transform 정적인 요소를 움직이고 회전시키는 transform 속성은 웹 디자인에 생동감을 불어넣어준다. transform의 정의 요소가 페이..

코딩/CSS 2026.03.27

[코드 연습장] CSS: transform 변형 함수와 transition 애니메이션 기초 실습

웹 요소를 이동시키는 translate() 함수트렌스레이트 transition: 1s; 부드럽게 움직이게 한다(0.6초 정도 추천) #movex:hover { transform: translateX(50px); 마우스를 올리면 x좌표로 50px이동 요소를 확대 축소하는 scale() 함수스케일 요소를 회전시키는 rotate() 함수 트랜지션의 속성을 한꺼번에 표기하는 transition원본 요소를 디자인원본에 수도 클래스(호버 클래스) 생성호버 클래스 내부에 변해야될 상태 디자인원본에 트렌지션 부여 (호버 클래스에 부여도..

코딩/CSS 실습 2026.03.27