목차
CSS 키프레임 애니메이션
애니메이션 효과를 줄 수 있는 2가지 방법 중 하나로, @keyframes at-rule을 선언하여 animation 관련 속성을 사용하며, 특정 시점의 키프레임을 지정할 수 있다.
@keyframes 규칙
@keyframes at-rule은 animation 속성에 적용할 키프레임을 생성하기 위한 규칙이다. 키프레임이란, 애니메이션을 구현할 때 기준이 되는 특정 시점으로, 각 키프레임 사이의 애니메이션은 자동으로 구현된다.
/* @keyframes 형식 */
@keyframes 애니메이션 이름 {
from {
css속성: 값;
}
[percentage]{
css속성: 값;
}
to {
css속성: 값;
}
}from과 to는 0%와 100%로 대체할 수 있다.
animation 관련 속성
animation 관련 속성은 transition 속성과 비슷한 것도 있고 새로운 것도 있다.
- animation-name(필수): @keyframes 규칙으로 선언한 애니메이션의 이름을 지정한다.
- animation-duration(필수): 애니메이션의 지속 시간을 지정한다.
- animation-delay: 애니메이션을 실행할 지연 시간을 지정한다.
- animation-timing-function: 애니메이션 진행 속도의 변화 형태를 지정한다.
- animation-iteration-count: 애니메이션의 반복 횟수를 지정한다. 속성 값으로 infinite를 지정하면 무한 반복하고, 숫자 값을 지정하면 반복 횟수를 직접 설정한다.
- animation-direction: 애니메이션의 진행 방향을 지정한다. 기본 값은 normal로 순방향으로 진행하고, reverse는 역방향으로 진행한다. alternate로 지정하면 순방향과 역방향을 반복하여 진행한다.
- animation-play-state: 애니메이션의 진행 및 정지 상태를 지정한다. running은 재생하고, paused는 일시 정지한다.
- animation-fill-mode: 애니메이션 실행 이후에 애니메이션의 첫 번째나 마지막 키프레임을 표시하도록 지정한다. forward를 지정하면 애니메이션이 실행된 후에 마지막 키프레임을 표시하고, backwards를 지정하면 첫 번째 키프레임을 표시한다. both를 지정하면 애니메이션이 끝났을 때의 키프레임을 표시한다.
- animation: 애니메이션 속성 값을 일괄 지정하는 단축 속성이다. animation-name과 animation-duration은 필수로 지정하고, 이후 값들은 순서 상관 없이 공백으로 구분하여 나열한다. 처음 지정한 시간 값은 animation-duration으로, 나중에 지정한 시간 값은 animation-delay로 설정된다.
Transform
transform 관련 속성은 요소 박스의 크기, 회전, 기울임 등을 지정한다. 2차원 뿐만 아니라 3차원 변형도 가능하다.
transform 속성 값으로 함수를 여러 개 사용할 수 있다. 공백으로 구분하여 지정한다. 단, 재정의할 때 하나의 값만 재정의하고 싶더라도 이전에 정의했던 모든 함수를 불러와야 한다. 정의하지 않으면 초기화된다. 그래서 이제는 속성으로 사용하는 것을 추천한다.
2차원에서 변형할 수 있는 방법을 지정하는 속성은 아래와 같다. 속성 뒤에 '3D'를 추가하면 3차원으로 적용한다.
- translate: HTML 요소 박스를 수평으로 이동한다. 속성 값에는 요소가 이동할 가로와 세로 값을 지정한다.
- rotate: 요소 박스를 회전한다.
- skew: 요소 박스의 기울임을 지정한다.
- matrix: 요소 박스에 이동, 회전 크기 변화, 기울임 등을 복합적으로 적용할 수 있다.
3차원에서 변형할 수 있는 방법을 지정하는 속성은 아래와 같다.
- transform-origin: transform의 변형 기준점을 지정한다. 속성 값이 2개일 때는 2D, 3개일 때는 3D로 적용한다.
- transform-style: 3D 공간에서 변경된 3차원 좌표를 하위 요소에게 전달할 것인지 여부를 지정한다.
- perspective: 3D 공간에서 원근감(요소와 관측점과의 거리)을 지정한다. 속성 값이 작을수록(0px) 가깝게 보이고, 클수록(1000px) 멀게 보인다.
- perspective-origin: 3D 공간에서 원근감의 방향을 지정한다.
- backface-visibility: 요소 박스가 뒤집혔을 때 박스의 뒷면의 표시 여부를 지정한다.
CSS 마스크
mask-image는 이미지를 마스킹하는 속성이다. 이미지에 내가 원하는 모양으로 마스크를 씌운 효과를 준다. 그라데이션으로 마스킹할 수도 있다. background-image와 비슷하다.
CSS 마스크 관련 속성은 다음과 같다.
- mask-image: url() 함수를 사용해서 파일을 불러오면, 배경에 있는 색깔/이미지를 마스킹한다. 이미지 파일의 불투명한 부분만 보이고, 투명한 부분은 안 보이게 자른다. 예를 들어, mask-image로 동그라미 svg 파일을 불러오면 배경에 있는 색깔/이미지를 동그라미만 남기고 지워버린다. gradient 함수를 사용해서 그라데이션 마스크도 적용할 수 있다.
- mask-mode: 마스크의 렌더링 방식을 지정한다.
- mask-repeat: 마스크의 반복 여부를 지정한다. 속성 값은 background-repeat와 같다.
- mask position: 마스크의 위치를 지정한다.
- mask-clip: 마스크 영역의 클리핑 범위를 설정한다.
- mask-origin: 마스크의 위치 기준을 설정한다.
- mask-size: 마스크의 사이즈를 지정한다. 속성 값은 background-size와 같다. 또는, 두 개의 값을 줘서 반복할 수도 있다. 이때 mask-repeat는 repeat(기본 값)여야 한다. "100% 10px"로 지정하면 전체 영역(100%)에 10px씩 반복하여 블라인드처럼 보이게 할 수 있다.
- mask-composite: 여러 마스크를 불러왔을 경우 합성 방식을 지정한다.
멀티 컬럼 레이아웃
웹 콘텐츠는 기본적으로 텍스트로 이루어졌지만, 인쇄물에서 자주 사용되는 다단(Multi Column) 구조를 구현할 수 있도록 W3C에서 Multi-column Layout Module에 이를 정의했다.
column 관련 속성은 다음과 같다.
- column-width: 단의 너비를 지정한다. 기본 값은 auto로, 단의 너비를 자동으로 계산한다. auto로 지정하고 다단을 구성하려면 column-count 속성이 필요하다.
- column-count: 단의 개수를 지정한다.
- columns: 단의 너비와 개수를 일괄 지정할 수 있는 단축 속성이다.
- column-gap: 단 사이의 간격을 지정한다.
- column-rule: 단과 단 사이의 구분선을 표현한다. border 속성과 비슷하게 동작한다.
- column-span: 다단으로 구성할 때 여러 단을 차지하는 요소를 지정한다. none 값은 해당 요소가 여러 단을 차지하지 않도록 하고, all 값은 해당 요소가 여러 개의 단 영역을 차지하도록 한다.
- column-fill: 다단 영역 콘텐츠 흐름에 영향을 받는 방식을 지정한다. 속성 값은 크게 기본 값인 auto(단의 길이에 따라 표현)와 balance(단의 크기에 따라 균형을 이룸)가 있다.
- break-before, break-after, break-inside: 다단의 분할 방식을 지정한다. 브라우저마다 지정하는 속성 값이 다르기 때문에 확인이 필요하다.
Masonry 레이아웃을 멀티 컬럼 레이아웃으로 구현할 수도 있다.
오늘 하루를 돌아보며
벌써 한 주가 다 지났다. 4주차라는 게 믿기지 않을 정도로 시간이 빨리 지나갔다. 배운 것도 많고 느낀 것도 많은 한 달이었다. 그중 가장 중요한 것은 프론트엔드 개발자의 마음가짐과 그에 따라 신경 써야 할 부분은 어떤 것이 있는지다. 시키는 대로만 하는 것이 아니라, 생각하고, 고민하고, 의미를 찾아서 만들어야 한다. 왜 그렇게 마크업했는지, 왜 그런 속성을 사용했는지, 왜 그렇게 보이게 했는지 이유를 찾고 의미를 찾아야 한다.
좋은 개발자가 되기 위해서는 그만큼 더 많이 배우고, 많이 만들고, 많이 실패하고, 많이 시도해야겠다는 생각이 든다. 실패를 두려워하지 말고 해결하기 위해, 이겨내기 위해 더 열심히 부딛쳐야 한다. 남은 시간을 더 알차게 보내려면 더 많이 시도해야 한다. 지금은 실패해도 혼낼 사람이 없으니까 이때 더 많이 실패해 봐야 한다. 회고 팀원들과 같이 고민할 수도 있고, 강사님이나 보조 강사님들도 있다. 지금은 도움을 받을 수 있는 환경이 잘 되어있으니까 이런 기회를 잘 활용하자!
