블록체인 기술사업 교육 22일차 (CSS)

애니메이션

- 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 구성

기본 속성

- animation-name = @keyframes의 이름 지정, animation-duration = 1회 애니메이션 시간

- animation-iteration-count = 애니메이션 반복 횟수 (infinite로 무한 반복 가능)

- animation-delay = 애니메이션 시작 전 지연시간

- animation-direction = 반복방향 설정 (normal/reverse/alternate)

- animation-timing-function = 애니메이션 속도 조절

(linear- 등속/ease - 느려졌다가 빨라졌다 다시 느려짐/ease-in - 점점 빨라짐/ease-in-out - 처음과 끝 느려짐/ease-out - 점점 느려짐)

- animation-play-state = 애니메이션 진행 상태 (running/paused)

- animation-fill-mode = 애니메이션 시작 / 끝 상태 설정

transfrom 속성

- transform: rotate/rotateX/rotateY = 요소 회전 (단위 deg => 360deg = 1회전)

- transform: translate/translateX/translateY = 요소 이동 (Y의 경우 숫자가 커질수록 위쪽이 아닌 아래쪽으로 이동!)

- transform: scale/scaleX/scaleY = 요소 크기 확대/축소 

- transform: skew/skewX/skewY = 요소 비틀기 (ex - 정사각형 => 평행사변형)

- transfrom: rotate() scale()과 같이 한 줄로 표현 가능

transition 속성

- 프로퍼티의 변화가 일정 시간에 걸쳐 발생하도록 설정하는 속성

- transition-property = 트랜지션의 대상이 되는 프로퍼티 지정

- transition-duration = 트랜지션 지속 시간 

- transition-timing-function = 트랜지션 속도

- transition-delay = 트랜지션 지연 시간

- transition = 모든 transition 속성을 한 줄로 표현 가능(프로퍼티/지속 시간/속도/지연 시간)

@keyframes

- 애니메이션 중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정 (중간 동작 제어)

- [@keyframes 애니메이션 명 {CSS 스타일}] 형식으로 정의

- %(0~100) 단위로 애니메이션의 중간 지점 설정 가능 (from(시작)~to(끝)도 가능)

- 같은 %의 속성이 여러개 작성된 경우에는 마지막 순서의 속성이 적용

- !important 적용시 해당 속성이 무시됨

/* animation 속성 입력 방식 */

/* 이름 | 시간 | 속도 | 지연시간 | 반복횟수 | 방향 | 시작/끝 제어 | 진행상태  */
animation: abc 3s ease-in 1s 2 reverse both paused;

/* 이름 | 시간 | 속도 | 지연시간 */
animation: abc 3s linear 1s;

/* 이름 | 시간 */
animation: abc 3s;

@keyframes slidein {
  0% {
    margin-left: 100%;
    width: 300%;
  }
  30% {
          color: green !important; 
        }
  100% {
    margin-left: 0%;
    width: 100%;
  }
}

미디어 쿼리(@media)

- 반응형 디자인 = 다양한 기기의 화면 크기에 맞게 웹사이트를 자동으로 조정하는 기술

- [@media (조건) {CSS 스타일}] 형식으로 정의

- 조건은 max-width/min-width 사용 (최대/최소 크기 => 해상도 조건 지정)

※ HTML meta 태그에서 viewport => 모바일과 PC에서 콘텐츠 크기 일정하게 설정 

웹 디바이스별 해상도

- ~320px = 스마트폰(세로)

- 320~768px = 스마트폰(가로), 태블릿(세로)

- 768~1024px = 테블릿(가로)

- 1024px~ = PC

/* PC (해상도 1024px~)*/
@media (min-width:1024px) {}

/* 테블릿 가로 (해상도 768px ~ 1024px)*/
@media (max-width:1024px) {}

/* 모바일 가로, 테블릿 세로 (해상도 320px ~ 768px)*/
@media (max-width:768px) {}

/* 모바일 세로 (해상도 ~320px)*/
@media (max-width:320px) {}

/* and로 조건 여러 개 설정 가능*/
@media (min-width:768px) and (max-width:1023px) {}