CSS3 (Part 2.)

SongE·2022년 11월 8일
CSS3
1

TIL

목록 보기
6/6
post-thumbnail

1. 그림자

1.1 text-shadow

텍스트에 그림자 효과를 부여하는 프로퍼티이다.

선택자 { text-shadow: Horizontal-offset Vertical-offset Blur-Radius Shadow-Color; }

프로퍼티 값단위설명생략
Horizontal-offsetpx그림자를 텍스트의 오른쪽으로 지정값만큼 이동시킨다
Vertical-offsetpx그림자를 텍스트의 아래로 지정값만큼 이동시킨다
Blur-Radiuspx그림자의 흐림정도를 지정한다. 지정값만큼 그림자가 커지고 흐려진다. (양수)가능
Shadow-Colorcolor그림자의 색상을 지정한다가능

1.2 box-shadow

요소에 그림자 효과를 부여하는 프로퍼티이다.

선택자 { box-shadow: Inset Horizontal-offset Vertical-offset Blur-Radius Spread Shadow-Color; }

프로퍼티 값단위설명생략
Insetinsetinset 키워드를 지정하면 그림자가 요소 안쪽에 위치한다.가능
Horizontal-offsetpx그림자를 텍스트의 오른쪽으로 지정값만큼 이동시킨다
Vertical-offsetpx그림자를 텍스트의 아래로 지정값만큼 이동시킨다
Blur-Radiuspx그림자의 흐림정도를 지정한다. 지정값만큼 그림자가 커지고 흐려진다. (양수)가능
Spreadpx그림자를 더 크게 확장시킨다. (음수, 양수)가능
Shadow-Colorcolor그림자의 색상을 지정한다가능

2. 그레이디언트

그레이디언트(Gradient)는 2가지 이상의 색상을 혼합하여 부드러운 색감의 배경 등을 생성하는 것이다. CSS3가 이 기능을 제공하기 이전에는 포토샵 등의 소프트웨어를 사용하여 그레이디언트 효과의 이미지를 제작하여 사용하였다. 그러나 이러한 방법은 이미지 다운로드에 시간이 소요되는 문제와 이미지를 확대하였을 때 해상도가 나빠지는 문제 등을 내포하고 있었다.

그레이디언트는 2가지 종류가 있다.

  • 선형 그레이디언트 (Linear Gradient: goes down/up/left/right/diagonally)
  • 방사형 그레이디언트 (Radial Gradient: defined by their center)

그레이디언트는 CSS3가 비교적 최근부터 제공하는 기술로서 대부분의 브라우저에 벤더프리픽스를 사용하여야 하고 브라우저에 따라 조금씩 문법이 상이하여 다루기가 수월하지 않다. 따라서 그레이디언트를 직접 작성하는 것보다 작성 툴을 이용하는 것이 보편적이다.

 <style>
    body {
      margin: 0;
    }
    div {
      width: 100vw;
      height: 100vh;
    }
    .dawn {
      /* Old browsers */
      background: #b3cae5;
      /* FF3.6+ */
      background: -moz-linear-gradient(-45deg, #b3cae5 12%, #dbdde4 46%, #e4e3e4 70%, #f7ddbb 94%, #efcab2 100%);
      /* Chrome,Safari4+ */
      background: -webkit-gradient(linear, left top, right bottom, color-stop(12%, #b3cae5), color-stop(46%, #dbdde4), color-stop(70%, #e4e3e4), color-stop(94%, #f7ddbb), color-stop(100%, #efcab2));
      /* Chrome10+,Safari5.1+ */
      background: -webkit-linear-gradient(-45deg, #b3cae5 12%, #dbdde4 46%, #e4e3e4 70%, #f7ddbb 94%, #efcab2 100%);
      /* Opera 11.10+ */
      background: -o-linear-gradient(-45deg, #b3cae5 12%, #dbdde4 46%, #e4e3e4 70%, #f7ddbb 94%, #efcab2 100%);
      /* IE10+ */
      background: -ms-linear-gradient(-45deg, #b3cae5 12%, #dbdde4 46%, #e4e3e4 70%, #f7ddbb 94%, #efcab2 100%);
      /* W3C */
      background: linear-gradient(135deg, #b3cae5 12%, #dbdde4 46%, #e4e3e4 70%, #f7ddbb 94%, #efcab2 100%);
    }
</style>

3. 트랜지션

트랜지션(transition)은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다. 예를 들어 아래의 예제를 살펴보자.

<style>
    div {
      width: 100px;
      height: 100px;
      background: red;
      /* 트랜지션 효과: 모든 프로퍼티의 변화를 2초에 걸쳐 전환한다. */
      transition: all 2s;

    }
    div:hover {
      border-radius: 50%;
      background: blue;
    }
</style>

위 예제에서는 div 요소에 마우스가 올라갈 때(hover on)와 마우스가 내려올 때(hover off) border-radius, background 프로퍼티 값의 변화가 발생한다. 그리고 이들 프로퍼티 값의 변화를 2초에 걸쳐 이루어지도록 설정한 것이다.

div 셀렉터의 룰셋에 트랜지션을 설정하면 마우스가 올라갈 때(hover on)와 마우스가 내려올 때(hover off) 모두 트랜지션이 발동한다. 하지만 div:hover 셀렉터의 룰셋에 트랜지션을 설정하면 마우스가 올라갈 때(hover on)는 트랜지션이 발동하지만 마우스가 내려올 때(hover off)는 트랜지션이 발동하지 않는다.

transition은 자동으로 발동되지 않는다. :hover와 같은 가상 클래스 선택자(Pseudo-Classes) 또는 JavaScript의 부수적인 액션에 의해 발동한다. 위 예제의 div 요소에 적용된 트랜지션은 이와 같은 부수적 액션없이는 어떤 효과도 볼 수 없다.

만약 트랜지션이 자동 발동(self-invoking transition)하도록 하고 싶다면 CSS 애니메이션을 사용하도록 한다.

transition의 프로퍼티는 아래와 같다.

프로퍼티설명기본값
transition-property트랜지션의 대상이 되는 CSS 프로퍼티를 지정한다all
transition-duration트랜지션이 일어나는 지속시간(duration)을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다0s
transition-timing-function트랜지션 효과를 위한 수치 함수를 지정한다.ease
transition-delay프로퍼티가 변화한 시점과 트랜지션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다0s
transition모든 트랜지션 프로퍼티를 한번에 지정한다 (shorthand syntax)

3.1 transition-property

transition-property 프로퍼티는 트랜지션의 대상이 되는 CSS 프로퍼티명을 지정한다. 지정하지 않는 경우 모든 프로퍼티가 트랜지션의 대상이 된다. 복수의 프로퍼티를 지정하는 경우 쉼표(,)로 구분한다.

<style>
    div {
      width: 100px;
      height: 50px;
      background-color: red;
      margin-bottom: 10px;
      transition-property: width, background-color;
      transition-duration: 2s, 2s;
    }
    div:hover {
      width: 300px;
      background-color: blue;
    }
</style>

주의해야 할 사항은 모든 CSS 프로퍼티가 트랜지션의 대상이 될 수 없다는 것이다. 예를 들어 width, font-size, background-color 등은 하나의 범주(width, font-size는 크기, background-color는 색상)안에서 값이 변화하지만 display 프로퍼티는 그렇지 않다.

트랜지션의 대상이 될 수 있는 CSS 프로퍼티는 다음과 같다.

// Box model
width height max-width max-height min-width min-height
padding margin
border-color border-width border-spacing
// Background
background-color background-position
// 좌표
top left right bottom
// 텍스트
color font-size font-weight letter-spacing line-height
text-indent text-shadow vertical-align word-spacing
// 기타
opacity outline-color outline-offset outline-width
visibility z-index

또한 요소의 프로퍼티 값이 변화하면 브라우저는 프로퍼티 값의 변화에 영향을 받는 모든 요소의 기하값(위치와 크기)를 계산하여 layout 작업을 수행한다. 이것은 브라우저에게 스트레스를 주어 성능 저하의 요인이 된다. 심지어 다수의 자식 요소를 가지고 있는 요소(예를 들어 body 요소)가 변경되면 모든 자식 요소의 기하값이 재계산될 수도 있다. 따라서 layout에 영향을 주는 트랜지션 효과는 회피하도록 노력해야 한다.

layout에 영향을 주는 프로퍼티는 다음과 같다.

width height padding margin border
display position float overflow
top left right bottom
font-size font-family font-weight
text-align vertical-align line-height
clear white-space

3.2 transition-duration

transition-duration 프로퍼티는 트랜지션에 일어나는 지속시간(duration)을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다. 프로퍼티값을 지정하지 않을 경우 기본값 0s이 적용되어 어떠한 트랜지션 효과도 볼 수 없다.

아래의 경우, width 프로퍼티는 2초, opacity 프로퍼티는 4초의 지속시간을 갖는다.

div {
  transition-property: width, opacity;
  transition-duration: 2s, 4s;
}

또한 transition 프로퍼티만으로 축약 표현이 가능하다.

div {
  /* shorthand syntax */
  transition: width 2s, opacity 4s;
}

아래의 경우, width 프로퍼티는 2초, opacity 프로퍼티는 1초, left 프로퍼티는 2초, top 프로퍼티는 1초의 지속시간을 갖는다.

div {
  transition-property: width, opacity, left, top;
  transition-duration: 2s, 1s;
}

3.3 transition-timing-function

트랜지션 효과의 변화 흐름, 시간에 따른 변화 속도와 같은 일종의 변화의 리듬을 지정한다.

대부분의 타이밍 함수는 큐빅 베이지어(cubic bezier)를 정의하는 네 점에 의해 정의되므로 상응하는 함수의 그래프로 제공해서 명시할 수 있다. transition-timing-function 프로퍼티값으로 미리 정해둔 5개의 키워드가 제공된다. 기본값은 ease이다.

프로퍼티값효과
ease기본값. 느리게 시작하여 점점 빨라졌다가 느리지면서 종료한다.
linear시작부터 종료까지 등속 운동을 한다.
ease-in느리게 시작한 후 일정한 속도에 다다르면 그 상태로 등속 운동한다.
ease-out일정한 속도의 등속으로 시작해서 점점 느려지면서 종료한다.
ease-in-outease와 비슷하게 느리게 시작하여 느리지면서 종료한다.

3.4 transition-delay

프로퍼티가 변화한 시점과 트랜지션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다. 즉, transition-delay로 대기 사간을 지정하여 프로퍼티의 값이 변화하여도 즉시 트랜지션이 실행되지 않고, 일정 시간 대기한 후 트랜지션이 실행되도록 한다.

3.5 transition

모든 트랜지션 프로퍼티를 한번에 지정할 수 있는 shorthand이다. 값을 지정하지 않은 프로퍼티에는 기본값이 지정된다. 지정 방법은 다음과 같다.

transition: property duration function delay

transition-duration은 반드시 지정해야 한다. 지정하지 않는 경우 기본값 0이 셋팅되어 어떠한 트랜지션도 실행되지 않는다. 기본값은 아래와 같다.

all 0 ease 0

4. 애니메이션

애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킨다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 sequence를 나타내는 복수의 키프레임(@keyframes) 들로 이루어진다.

transition으로도 어느 정도의 애니메이션 효과를 표현할 수 있으나 animation보다는 제한적이다. 일반적으로 트랜지션 효과는 요소 프로퍼티값이 다른 값으로 변화할 때 주로 사용하며 요소의 로드와 함께 자동으로 발동되지 않는다. :hover 와 같은 가상 클래스 선택자(Pseudo-Class Selector) 또는 자바스크립트의 이벤트와 같은 부수적 액션에 의해 발동된다.

즉 transition 프로퍼티는 단순히 요소의 프로퍼티 변화에 주안점이 있다면 animation 프로퍼티는 하나의 줄거리를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어할 수 있고 전체 줄거리의 재생과 정지, 반복까지 제어할 수 있다.

  • 비교적 작은 효과나 CSS만으로도 충분한 효과를 볼 수 있는 것은 CSS를 사용한다. 예를 들어 요소의 width 변경 애니메이션은 자바스크립트를 사용하는 것보다 훨씬 간편하며 효과적이다.

  • 세밀한 제어를 위해서는 자바스크립트 사용이 바람직하다. 예를 들어 바운스, 중지, 일시 중지, 되감기 또는 감속과 같은 고급 효과는 자바스크립트가 훨씬 유용하다.

가장 중요한 것은 브라우저에서 애니메이션 효과가 부드럽게 실행되는 것이다. 그리고 애니메이션 효과 작성에 소요되는 시간과 수고이다. 여러 사항들을 고려하여 자바스크립트를 사용하여야 할지 CSS를 사용하여야 할지 결정하여야 한다.

프로퍼티설명기본값
animation-name@keyframes 애니메이션 이름을 지정한다
animation-duration한 싸이클의 애니메이션에 소요되는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다.0s
animation-timing-function애니메이션 효과를 위한 타이밍 함수를 지정한다.ease
animation-delay요소가 로드된 시점과 애니메이션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다0s
animation-iteration-count애니메이션 재생 횟수를 지정한다.1
animation-direction애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정한다.normal
animation-fill-mode애니메이션 미실행 시(종료 또는 대기) 요소의 스타일을 지정한다.
animation-play-state애니메이션 재생 상태(재생 또는 중지)를 지정한다.running
animation모든 애니메이션 프로퍼티를 한번에 지정한다 (shorthand syntax)

4.1 @keyframes

CSS 애니메이션과 트랜지션 방식의 주된 차이는 @keyframes rule에 있다. 이 rule을 사용하면 애니메이션의 흐름(sequence) 중의 여러 시점(breakpoint)에서 CSS 프로퍼티값을 지정할 수 있다.

<style>
    div {
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: red;
      animation-name: move;
      animation-duration: 5s;
      animation-iteration-count: infinite;
    }
    /* @keyframes rule */
    @keyframes move {
      from {
      /* 애니메이션 시작 시점 */
        left: 0;
      }
      /* 애니메이션 종료 시점 */
      to {
        left: 300px;
      }
    }
</style>

from, to 키워드 대신 %를 사용할 수 있다. 또한 시작과 끝 키프레임 사이에 % 단위로 키프레임을 삽입할 수 있다.

@keyframes move {
  0%   { left: 0; }
  50%  { left: 100px; }
  100% { left: 300px; }
}

4.2 animation-name

위 예제를 보면 @keyframes 뒤에 애니메이션을 대표하는 임의의 이름를 부여하였다.

@keyframes move {}

이 이름을 animation-name 프로퍼티값으로 지정하여 사용하고자 하는 @keyframes rule을 선택한다. 하나 이상의 애니메이션 이름을 지정할 수 있다.

<style>
    div {
      position: absolute;
      width: 100px;
      height: 100px;
      animation-name: move, fadeOut, changeColor;
      animation-duration: 5s;
      animation-iteration-count: infinite;
    }
    @keyframes move {
      from { left: 0; }
      to   { left: 300px; }
    }
    @keyframes fadeOut {
      from { opacity: 1; }
      to   { opacity: 0; }
    }
    @keyframes changeColor {
      from { background-color: red; }
      to   { background-color: blue; }
    }
</style>

4.3 animation-duration

한 싸이클의 애니메이션에 소요되는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다.

animation-duration: .5s;
animation-duration: 500ms;

animation-duration은 반드시 지정해야 한다. 지정하지 않는 경우 기본값 0s가 셋팅되어 어떠한 애니메이션도 실행되지 않는다.

4.4 animation-timing-function

애니메이션 효과를 위한 수치 함수를 지정한다. 수치 함수에 대한 설명은 트랜지션 transition-timing-function 프로퍼티를 참조하기 바란다.

4.5 animation-delay

요소가 로드된 시점과 애니메이션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다.

animation-delay: 2s;

4.6 animation-iteration-count

애니메이션 주기의 재생 횟수를 지정한다. 기본값은 1이며 infinite로 무한반복 할 수 있다.

animation-iteration-count: 3;

4.7 animation-direction

애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정한다.

프로퍼티값설명
normal기본값으로 from(0%)에서 to(100%) 방향으로 진행한다.
reverseto에서 from 방향으로 진행한다.
alternate홀수번째는 normal로, 짝수번째는 reverse로 진행한다.
alternate-reverse홀수번째는 reverse로, 짝수번째는 normal로 진행한다.

4.8 animation-fill-mode

애니메이션 미실행 시(대기 또는 종료) 요소의 스타일을 지정한다.

프로퍼티값상태설명
none대기시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.
종료애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.
forwards대기시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.
종료종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.
backwards대기시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
종료애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.
both대기시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
종료종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.

4.9 animation-play-state

애니메이션 재생 상태(재생 또는 중지)를 지정한다. 기본값은 running이다.

 <style>
    .box {
      position: relative;
      width: 100px;
      height: 100px;
      background-color: red;
      animation-name: move;
      animation-duration: 5s;
      animation-play-state: paused; /* 초기 애니메이션 재생 상태: 정지 */
      animation-iteration-count: infinite;
    }

    /* @keyframes rule */
    @keyframes move {
      from {
        left: 0;
      }

      to {
        left: 300px;
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <button class="start">start animation</button>
  <button class="pause">pause animation</button>

  <script>
    const box = document.querySelector('.box');

    document.querySelector('.start').addEventListener('click', function () {
      // trigger animation
      // prefixes would be needed...
      box.style.animationPlayState = 'running';
    });

    document.querySelector('.pause').addEventListener('click', function () {
      // pause animation
      // prefixes would be needed...
      box.style.animationPlayState = 'paused';
    });
  </script>
</body>

4.10 animation

모든 애니메이션 프로퍼티를 한번에 지정한다. 값을 지정하지 않은 프로퍼티에는 기본값이 지정된다. 지정 방법은 다음과 같다.

animation: name duration timing-function delay iteration-count direction fill-mode play-state

animation-duration은 반드시 지정해야 한다. 지정하지 않는 경우 기본값 0s가 셋팅되어 어떠한 애니메이션도 실행되지 않는다. 기본값은 아래와 같다.

none 0 ease 0 1 normal none running

5. 트랜스폼

트랜지션은 CSS 스타일 변경을 부드럽게 표현하기 위해 duration(지속시간)을 부여하여 속도를 조절한다.

애니메이션은 하나의 줄거리(@keyframes)를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어하여 요소의 움직임을 표현한다.

트랜스폼(Transform)은 요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew) 효과를 부여하기 위한 함수를 제공한다. 단 애니메이션 효과를 제공하지는 않기 때문에 정의된 프로퍼티가 바로 적용되어 화면에 표시된다. 트랜스폼은 애니메이션 효과를 위해 사용하여야 하는 것은 아니지만 애니메이션 효과를 부여할 필요가 있다면 트랜지션이나 애니메이션과 함께 사용한다.

5.1 2D 트랜스폼 (2D Transform)

2D 트랜스폼은 프로퍼티값으로 변환함수(transform function)를 사용한다. 변환함수는 다음과 같다.

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)

5.1.1 transform

변환함수를 프로퍼티값으로 쉼표없이 나열한다. 나열순서에 따라 차례대로 효과가 적용된다.

transform: func1 func2 func3 ...;

<style>
  .complex {
    transform: scale(.5) rotate(20deg);
  }

  .complex:hover {
    transition: transform 1s linear;
    transform: scale(1) rotate(0);
  }
</style>

5.1.2 transform-origin

요소의 기본기준점을 설정할 때 사용된다. 기본기준점은 요소의 정중앙이다(50%,50%). 이동은 기준점을 변경하여도 일정 거리만큼 이동하므로 의미가 없다. 설정값으로 %, px, top left, bottom right을 사용할 수 있다. 0, 0은 top left, 100% 100%는 bottom right과 같은 값이다.

<style>
  .scale1:hover {
    transition: transform 1s linear;
    transform-origin: 0 0;
    transform: scale(.5);
  }
  .scale2:hover {
    transition: transform 1s linear;
    transform-origin: 50% 50%;
    transform: scale(.5);
  }
  .scale3:hover {
    transition: transform 1s linear;
    transform-origin: 100% 100%;
    transform: scale(.5);
  }
</style>

5.2 3D 트랜스폼 (3D Transform)

3D 트랜스폼은 프로퍼티값으로 변환함수(transform function)를 사용한다. 사용할 수 있는 변환함수는 다음과 같다.

transform function설명단위
translate3d(x,y,z)요소의 위치를 X축으로 x만큼, Y축으로 y만큼 Z축으로 z만큼 이동시킨다.px, %, em 등
translateX(n)요소의 위치를 X축으로 x만큼 이동시킨다.px, %, em 등
translateY(n)요소의 위치를 Y축으로 y만큼 이동시킨다.px, %, em 등
translateZ(n)요소의 위치를 Z축으로 z만큼 이동시킨다.px, %, em 등
scale3d(x,y)요소의 크기를 X축으로 x배, Y축으로 y배, Z축으로 z배 확대 또는 축소 시킨다.0과 양수
scaleX(n)요소의 크기를 X축으로 x배 확대 또는 축소 시킨다.0과 양수
scaleY(n)요소의 크기를 Y축으로 y배 확대 또는 축소 시킨다.0과 양수
scaleZ(n)요소의 크기를 Z축으로 z배 확대 또는 축소 시킨다.0과 양수
rotate3d(x,y,z)요소를 X축으로 x각도, Y축으로 y각도, Z축으로 z각도 회전시킨다.+/- 각도(deg)
rotateX(x)요소를 X축으로 x각도 회전시킨다.+/- 각도(deg)
rotateY(y)요소를 Y축으로 y각도 회전시킨다.+/- 각도(deg)
rotateZ(z)요소를 Z축으로 z각도 회전시킨다.+/- 각도(deg)

6. 웹디자인 타이포그래피

웹디자인 관점에서 폰트의 선택은 중요한 의미를 갖는다. 대부분의 정보는 텍스트와 이미지로 전달되고 아직은 텍스트가 주를 이루기 때문에 더욱 그러하다. 이전에는 웹에서 사용할 수 있는 아름다운 한글 폰트가 적어 포토샵 등으로 로컬 폰트를 사용하여 텍스트를 이미지로 만들어 사용하였다. 이것은 많은 트래픽을 유발하고 웹크롤러가 정보를 수집할 수 없어 SEO관점에서도 바람직하지 않다. 아름답고 정돈된 폰트를 사용한다면 그 자체만으로도 훌륭한 웹디자인이 가능하다.

웹 브라우저는 로컬 소프트웨어이므로 당연한 이야기이지만 로컬 환경의 리소스만 사용 가능하다. 폰트는 로컬 환경에 존재하는 리소스의 하나로 로컬 환경에 있지 않은 폰트는 사용할 수 없다.

웹페이지는 불특정 사용자를 위해 제작되기 때문에 어떤 디바이스의 어떤 OS를 사용하는 사용자가 웹페이지에 접근할 지 알 수 없다. 웹페이지를 구성하는 html, css, javascript 파일이 사용자의 요청에 의해 서버에서 클라이언트로 다운로드되어 실행되는 것과 같이 폰트 또한 서버에서 클라이언트로 다운로드되어 실행될 수 있다면 이 문제는 해결될 수 있다.

이러한 문제를 해결할 수 있는 방법이 바로 웹폰트이다. 웹폰트는 사용자가 웹페이지를 요청한 순간 CSS에 기술된 필요 폰트가 서버에서 클라이언트로 전송된다. 좀 더 구체적으로 말하면 매번 다운로드되는 것은 아니고 클라이언트에 해당 폰트가 존재하지 않을 경우 전송된다.

6.1 CDN(Content Delivery Network) 링크 방식

웹폰트를 사용하는 방법 중 가장 간단한 방법은 CDN 링크를 사용하는 것이다. 다음은 구글에서 제공하는 웹폰트를 사용하는 방법이다.

Google Font 에서 사용하고자 하는 웹폰트를 선택한다. 한글 웹페이지에 자주 사용되는 나눔고딕은 Google Font Early Access에서 찾을 수 있다. 아래 구문을 CSS 파일에 추가한다.

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

* { font-family: 'Nanum Gothic', sans-serif; }

@import rule의 url 함수는 서버에서 혹은 지정된 url에서 파일을 찾아 다운로드한다.

6.2 서버 폰트 로딩 방식

Google Font를 사용하기 위해 CDN 링크를 사용하는 방법은 간편한 방법이지만 로딩 속도가 느린 단점이 있다.(로컬 폰트를 사용하는 것에 비해 느리다는 의미이다. 서버 폰트 로딩 방식보다는 빠를수 있다.) 여러 개의 폰트를 사용한다면 로딩에 더욱 시간이 걸릴 것이다. 또한 CDN 링크를 제공하지 않는 폰트는 사용할 방법이 없다. 이러한 단점을 보완한 방법이 서버 폰트 로딩 방식이다.

@font-face 규칙으로 폰트를 등록하고 font-family 프로퍼티로 폰트를 선택하여 사용할 수 있다.

/* IE 9~ & all browsers */
@font-face {
  font-family: myFontName;
  src: url("myFont.woff");
}

* { font-family: myFontName, sans-serif; }

폰트 파일을 서버에 두고 요청이 오면 클라이언트로 전송하는 방식이다. 하지만 문제는 여전히 존재한다. 브라우저에 따라 지원하는 폰트 파일 형식이 다르다는 문제가 있다.

EOTWOFFSVGOTF/TTF
IE 6~8OXXX
IE 9+OOXX
FirefoxXOXO
SafariXOOO
ChromeXOOO
OperaXOOO

아래 코드는 일반적으로 사용되는 검증된 웹폰트 사용 방법이다. 브라우저에 따라 필요한 폰트만을 다운로드할 수 있다.

@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; }

영문과 한글을 혼용하는 경우 먼저 영문 폰트, 그 다음 한글 폰트를 지정하여야 한다. 한글 폰트부터 지정하면 영문에도 한글 폰트가 지정된다.

profile
SongE
front-end developer dreamer
이전 포스트

CSS3 (Part 1.)

0개의 댓글