해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다.
이번에는 CSS3 lesson 15~18의 내용인 애니메이션, 트랜스 폼, 웹 폰트, 레이아웃에 대해 알아보겠습니다.
15. 애니메이션(Animation)
HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킵니다.
애니메이션을 나타내는 CSS 스타일과 애니메이션의 sequence
를 나타내는 복수의 키프레임(@keyframes
) 들로 이루어집니다.
CSS 애니메이션을 사용하면 기존의 JavaScript 기반 애니메이션 실행과 비교하여 더 나은 렌더링 성능을 제공한다고 알려져 있습니다.
그러나 경우에 따라 세밀한 제어를 위해서는 JavaScript를 사용하는 것이 바람직합니다.
@keyframes
CSS 애니메이션과 트랜지션의 주된 차이는 @keyframes rule
에 있습니다.
시간의 흐름에 따라 애니메이션을 정의하며, 여러 개를 정의하거나 특정 프로퍼티에 값을 지정하는 지점을 정의할 수 있습니다.
@keyframes move {
/* 애니메이션 시작 시점 */
from {
left: 0;
}
/* 애니메이션 종료 시점 */
to {
left: 300px;
}
}
애니메이션의 시작 시점을 의미하는 from
과 끝 시점을 의미하는 to
에 값을 주었습니다.
위의 예시에서는 정지 상태에서 오른쪽으로 300px 이동하는 애니메이션이 실행됩니다.
from
, to
대신 %
를 사용할 수 있으며, %
단위로 키프레임을 삽입할 수 있습니다.
animation-name
@keyframes
애니메이션 이름을 지정하며, 하나 이상의 애니메이션 이름을 지정할 수 있습니다.
animation-duration
한 사이클의 애니메이션에 소요되는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정합니다.
기본 값은 0s로 값을 지정하지 않을 시에는 아무런 애니메이션도 실행되지 않습니다.
animation-timing-function
애니메이션 효과를 위한 타이밍 함수를 지정하며 기본 값은 ease
입니다.
관련된 설명은 https://dev-jeongmin.tistory.com/12 transition timing function
에 대한 부분을 참고하시길 바랍니다.
animation-delay
로드된 시점과 실제로 시작하는 사이 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정합니다.
animation-iteration-count
재생 횟수를 지정 하며, 기본 값은 1이고 infinite로 무한 반복 할 수 있습니다.
animation-direction
애니메이션이 종료된 이후 반복될 때 진행하는 방향을 설정합니다.
프로퍼티 값은 다음과 같습니다.
normal
: 기본 값, from(0%) → to(100%) 방향으로 진행
reverse
: to → from 으로 진행
alternate
: 홀수번째는 normal, 짝수번째는 reverse로 진행
alternate-reverse
: 홀수번째는 reverse, 짝수번째는 normal로 진행
이에 대한 시각적 예시는 원본 글 참고 바랍니다.
animation-fill-mode
미실행 시(종료 또는 대기) 요소의 스타일을 지정합니다.
프로퍼티 값은 다음과 같습니다.
none
: 대기 - from에 스타일 적용하지 않고 대기 / 종료 - 실행 전 상태로 되돌리고 종료
forwards
: 대기 -none
과 동일 / 종료 -to
에 설정한 스타일 적용 후 종료
backwards
: 대기 -from
에 스타일 적용하고 대기 / 종료 -none
과 동일
both
: 대기 -backwards
와 동일 / 종료 -forwards
와 동일
animation-play-state
애니메이션 재생 상태(재생 또는 중지)를 지정하며, 기본 값은 running 입니다.
div:hover {
background: blue;
animation-play-state: paused;
}
div:active {
background: yellow;
animation-play-state: running;
}
위의 예시에서는 yellow로 움직이면서 마우스의 움직임이 있을 때 blue로 색이 변경되는 것을 확인할 수 있습니다.
animation
모든 애니메이션 프로퍼티를 한번에 지정하는 축약 표현입니다.
포맷은 다음과 같습니다.
animation: name duration timing-function delay iteration-count direction fill-mode play-state
animation-duration은 반드시 지정해야 하며 기본 값은 none 0 ease 0 1 normal none running
입니다.
16. 트랜스폼(Transform)
요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew) 효과를 부여하기 위한 함수를 제공합니다.
단, 애니메이션 효과는 제공하지 않기에 화면에 바로 적용되어 표시됩니다.
따라서 애니메이션 효과가 필요할 시에 트랜지션과 함께 사용합니다.
2D 트랜스폼(2D Transform)
프로퍼티 값으로 변환 함수(transform function)를 사용하며 다음과 같습니다.
translate(x,y)
: 위치를 X축으로 x만큼, Y축으로 y만큼 이동 - 단위 : px, %, em 등
translateX(n)
: 위치를 X축으로 x만큼 이동 - 단위 : px, %, em 등
translateY(n)
: 위치를 Y축으로 y만큼 이동 - 단위 : px, %, em 등
scale(x,y)
: 크기를 X축으로 x배, Y축으로 y배 확대 또는 축소 - 단위 : 0과 양수
scaleX(n)
: 크기를 X축으로 x배 확대 또는 축소 - 단위 : 0과 양수
scaleY(n)
: 크기를 Y축으로 y배 확대 또는 축소 - 단위 : 0과 양수
skew(x-angle,y-angle)
: X축으로 x 각도만큼, Y축으로 y 각도만큼 기울임 - 단위 : +/- 각도(deg)
skewX(x-angle)
: X축으로 x 각도만큼 기울임 - 단위 : +/- 각도(deg)
skewY(y-angle)
: Y축으로 y 각도만큼 기울임 - 단위 : +/- 각도(deg)
rotate(angle)
: angle만큼 회전 - 단위 : +/- 각도(deg)
transform
프로퍼티 값을 쉼표 없이 나열하며, 나열 순서에 따라 차례대로 효과가 적용됩니다.
.translate {
transform: translate(10px, 50px);
}
.scale {
transform: scale(.75);
}
.skew {
transform: skew(5deg, -20deg);
}
.rotate {
transform: rotate(70deg);
}
.complex {
transform: scale(.5) rotate(20deg);
}
transform-origin
기본 기준점(요소의 정중앙 50%, 50%)을 설정할 때 사용합니다.
설정값으로 %, px, top left, bottom right을 사용합니다.
0 0
은 top left
, 100% 100%
는 bottom right
와 같은 값 입니다.
3D 트랜스폼(3D Transform)
프로퍼티값으로 변환함수(transform function)를 사용하며, 2D 트랜스폼에 z
가 추가된 형태입니다.
translate3d(x,y,z)
, translateZ(n)
, scale3d(x,y)
, scaleZ(n)
, rotate3d(x,y,z)
, rotateZ(z)
17. 웹디자인 타이포그래피(Typography)
웹디자인 관점에서 폰트는 중요한 의미를 갖고 있습니다.
웹 폰트
를 통해 사용자가 웹페이지를 요청한 순간 CSS에 기술된 필요 폰트가 서버에서 클라이언트로 전송되는 방식으로 진행됩니다.
물론 매번이 아닌 클라이언트에 해당 폰트가 없을 경우 전송됩니다.
CDN(Content Delivery Network) 링크 방식
웹 폰트를 사용하는 방법 중 가장 간단한 방법입니다.
Google Font 에서 사용하고자 하는 웹폰트를 선택한 후, 다음처럼 CSS 파일에 추가합니다.
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
* {
font-family: 'Nanum Gothic', sans-serif;
}
서버 폰트 로딩 방식
CDN 링크를 사용하는 방법은 간편하지만 로딩 속도가 느린 편입니다.
여러 개의 폰트 사용으로 인한 느린 로딩 or CDN 링크를 제공하지 않는 등 단점을 보완하기 위해서는 서버 폰트 로딩 방식이 있습니다.
@font-face
규칙으로 폰트를 등록하고 font-family
프로퍼티로 폰트를 선택하여 사용할 수 있습니다.
@font-face {
font-family: myFontName;
src: url("myFont.woff");
}
* {
font-family: myFontName, sans-serif;
}
해당 방식은 폰트 파일을 서버에 두고 요청이 오면 클라이언트로 전송하는 방식입니다.
하지만 브라우저에 따라 지원하는 폰트 형식이 다르다는 문제점이 있습니다.
@font-face {
font-family:"Nanum Gothic";
src:url("NanumGothic.eot"); /* IE 9 호환성 보기 모드 대응 */
src:local("☺"), /* local font 사용 방지. 생략 가능 */
url("NanumGothic.eot?#iefix") format('embedded-opentype'), /* IE 6~8 */
url("NanumGothic.woff") format('woff'); /* 표준 브라우저 */
}
* { font-family: "Nanum Gothic", sans-serif; }
위 코드를 통해 브라우저에 따라 필요한 폰트만을 다운 할 수 있다는 것을 알 수 있습니다.
영문과 한글을 혼용하는 경우에는 영문 폰트 먼저 작성 후, 그 다음 한글 폰트를 지정하여야 합니다.
한글 폰트부터 지정하면 영문에도 한글 폰트가 지정 됩니다.
18. 레이아웃 Layout
layout이란 웹사이트를 구성하는 요소들을 배치할 공간을 분할하고 정렬하는 것입니다.
핵심은 block 레벨 요소들을 원하는 위치에 배열하는 것입니다.
화면의 크기에 따라 화면 구성을 변화시키는 반응형 웹 디자인(Responsive Web Design) 또한 모던 웹 사이트의 필수 사항이 되었습니다.
Header & Navigation Bar
Navigation Bar
는 기본적으로 링크들의 리스트이며 ul
, li
, tag
를 이용하여 작성하는 것이 일반적 입니다.
<div id="wrap">
<header>
<a class="logo" href="#home">
<img src="https://poiemaweb.com/img/logo.png">
</a>
<nav>
<ul class="nav-items">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
</div>
Section & Aside
Section
은 콘텐츠의 영역을 말하며, Aside
는 콘텐츠에 대한 Navigation item이나 부가 정보 영역을 말합니다.
Section
영역은 다시 article
영역으로 구분할 수 있습니다.
<div id="content-wrap">
<aside>
<h1>Aside</h1>
<ul>
<li><a href="#" class="active">London</a></li>
<li><a href="#">Paris</a></li>
</ul>
</aside>
<section>
<article id="london">
<h1>London</h1>
<p>...</p>
</article>
<article id="paris">
<h1>Paris</h1>
<p>...</p>
</article>
</section>
<!-- end of content-wrap -->
</div>
footer
content-wrap 영역 다음인 화면 하단 영역에 footer를 배치합니다.
작성자, 저작권 정보 등을 표현하기 위해 사용됩니다.
<footer>© Copyright ggong59</footer>
여기까지 애니메이션, 트랜스 폼, 웹 폰트, 레이아웃에 대해 알아보았습니다.