[필기] CSS 기초 (6) - 반응웹을 위한 Transform & Transition

transform 속성

 

chatGTP

`transform` 속성은 CSS에서 요소의 변형(이동, 회전, 크기 조절 등)을 적용하는 데 사용되는 속성입니다. `transform` 속성을 사용하면 요소를 다양한 방법으로 변형하여 웹 페이지의 다양한 효과를 구현할 수 있습니다. 주요한 변형 함수들을 아래에 정리해드리겠습니다:

1. `translate()`:
   - `translate()` 함수는 요소를 주어진 값만큼 이동시킵니다.
   - `translateX()`는 가로 방향으로 이동하고, `translateY()`는 세로 방향으로 이동합니다.
   - 예를 들어, `transform: translate(50px, 20px);`는 요소를 오른쪽으로 50px, 아래로 20px 이동시킵니다.

2. `rotate()`:
   - `rotate()` 함수는 요소를 주어진 각도만큼 회전시킵니다.
   - 각도는 도(degree) 단위로 지정하며, 양수는 시계 방향, 음수는 반시계 방향으로 회전합니다.
   - 예를 들어, `transform: rotate(45deg);`는 요소를 시계 방향으로 45도 회전시킵니다.

3. `scale()`:
   - `scale()` 함수는 요소의 크기를 주어진 배율만큼 조절합니다.
   - `scaleX()`는 가로 방향으로 크기를 조절하고, `scaleY()`는 세로 방향으로 크기를 조절합니다.
   - 예를 들어, `transform: scale(1.5);`는 요소의 크기를 1.5배로 늘립니다.

4. `skew()`:
   - `skew()` 함수는 요소를 주어진 각도만큼 기울입니다.
   - 각도는 도(degree) 단위로 지정하며, 양수는 오른쪽으로 기울이고, 음수는 왼쪽으로 기울입니다.
   - 예를 들어, `transform: skew(20deg, -10deg);`는 요소를 오른쪽으로 20도, 왼쪽으로 10도 기울입니다.

5. `matrix()`:
   - `matrix()` 함수는 요소의 변형 행렬을 직접 지정하는 함수입니다.
   - 변형 행렬은 이동, 회전, 크기 조절 등의 변형을 한 번에 지정할 수 있습니다.

`transform` 속성은 단순히 뷰포트에 보이는 요소의 모양을 변경하기 때문에, 원본 요소의 크기와 위치는 변하지 않습니다. 따라서 레이아웃에는 영향을 주지 않으면서 다양한 시각적 효과를 구현할 수 있습니다. 변형 함수들을 조합하여 웹 페이지의 요소들을 멋지고 동적인 디자인으로 꾸밀 수 있습니다.

---

`transition` 속성

 

 

chatGTP

`transition` 속성은 CSS에서 요소의 스타일 변화를 부드럽게 처리하는 데 사용되는 속성입니다. 요소의 스타일이 변경되었을 때, 변화가 부드럽게 일어나도록 애니메이션 효과를 추가할 수 있습니다. 주요한 속성들을 아래에 정리해드리겠습니다:

1. `transition-property`:
   - `transition-property` 속성은 어떤 스타일 속성에 트랜지션(변환) 효과를 적용할지를 지정합니다.
   - 여러 속성에 효과를 적용하려면 쉼표로 구분하여 지정합니다.
   - 예를 들어, `transition-property: width, height;`는 요소의 너비와 높이가 변경될 때 트랜지션 효과를 적용합니다.

2. `transition-duration`:
   - `transition-duration` 속성은 트랜지션의 지속 시간을 설정합니다.
   - 시간은 초(s) 또는 밀리초(ms) 단위로 지정합니다.
   - 예를 들어, `transition-duration: 0.5s;`는 트랜지션 효과가 0.5초 동안 지속되도록 합니다.

3. `transition-timing-function`:
   - `transition-timing-function` 속성은 트랜지션의 시간 경과에 따른 변화 속도를 지정합니다.
   - 다양한 속도 함수(ease, linear, ease-in, ease-out, ease-in-out 등)를 사용할 수 있습니다.
   - 예를 들어, `transition-timing-function: ease-in-out;`는 트랜지션의 시작과 끝 부분이 느리고 중간 부분이 빠르게 진행되는 함수를 적용합니다.

4. `transition-delay`:
   - `transition-delay` 속성은 트랜지션의 시작을 지연시킵니다.
   - 시간은 초(s) 또는 밀리초(ms) 단위로 지정합니다.
   - 예를 들어, `transition-delay: 1s;`는 트랜지션 효과가 1초 뒤에 시작되도록 합니다.

`transition` 속성을 사용하여 요소의 스타일 변화를 부드럽게 처리하면, 웹 페이지의 사용자 경험을 향상시킬 수 있습니다. 변화하는 스타일 속성과 지속 시간, 변화 속도 함수, 시작 지연 등을 조절하여 다양한 애니메이션 효과를 만들 수 있습니다.