KDT 5th 웹개발자 입문 수업 6일차

 

1. 전환 transition

요소의 전환(시작과 끝) 효과를 지정하는 속성, 원래 모양을 다른 모양으로 바꿀 때 사용

transition : 속성명 지속시간(필수) 타이밍함수 대기시간;

 

 

1-1. transition-property : 전환 효과를 사용할 [속성명]을 지정

  - all : 모든 속성에 적용, 기본값

  - 전환 효과를 사용할 특정 속성명을 정해줄 수 있음

 

1-2. transition-duration : 전환 효과의 [지속시간]을 지정

  - 0s : 기본값(전환되는 효과가 없어보임)

  - 단위값 s 지정 -> 전환 시, 전환이 끝났을 때 동일하게 지속시간이 정해짐

 

1-3. transition-timing-function : 전환 효과의 [타이밍 함수]를 지정

  - ease : 느리게 ➡️ 빠르게 ➡️ 느리게 [ cubic-bezier(0.25, 0.1, 0.25, 1) ]

  - linear : 일정하게 [ cubic-bezier(0, 0, 1, 1) ]

  - ease-in : 느리게 ➡️ 빠르게 ↔️ ease-out : 빠르게 ➡️ 느리게

  - ease-in-out : 느리게 ➡️ 빠르게 ➡️ 느리게 [ cubic-bezier(0.42, 0, 0.58, 1) ]

  - cubic-bezier(n, n, n, n) : 자신만의 값을 정의 가능, 0 ~ 1 사잇값

  - steps(n) : n번 분할된 애니메이션

 

1-4. transition-delay : 전환 효과가 몇 초 뒤에 시작할지 [대기(지연)시간] 지정

  - 0s : 대기 시간 없음, 기본값

  - 대기시간 s 으로 지정

 

*transition을 여러개 지정하고자 한다면, 아래처럼 구분자는 ,를 사용하여 나타내준다.

transition : width 1s ease-in, background-color 2s ease-out;

/*위와 아래는 같은 속성 지정이다.*/

transition-property : width, background-color;
transition-duration : 1s, 2s; 
transition-timing-function : ease-in, ease-out;

 

 

2. 변환 transform

요소의 변환 효과, 원래 요소의 모양을 변환하는 것이 아닌 이동, 회전, 크기, 기울임 등의 변환 애니메이션

transform : 변환함수1 변환함수2 ...;

transform : 원근법 이동 크기 회전 기울임;

*여러 변환 함수를 함께 섞어주려면 구분자는 공백임

 

2-1. 2D 변환 함수

px----

tanslate(x, y) x, y축 이동 

translateX() / tanslateY()

%---- 1을 기준으로 배수로 표현

scale(x, y) x, y축 크기 변환

scaleX() / scaleY()

 

deg---- 각도

rotate(deg) 평면(모니터상) 회전 ----> x, y축 회전과는 다름

skew(x, y) x, y축 기울임

skewX() / skewY()

 

matrix(n, n, n, n, n, n) 으로 2차원 변환 효과

 

 

2-2. 3D 변환 함수

translateZ()

translate3d(x, y, z)

 

scaleZ()

scale3d(x, y, z)

 

rotateX() x축 회전

rotateY() y축 회전

rotateZ() z축 회전

rotate3d(x, y, z)

 

perspective(px) 원근법(거리)함수, 하위 요소를 관찰하는 원근 거리를 지정

원근 거리가 작을수록 큰 변환을, 원근 거리가 멀수록 작은 변환이 적용

*변환 함수의 제일 앞에 작성해줘야함

 

2-3. perspective 속성과 함수의 차이점

2-3-1. 원근법 속성 -> perspective : px;

적용 대상이 관찰 대상의 부모, 즉 부모 요소 안에 속성을 넣어줘야 함

기준점은 perspective-origin

 

2-3-2. 원근법 함수 -> transform: perspective(px);

적용 대상이 관찰 대상

기준점은 transform-origin

 

*perspective 속성과 함수는 중첩이 가능하다.

 

 

2-4. backface-visibility

3d 변환으로 회전된 요소의 뒷면 숨김 여부

  - visible : 뒷면 보임

  - hidden : 뒷면 숨김

 

 

3. Responsive Web

반응형 웹 디자인

 

3-1. Viewport

기기마다 화면 사이즈가 다르기 때문에 기기에 맞춰 디자인을 하기 위한 크기 요소

디바이스 화면 크기를 고려하여 사용자에게 최적화된 웹페이지를 제공 가능하다.

<meta> 에 담겨있다.

 

3-2. 미디어 쿼리

화면 크기에 따른 CSS 적용

@media 미디어유형 and (크기 규칙) { }

  - 미디어 유형 : all/print/screen

  - 크기 규칙 : min-width (이상) / max-width (이하)

 

 

참고 영상 https://youtu.be/bdWnD6VqLAs

반응형을 위한 사이즈 참고 https://gs.statcounter.com/

Statcounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share