노마드코더/코코아톡 클론코딩/3. Advanced CSS

노마드코더 - 코코아톡 클론코딩 https://nomadcoders.co/kokoa-clone/lobby

코코아톡 클론 코딩 – 노마드 코더 Nomad Coders

 

 

 

---

Advanced CSS

 

 

Transitions

기본적으로 어떤 상태에서 다른 상태로의 '변화'를 애니메이션화하고 그 속도를 조절하는 방법

 

- Transition은 상태(state)가 없는 요소에 입력해야 한다.

   (예를 들어, a → a:hover 상태로의 변화 속도를 변경하려면 a 요소 안에 Transition을 입력해야한다.)

- Transition에서 2개 이상의 속성에 대해 변화를 적용하려면 쉼표(,)로 구분

- Transition이 정상적으로 작동하려면, 요소와 요소:상태에 각각 변화 전과 후의 속성값을 가지고 있어야 한다.

 

* 모든 '변화'에 대해 Transition값을 적용하려면 → all 

 

 

 

Easing Functions

상태가 변화하는 속도를 설명하는 수학적 함수

"애니메이션이 어떻게 변화할지 보여주는 함수"

(각 효과 시각적으로 확인 가능 : https://matthewlein.com/tools/ceaser )

 

1. Linear class : 

함수	linear
cubic-bezier	cubic-bezier(0.0, 0.0, 1.0, 1.0)
그래프
설명	시작점부터 끝점까지 일정한 속도로 진행

 

2. Cubic-bezier class : 

함수	ease	ease-in	ease-in-out	ease-out
cubic-bezier	(0.25, 0.1, 0.25, 1.0)	(0.42, 0.0, 1.0, 1.0)	(0.42, 0.0, 0.58, 1.0)	(0.0, 0.0, 0.58, 1.0)
그래프
설명	천천히 시작 → 가속 → 천천히 감소	천천히 시작 → 점진적 속도 증가 → 갑자기 멈춤	천천히 시작 → 일정 속도 증가 → 천천히 감소 (처음에는 ease-in처럼, 나중에는 ease-out처럼 동작 수행)	갑자기 시작 → 끝이 다가올 수록 속도 감소

 

3. steps() class : 

출력 값의 도메인을 등거리 단계로 나누는 단계함수를 의미(예: 같은 간격으로 점프)

"staircase functions"

 Importatnt 

steps(number_of_steps, direction)

* number_of_steps : 양(+)의 정수(integer) → 출력값 : 도메인 전체 길이를 1/정수값 으로 나눠서 이동
* direction : 진행 방향

jump-start / start	jump-end / end	jump-none	jump-both
stpes(2, jump-start) steps(2, start)	steps(4, jump-end)  steps(4, end)	steps(5, jump-none)	steps(3, jump-both)

■ jump-start / start : 시작점(0%)에서 jump 후, 1/n 기간동안 정지
■ jump-end / end : 0%에서부터 1/n 기간동안 정지 후, jump
■ jump-none : 시작점(0%)과 끝점(100%)에서 jump가 발생하지 않음;
                        0%에서 1/n기간 정지 후, jump → 100%에서 1/n 기간 정지
■ jump-both : 0%와 100%에서 jump가 발생;
                      1/n 기간동안 정지 후, jump  → 100%는 jump가 끝나는 순간(+지점)
                       ※ 시작하자마자 시작점(0%)에서 전체를 1/n으로 나눈 첫 시작점으로 jump
                           예: steps(3, jump-both)의 경우, 시작하자마자 0% → 0.33%(거리의 1/3)로 jump 후, 
                           1/3 기간동안 정지

 

 

 

Transformations

- transform 속성으로 요소(element)에 회전, 크기조절, 기울이기, 이동효과등 2D 또는 3D 변형 적용 가능

   * 변경가능한 요소만 정상적으로 작동

      (예외 : non-replaced inline boxes, table-column boxes, table-column-group boxes)

- transformation은 다른 형제(부모요소 box의 다른 요소들)를 변형시키지 않고, 요소를 이동시키기 위해 사용

  즉, transformation은 box차원이 아닌, 페이지의 다른 픽셀 부분에서 발생

- transition과 함께 활용

  

 

 

 

Transform Functions

분류	함수명	의미	예제
행렬 변환	matrix()	동종 2D 변환 행렬 설명	matrix(a, b, c, d, tx, ty)
	matrix3d()	3D변환을 4x4 동종행렬로 설명	matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
원근	perspective()	사용자와 z=0 평면 사이의 거리를 설정	perspective(length)
회전	rotate()	2D 평면의 고정점을 중심으로 요소를 회전
	rotate3d()	3D 공간에서 고정된 축을 중심으로 요소를 회전 (x, y, z, a(anlge))
	rotateX()	수평 축(X축)을 중심으로 요소를 회전
	rotateY()	수직 축(Y축)을 중심으로 요소를 회전
	rotateZ()	Z축을 중심으로 요소를 회전
크기	scale()	2D 평면에서 요소의 크기 조절
	scale3d()	3D 공간에서 요소의 크기 조절
	scaleX()	요소를 수평 축(X축)으로 크기 조절
	scaleY()	요소를 수직 축(Y축)으로 크기 조절
	scaleZ()	요소를 Z축으로 크기 조절
왜곡	skew()	2D 평면에서 요소 기울이기
	skewX()	요소를 수평 방향(X축)으로 기울이기
	skewY()	요소를 수직 방향(Y축)으로 기울이기
이동	translate()	2D 평면에서 요소를 이동
	translate3d()	3D 평면에서 요소를 이동
	translateX()	요소를 수평 축(X축)을 따라 이동
	translateY()	요소를 수직 축(Y축)을 따라 이동
	translateZ()	요소를 Z축을 따라 이동

* 일부 함수 : value 값이 1개 : X축 / value값이 2개일 경우 : 순서대로 X축, Y축

 

 

 

 

Animations

"특정 상태(state)가 아니어도 transition이 일어나는 것 처럼 애니메이션을 출력하는 방법"

(애니메이션 효과 시각적으로 확인 : https://animista.net/ )

 

1. 기본 작동 방법:

 Importatnt 

@keyframes (함수명) {
    from {
        시작상태 (예. transform: rotateX(0);)
    }
    to {
        끝나는상태 (예. transform: rotateX(360deg);)
    }
}

---

해당 요소 {
    animation: 함수명 출력시간 출력방식 (infinite);
}

* 함수명의 첫글자는 반드시 '소문자'여야 한다. (이후에는 대문자 사용 가능)

 

 

2. 부드러운 연속성 적용:

위의 예제의 경우, 5s의 출력시간이 끝나면 처음 상태로 돌아가고 다시 시작한다.

→ 전체 비율(percent,%)을 설정해서 부드러운 애니메이션 출력 가능

 

 

 

Media Queries

"오직 CSS만을 이용해서 사용자의 스크린의 사이즈 알 수 있는 방법"

"반응형 디자인"

 

1. 미디어유형 : 

    ■ all : 모든 장치에 적합

    ■ print : 출력 미리보기 화면에 표시될 문서

    ■ screen : 스크린

    ■ speech : 음성 합성장치(sythesizer)

 

 2. 논리 연산자를 이용하여 다수의 쿼리를 다양한 방법으로 연결 가능

    ■ and : 복수의 미디어 기능을 하나의 미디어 쿼리로 결합 

    ■ not :  미디어쿼리 자체를 부정; 근본적으로 원래의 의미를 반전

    ■ only : 구형 브라우저가 스타일을 적용시키지 못하게 함

 

3. 미디어쿼리는 대소문자를 구분하지 않음

 

4. (유형을 지정했다면) 문서를 보여주는 미디어의 유형이 일치하고 모든 미디어 특성 표현식의 계산값이 참일 때

   참으로 계산

5. 자주 사용되는 함수들

    ■ (min/max-)device-width : 출력장치 렌더링 표면의 (최소/최대) 너비; 핸드폰에만 적용 (브라우저x)

    ■ (min/max-)device-height : 출력장치 렌더링 표면의 (최소/최대) 높이; 핸드폰에만 적용 (브라우저x)

    ■ width : 스크롤바를 포함한 스크린 너비

    ■ height : 스크린 높이

    ■ orientation : Viewport(스크린)의 방향;

                          세로모드(portrait) / 가로모드(landscape)

 

 

 

 

 

출처 :
1. 노마드코더 / 코코아톡 클론코딩 : https://nomadcoders.co/kokoa-clone
2. MDN / CSS reference : https://developer.mozilla.org/en-US/
3. Coderifleman's blog / 중학생도 알 수 있는 베지에 곡선(Bezier Curves)
    : https://blog.coderifleman.com/2016/12/30/bezier-curves/