HTML, CSS (4)

2022. 10. 2. 16:08ㆍ프로그래밍/HTML & CSS

animation

animation: 애니메이션이름 지속시간 [타이밍함수 대기시간 반복횟수 반복방향 전후상태 재생/정지];

요소에 애니메이션을 설정하고 제어하는 단축 속성이다.

 

@keyprames

2개 이상의 애니메이션 중간 상태(프레임)을 지정한다.

@ (at-sign) 기호로 시작하는 것을 CSS rules 라고 한다.

 

animation-name

@keyframes 규칙의 이름을 지정한다.

 

- none : 애니메이션을 지정하지 않는다. (기본값)

- @keyframes 이름 : 이름이 일치하는 @keyframes 규칙의 애니메이션을 적용한다.

 

animation-duration

애니메이션의 지속 시간을 설정한다.

 

- 시간 : 지속 시간을 설정한다. (기본값 : 0s)

 

animation-timing-function

타이밍 함수를 지정한다.

 

- ease : 빠르게 - 느리게 (기본값)

- linear : 일정하게

- ease-in : 느리게 - 빠르게

- ease-in-out : 느리게 - 빠르게 - 느리게

- cubic-bezier(n, n, n, n) : 자신만의 값을 정의한다. (0~1)

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

 

animation-delay

애니메이션의 대기 시간을 설정한다.

 

- 시간 : 대기 시간을 설정한다. (기본값 : 0s)

 

animation-iteration-count

애니메이션의 반복 횟수를 설정한다.

 

- 숫자 : 반복 횟수를 설정한다. (기본값 : 1)

- infinite : 무한 반복한다.

 

animation-direction

애니메이션의 반복 방향을 설정한다.

 

- normal : 정방향만 반복한다. (기본값)

- reverse : 역방향만 반복한다.

- alternate : 정방향에서 역방향으로 반복한다. (왕복)

- alternate-reverse : 역방향에서 정방향으로 반복한다. (왕복)

 

animation-fill-mode

애니메이션의 전후 상태(위치)를 설정한다.

 

- none : 기존 위치 - 애니메이션 시작 위치 - 동작 - 기존 위치 (기본값)

- forwards : 기존 위치 - 애니메이션 시작 위치 - 동작 - 애니메이션 끝 위치

- backwards : 애니메이션 시작 위치 - 동작 - 기존 위치

- both : 애니메이션 시작 위치 - 동작 - 애니메이션 끝 위치

 

animation-play-state

애니메이션의 재생과 정지를 설정한다.

 

- running : 애니메이션을 동작한다. (기본값)

- paused : 애니메이션 동작을 정지한다.

 

.container {
  height: 500px;
  border: 4px solid pink;
}

.item {
  width: 100px;
  height: 100px;
  border: 4px solid;
  animation: move 2s infinite alternate;
}

@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}

move 키프레임은 요소의 X축을 0~200px 까지 이동시킨다.

animation 속성을 사용해 2초동안 move 키프레임을 보여주고 다시 돌아오는 것이 반복된다.

 

.item {
  width: 100px;
  height: 100px;
  border: 6px solid;
  /* animation: move 2s infinite alternate; */
  animation-name: move;
  animation-duration: 2s;
  animation-iteration-count: 2;
  animation-direction: reverse;
  animation-timing-function: linear;
  animation-fill-mode: both;
}

.item:hover {
  animation-play-state: paused;
}

@keyframes move {
  0% {
    transform: translateX(20px);
  }
  100% {
    transform: translateX(200px);
  }
}

animation 단축 속성은 각각의 개별 속성으로도 설정할 수 있다.

 

위 코드는 move 키프레임을 반대 방향으로 2번 반복한다.

linear 타이밍 함수를 사용하여 일정하게 움직이고, 위치를 both 로 설정하여 요소의 원래 위치인 0px 로 이동하지 않는다.

또한 item 클래스를 가진 요소에 마우스를 올리면 애니메이션이 정지된다.

이미지 스프라이트 (image sprite)

하나의 이미지 파일에 사용할 모든 이미지를 담고

한 번에 전송받아 이미지 일부를 잘라서 사용하는 방법

 

아래는 스프라이트 이미지 파일을 키프레임 한 단계씩 끊어서 이어지는 것처럼 반복 재생하는 예제이다.

.icon {
  width: 100px;
  height: 100px;
  border: 4px solid;
  background-image: url("./sprite_apps.png");
  animation-name: sprite-icon;
  animation-duration: 3s;
  animation-timing-function: steps(1);
  animation-iteration-count: infinite;
}

@keyframes sprite-icon {
  /* 1~10 */
  0.00% { background-position: 0 0; }
  1.67% { background-position: -100px 0; }
  3.33% { background-position: -200px 0; }
  5.00% { background-position: -300px 0; }
  6.67% { background-position: -400px 0; }
  8.33% { background-position: -500px 0; }
  10.00% { background-position: 0 -100px; }
  11.67% { background-position: -100px -100px; }
  13.33% { background-position: -200px -100px; }
  15.00% { background-position: -300px -100px; }

  /* 11~20 */
  16.67% { background-position: -400px -100px; }
  18.33% { background-position: -500px -100px; }
  20.00% { background-position: 0 -200px; }
  21.67% { background-position: -100px -200px; }
  23.33% { background-position: -200px -200px; }
  25.00% { background-position: -300px -200px; }
  26.67% { background-position: -400px -200px; }
  28.33% { background-position: -500px -200px; }
  30.00% { background-position: 0 -300px; }
  31.67% { background-position: -100px -300px; }

  /* 21~30 */
  33.33% { background-position: -200px -300px; }
  35.00% { background-position: -300px -300px; }
  36.67% { background-position: -400px -300px; }
  38.33% { background-position: -500px -300px; }
  40.00% { background-position: 0 -400px; }
  41.67% { background-position: -100px -400px; }
  43.33% { background-position: -200px -400px; }
  45.00% { background-position: -300px -400px; }
  46.67% { background-position: -400px -400px; }
  48.33% { background-position: -500px -400px; }

  /* 31~40 */
  50.00% { background-position: 0 -500px; }
  51.67% { background-position: -100px -500px; }
  53.33% { background-position: -200px -500px; }
  55.00% { background-position: -300px -500px; }
  56.67% { background-position: -400px -500px; }
  58.33% { background-position: -500px -500px; }
  60.00% { background-position: 0 -600px; }
  61.67% { background-position: -100px -600px; }
  63.33% { background-position: -200px -600px; }
  65.00% { background-position: -300px -600px; }

  /* 41~50 */
  66.67% { background-position: -400px -600px; }
  68.33% { background-position: -500px -600px; }
  70.00% { background-position: 0 -700px; }
  71.67% { background-position: -100px -700px; }
  73.33% { background-position: -200px -700px; }
  75.00% { background-position: -300px -700px; }
  76.67% { background-position: -400px -700px; }
  78.33% { background-position: -500px -700px; }
  80.00% { background-position: 0 -800px; }
  81.67% { background-position: -100px -800px; }

  /* 51~60 */
  83.33% { background-position: -200px -800px; }
  85.00% { background-position: -300px -800px; }
  86.67% { background-position: -400px -800px; }
  88.33% { background-position: -500px -800px; }
  90.00% { background-position: 0 -900px; }
  91.67% { background-position: -100px -900px; }
  93.33% { background-position: -200px -900px; }
  95.00% { background-position: -300px -900px; }
  96.67% { background-position: -400px -900px; }
  98.33% { background-position: -500px -900px; }
}

 

위의 CSS 코드 키프레임의 퍼센테이지와 background-position 속성 값을 자바스크립트로 계산하면 다음과 같다.

let x = 0;
let y = 0;
let frame = '';

for (let i = 0; i < 60; i++) {
  frame += 
  `${ (100 / 60 * i).toFixed(2) }% {
    background-position : ${x}px ${y}px
  }
  `;
}

column

다단을 정의하는 단축 속성이다. 

column 속성은 사용자가 편리하게 글자를 읽어나가기 위한 용도로 사용하는 것이며

레이아웃을 구조를 만들기 위해서 사용하는 것이 아니다.

columns: 너비 개수;

 

- auto : 브라우저가 단의 너비와 개수를 설정한다. 

- column-width : 단의 최적 너비를 설정한다. 

- column-count : 단의 개수를 설정한다. 

 

column-width

각 단이 줄어들 수 있는 최소 너비를 설정하며

요소의 너비가 변경되어 하나의 단이 최소 너비보다 줄어들면 단의 개수가 조정된다.

 

- auto : 브라우저가 단의 너비를 설정한다. (기본값)

- 단위 : px, em, cm 등 단위로 지정한다.

 

column-count

단의 개수를 설정한다.

 

- auto : 브라우저가 단의 개수를 설정한다. (기본값 : auto)

- 숫자 : 단의 개수를 설정한다.

 

coumn-gap

단과 단 사이의 간격을 설정한다.

 

- normal : 브라우저가 단과 단 사이의 간격을 설정한다. (1em, 기본값)

- 단위 : px, em, cm 등 단위로 지정한다.

 

column-rule

단과 단 사이의 구분 선을 지정하는 단축 속성이다.

column-rule : 두께 종류 색상;

- column-width : 선의 두께를 지정한다.

- column-style : 선의 종류를 지정한다.

- column-color : 선의 색상을 지정한다.

 

column-rule-width

단과 단 사이의 선의 두께를 설정한다.

 

- medium : 중간 두께 선 (기본값)

- thin : 얇은 두께 선

- thick : 두꺼운 두께 선

- 단위 : px, em, cm 등 단위로 지정

 

column-rule-style

단과 단 사이 선의 종류를 설정한다.

border-style 속성에서 사용하는 값과 동일하다.

 

- none : 선없음 (기본값)

- hidden : 선 없음과 동일 (table 요소에서 사용)

- solid, dotted, dashed, double ...

 

column-rule-color

단과 단 사이 선의 색상을 설정한다.

 

- 색상 : 선의 색상을 지정한다. (기본값 : 요소의 글자색)

.container {
  column-width: 100px;
  column-count: 3;
  column-rule: 10px dashed pink;
  column-gap: 100px;
}

column 속성들을 작성한 코드와 출력 결과이다.

@media

다양한 미디어 유형이나 장치에 따라, 서로 다른 스타일 규칙을 적용한다.

@media 를 적용한 CSS 코드를 미디어 쿼리라고 한다.

@media 미디어타입 and (미디어특성) {
  <!-- CSS 코드 -->
}

 

미디어타입

- all : 모든 미디어 타입에 적용한다. (기본값, 생략가능)

- screen : 컴퓨터 화면, 타블렛, 스마트폰 등

- print : 인쇄 전용

 

미디어특성

max-width, min-width 가 주로 사용된다.

 

- width : 뷰포트 가로 너비

- max-width : 뷰포트 최대 가로 너비 (~ 이하)

- min-width : 뷰포트 최소 가로 너비 (~ 이상)

- height : 뷰포트 세로 너비

- max-height : 뷰포트 최대 세로 너비 (~ 이하)

- min-height : 뷰포트 최소 새로 너비 (~이상)

- orientation : 뷰포트 방향 (portrait - 가로너비 < 세로너비 / landscape - 가로너비 > 세로너비)

.container {
  height: 100px;
  background-color: pink;
  font-size: 40px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

@media (max-width: 800px) {
  .container {
    background-color: powderblue;
  }
}

@media (max-width: 500px) {
  .container {
    height: 200px;
    background-color: slateblue;
    font-size: 30px;
  }
}

미디어 쿼리를 적용하여 브라우저의 너비에 따라 요소의 CSS 를 변경한 코드와 브라우저에 출력된 결과이다.

저작자표시 비영리 변경금지

관련글

댓글 0

티스토리툴바