9주 : html, css언어 : transition, animation, keyframes 모듈, object-fit, :root선택자
transition
사용자가 태그위에 마우스를 올리거나 클릭했을때 바뀌는 모양을 부드럽게 움직이며 풀어주는 모션효과를 만드는 속성. 아래 속성들과 함께 적용이 가능하다.
[transition으로 변화시킬수 있는 속성들]
- 위치속성(position의 좌표들) : left, right, bottom, top
- 크기속성 : width, height
- 박스속성 : padding, margin
- 테두리속성 : border-width, border-color, border-radius
- 색상속성 : color, background-color
- 투명도 : opacity, rgba
- 변형속성 : transform
transition의 하위 속성들
트랜지션의 모션을 섬세하게 컨트롤할때 아래 속성들을 함께 사용할 수 있다.
1. transition
: transition의 하위 속성들을 한꺼번에 선언할 때 사용한다. 공백으로 구분하여
여러 속성을 한 번에 선언한다.
2. transition-duration
: "~초 동안"이라는 뜻으로, 모션효과를 몇 초동안 적용할지 정한다. 초 단위는 s로 표기한다.
3. transition-delay
: "~초 기다렸다가"라는 뜻으로, 모션효과가 바로 적용되지 않고 선언된 초 동안 기다렸다가
모션을 진행한다. 지연시간을 말하며 초단위인 s를 사용한다.
4. transition-property
: 태그에 적용된 여러 속성중에 일부만 transition효과를 주고싶을때 사용한다.
즉, 어떤 속성을 트랜지션 시킬것인지 정하는 속성이다. 속성값으로는 변형시키고자하는
속성의 이름을 쓴다. 속성끼리는 ,로 구분한다.
5. transition-timing-function
: 정해진 키워드에 따라 모션 속도를 조절한다. 가속도와 같은 의미이다.
쓸 수 있는 속성값은 아래와 같다.
- linear : 처음부터 끝까지 일정한 속도로 움직인다.
- ease : 가속도. 처음에는 천천히 시작했다가 점점 빨라지면서 마지막에는 천천히 끝내는 값.
기본값이다.
- ease-in : 천천히 시작한다.
- ease-out : 천천히 끝난다.
- ease-in-out : 천천히 시작했다가 천천히 끝낸다.
animation
브라우저가 로딩되는 순간 모션을 진행하는 애니메이션 속성이다. 애니메이션 속성은 사용자의 동작과는 관계 없이 혼자서 움직임을 만든다. 이때 애니메이션의 하위속성과 @keyframes모듈을 이용하여 움직임을 만든다.
[속성]
- animation
: 하위 속성들을 한꺼번에 선언할때 사용한다. 속성끼리는 공백으로
구분한다.
- animation-delay
: 애니메이션의 지연시간을 지정한다. 단위는 s를 사용하고 지정된
시간이 지나면 그때 애니메이션을 실행한다.
- animation-direction
: 애니메이션의 진행 방향을 설정한다. 속성값으로는 아래에 있는
값들을 사용한다.
1. alternate
: 애니메이션의 시작지점에서 끝나는지점으로 이동했다가 끝나는 지점에서
다시 시작지점으로 이동한다.(from->to->from)
2. normal
: 기본값이며 시작지점에서 끝나는 지점으로 이동하는 것을 반복한다.
3. reverse
: 역방향으로 움직인다.
4. alternate-reverse
: 역방향으로 움직였다가 정방향으로 움직인다.
- animation-iteration-count
: 애니메이션의 반복 횟수를 지정한다. 단위없이 숫자만 쓰거나
infinite값을 쓸 수 있다. infitinte는 무한반복을 말한다.
- animation-name
: 애니메이션의 이름을 지정한다. class나 id이름 짓듯이 이름을
지어주면 되고, 필수 속성으로 애니메이션의 이름이 없으면
애니메이션이 동작하지 않는다.
- animation-play-state
: 애니메이션의 재생 상태를 지정한다. 보통 :hover선택자와 함께
쓰이며, 사용자가 마우스를 올리거나 어떤 동작을 하면 애니메이션
의 동작을 멈추거나 다시 재생할 수 있다.
값은 running이나 paused를 사용하고, paused는 멈춘다는 의미이다.
- animation-timing-function
: 애니메이션의 속도를 설정한다. 값으로는 trainsitoin-timing-function
과 동일한 값을 사용한다.
(ease, ease-in, ease-out, linear, ease-in-out)
- animation-fill-mode
: 끝났을때 모습을 유지할 것인지를 지정한다.
backward는 기본값으로 애니메이션이 끝나면 원래의 초기 위치로 돌아온다.
forwards는 애니메이션의 종료시점의 모습을 유지한다.
@keyframes 모듈
animtion으로 해당 태그에 움직임을 설정했다면 실제 움직이는
동작은 @keyframes 모듈이 담당한다.
@keyframes 모듈은 지정된 시간안에 어떤 동작을 만들것인지를
지정한다.
@keyframes설정을 할때에는 키프레임 안에서 시간에 의해 변화되는
부분을 '선택자'로 구분한다.
선택자는 0%또는 from이라고 쓰면 애니메이션의 시작지점(0초 지점)
을 말하고, 100% 또는 to라고 쓰면 애니메이션이 끝나는 지점을
말한다.
[기본형]
선택자{
animation : 속성1 속성2....;
}
@keyframes 애니메이션 이름{
from 또는 0% { 스타일 속성: 값; }
50%{ 스타일 속성 : 값; }
to 또는 100% { 스타일 속성: 값; }
}will-change
transition이나 animation작업을 수행하는 동안 브라우저에 깜빡임이나 떨림현상이
생길 수 있다. will-change속성은 브라우저에게 요소의 예상 변경 사항을 알려주는 속성.
이 속성을 사용하면 브라우저는 요소가 실제로 스타일 변형이 필요할때 필요한 리소스를
사전에 최적화 하여 요소의 스타일 변경과 랜더링을 더 빠르고 최적화된 방식으로 처리한다.
will-change의 속성값으로는 애니메이션(키프레임)과 transition또는 transform으로
변화시킬 속성의 속성명을 사용한다.
[속성값]
- auto : 변경 예정인 속성에 대한 최적화를 자동으로 처리하기 위해 브라우저가 결정한다.
- scroll-position : 스크롤 위치에 대한 최적화를 수행하기 위해 브라우저가 자동으로 처리한다.
- contents : 요소 내용의 변경에 대한 최적화를 수행하기 위해 브라우저가 자동으로 처리한다.
- opacity : 투명도 변경에 대한 최적화를 수행하기 위해 브라우저가 자동으로 처리한다.
- transform : 변형속성에 대한 최적화를 수행하기 위해 브라우저가 자동으로 처리한다.
- perspective : 원근감 변경에 대한 최적화를 수행하기 위해 브라우저가 자동으로 처리한다.
- left/top/right/bottom : 좌표값 변경에 대한 최적화를 수행하기 위해 브라우저가 자동으로 처리한다.
- filter : filter속성에 대한 최적화를 수행하기 위해 브라우저가 자동으로 처리한다.
- color / background-color : 색상 변경에 대한 최적화를 수행하기 위해 브라우저가 자동으로 처리한다.
- all : 모든 변경에 대한 최적화를 위해 브라우저가 자동으로 처리한다.
div {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
background-color: salmon;
margin: 50px;
font-size: 20px;
position: absolute;
/* 애니메이션 설정 */
animation-name: rolling; /*애니메이션 이름*/
animation-duration: 3s; /*애니메이션을 2초동안 진행*/
animation-iteration-count: 5; /*애니메이션 횟수 지정*/
animation-direction: normal; /*애니메이션의 진행 방향*/
animation-delay: 2s; /*2초 있다가 애니메이션 진행*/
animation-fill-mode: forwards; /* 애니메이션이 끝나면 그 모습을 유지한다. */
animation: rolling 3s linear 2s 5 alternate forwards;
/* 해당 속성들 최적화 */
will-change: left, transform;
}
/* div에 마우스를 올리면 멈춤 */
div:hover {
animation-play-state: paused;
}
/* 애니메이션 동작 지정 하기 */
@keyframes rolling {
/* 총 2초 중 0초 지점 */
from {
left: 0px;
transform: rotate(0deg);
}
/* 총 2초 중 1초 지점 */
50% {
border-radius: 100%;
background-color: sandybrown;
}
/* 총 2초 중 2초 지점 */
to {
left: 500px;
transform: rotate(360deg);
}
}
object-fit
이미지나 비디오 등 컨텐츠가 사용된 높이와 넓이에 따라 설정된 부모요소에
어떻게 맞춰져야 하는지 결정한다.
웹 문서에서 이미지나 비디오 같은 시각 요소는 반응형으로 크기가 바뀌면
원래 이미지나 비디오의 가로 세로 비율을 그대로 유지하기 어렵다.
object-fit을 사용하면 컨텐츠(이미지나 비디오)의 가로 세로 비율을 유지하면서
해상도에 맞게 크기를 조절할 수 있다.
[속성값]
- fill : 기본값으로 컨텐츠의 원래 비율을 무시하고 요소의 전체 영역을 채운다.
- contain : 비율을 유지하면서 요소의 전체 영역에 맞출 수 있을 만큼 확대한다.
영역을 모두 채우지 못할 수 있다.
- cover : 비율을 유지하면서 요소의 전체 영역에 맞출 수 있을 만큼 확대한다.
영역을 채울때 컨텐츠의 일부를 자를수도 있다.
- none : 컨텐츠의 원래 크기를 유지한다.
- scale-down : none과 contain중 크기가 더 작아지는 값으로 설정한다.
:root선택자
css가 처음 등장했을때에는 단순한 스타일링만 가능했다. 예를들어 색상이나
글꼴 줄간격 등 사이트의 겉 모습만 제어하는 속성만 제공했다.
하지만 웹페이와 애플리케이션이 점점 더 복잡해지면서 스타일을 더 세밀하게
제어할 방법이 필요해졌다. 그렇게 등장한 것이 css함수이다.
css함수는 특정 기능을 말하며 ()안에 올바른 값을 넣어 실행한다.
:root선택자는 문서의 최상위 요소를 가리킨다. 즉, html태그를 말하는 것이다.
:root를 사용하는 이유는 css에서 '변수'라는 것을 사용하기 위해서이다.
:root는 웹문서에서 사용할 스타일들을 전체적으로 선언하는 공간으로, 일종의 '스타일 가이드'로
사용한다. :root안에 사용할 스타일을 변수로 선언하면 일관적인 디자인을 쉽게 유지할 수 있다.CSS변수
변수란 필요할때마다 값을 저장해놓고 사용하는 데이터 그릇을 말한다.
이 데이터가 바뀌어야 한다면 그 값을 바꿀 수도 있다.
css에서 사용하는 변수는 마치 피그마의 컴포넌트처럼 일관적인 디자인을 유지하기 위해
미리 웹 문서에서 사용할 스타일에 이름을 붙여서 저장하는 역할을 한다.
css변수를 쓰는 방법은 :root의 {}안에 하이픈 두개를 앞에 붙여 변수 이름을 지어서 사용한다.
단, 변수 이름을 지을때에는 소문자로만 지어야 한다.
[기본형]
:root{
--변수이름 : 값;
}
var()
=================================
변수에 저장했던 값을 표시하는 함수이다.
값을 표시할때에는 var()소괄호 안에 '--변수이름'을 넣으면
그에 해당하는 값이 적용된다.
[기본형]
선택자{
color : var(--변수이름);
/* 스타일 가이드 */
:root {
--main-color: #1dd469;
--lg-font-size: 26px;
}
h1 {
color: var(--main-color);
font-size: var(--lg-font-size);
}
a {
text-decoration: none;
color: #000;
}
/* a태그에 마우스를 올리면 메인컬러로 바꾸기 */
a:hover {
color: var(--main-color);
}