웹 프로그래밍[6] - CSS : Transform (모양변환), Transition (전환효과), animation, 비트맵vs벡터 이미지, 미디어쿼리

📌 교내 '디지털 콘텐츠 웹 프로그래밍' 수업 내용과 'Do it 인터랙티브 웹 페이지 만들기' 유튜브 강의를 통해 공부한 내용을 정리하였습니다.

 

 

 

콘텐츠 모양 변형하기

 

🔶 Transform 2D

 

속성값	설명
scale	선택한 요소의 크기를 확대, 축소한다. 1보다 크면 확대
skew	선택한 요소를 x축 또는 y축으로 비틀어 변형한다. 원하는 각도를 지정하여 기울기를 조절할 수 있다.
translate	선택한 요소를 현재 위치 기준에서 x축 또는 y축으로 이동할 수 있다.
rotate	선택한 요소를 회전시킨다. 원하는 각도를 지정하여 회전할 수 있다.

 

 

 

👉 section{} : 검정색 네모 경계선 생성 

👉 section article{} : 배경색 네모모양에 맞게 설정 

👉 section : nth-of-type(n) article{} : 각 article 자식요소에 접근하여 모양을 변형 

 

 

 

 

 

🔶 Transform 3D

 

속성값	설명
rotateX, rotateY	선택한 요소를 x 축 또는 y축으로 입체감 있게 회전한다.
translateZ	선택한 요소를  z축으로 입체감 있게 보이면서 이동시킨다.

 

 

 

 

 

 

🔶 perspective

 

속성값	설명
px	3D 효과가 적용된 요소가 입체감 있게 보이도록 부모 요소에 perspective 속성을 적용하여 원근감을 부여

 

 

 

 

 

 

🔶 transform-style

 

속성값	설명
preserve-3d	3D 효과가 적용된 요소에 모션 처리를 하면 해당 3D 효과가 풀리는데 부모요소에 preserve-3d 속성을 적용하여 3D 효과를 유지시킨다.

 

 

 

 

🔶 transform-origin 

 

속성값	설명
가로축, 세로축	요소의 변형이 일어나는 중심축을 가로축, 세로축 기준으로 변경할 수 있다.

 

👉 모양의 변형이 일어날 때, 기본 중심축 transform-origin 을 임의로 변경

 

 

 

 

👀 transform-origin : 가로축 세로축;

 

👉 왼쪽 그림 : center (가로축) center (세로축) 로 중심 위치를 기준으로 Y축으로 120도 회전 

👉 오른쪽 그림 : right (가로축) center (세로축) 로 가로 중심 축을 오른쪽으로 이동시켜 Y축으로 120도 회전 

 

 

 

사용자 행동에 반응하는 전환효과

 

🔶 Transition

 

속성명	속성값	설명
transition-property	속성명	전환효과를 줄 css 속성명을 지정한다. 여러개 지정할 수 있고 all 을 입력하면 전체 속성을 사용할 수 있다.
trainsition-duration	지속시간	전환효과가 발생할 때 지속할 시간으로 초 단위로 입력한다.
trainsition-delay	지연시간	전환효과가 발생할 때 지연할 시간으로 초 단위로 입력한다. 지연시간 이후에 전환효과가 발생한다.
trainsition-timing-function	가속도	* linear : 등속효과 * ease : 가속효과 * ease-in : 모션 시작 시 가속 * ease-out : 모션 종료 시 가속  * ease-in-out : 모션 시작, 종료시 모두 가속  * cube-bezier : 사용자가 지정한 가속효과 적용
trainsition	속성명/전환시간/가속도/지연시간	모든 전환효과 관련 속성값을 한꺼번에 축약해 사용할 수 있다.

 

 

 

⭐ hover : 마우스를 올리면 모양이 변경됨 

 

👉 transition-property : transform 과 opacity (background-color) 에 대해서 전환효과를 적용한다. 

 

👉 duration, delay, timing-function 을 적용 - 부드럽게 모션 효과가 발생함

 

 

 

 

 

 

 

애니메이션 효과

 

👀 transition 은 사용자가 어떤 행동을 해야지 동작이 되는 전환효과이고, 애니메이션은 사용자가 아무런 행동을 하지 않더라도 자동으로 움직인다. 

 

🔶 animation 속성 

 

 

 

 

 

👉 @keyframes rotation : 모션의 이름(rotation) 은 마음대로 지어도 됨. 시작지점 0%일땐 0도로 회전, 끝 지점 100%일땐 360도로 회전 💨 한바퀴 회전하는 움직임 

👉 animation-name : 키프레임즈로 만든 rotation 을 지정 

👉 linear : 등속운동

👉 iteration-count : 반복회수 2번 회전 (infinite 로 지정하면 무한으로 회전) 

 

 

 

 

 

👉 사용자가 행동하는 것에 따라서 애니메이션을 수동으로 동작시킬 수 있음 (running, paused)

 

 

 

비트맵과 벡터 

 

🔶 비트맵과 벡터 방식의 차이 

 

비트맵 이미지	벡터이미지
수많은 픽셀을 조합해 이미지를 출력	좌표값을 연결해 이미지를 출력
확대하면 이미지 품질이 떨어진다.	확대해도 이미지 품질이 떨어지지 않음
파일 용량이 크다.	파일 용량이 비트맵보다 작다.

 

 

 

👉 svg 확장자 : 벡터 이미지 

 

 

width 를 증가시켜 확대

 

 

반응형 웹, 미디어 쿼리 

 

👉 미디어 쿼리 : 모바일 웹 기반의 확장 (반응형 웹) 

 

👉 하이브리드 앱, 네이티브앱, 모바일앱, 웹앱 

 

👉 푸쉬서비스(정보를 계속 받는 구조) : 네이티브앱, 웹앱 

 

🔶 화면 너비에 맞게 웹 페이지 디자인 변경하기

 

 

 

 

🔶 미디어쿼리 사용해서 배경색 바꾸기 

 

 

 

 

 

3️⃣ 미디어 쿼리 적용하기 

 

웹 브라우저의 너비값이 900px 보다 작을 때 결과화면

 

웹 브라우저 너비값이 400px 보다 작을 때 결과화면