HTML/CSS 11.CSS Vendor Prefix / Shadow / Gradient / Transition / Animation / Transform / Web Font

정선용·2022년 3월 26일
ITIT > TECHIT > TECH > FEIT > TECH > FE > html/css
0

프론트엔드 기본기(2022)

목록 보기
13/15

11.1 Vendor Prefix

Vendor Prefix

CSS3 표준으로 확정되기 이전 또는 브라우저 개발사가 실험적으로 제공하는 기능을 사용하기 위해서는 벤더 프리픽스(Vendor Prefix)를 사용

  • Can I USE
    브라우저별 CSS지원정보에서 해당 기능이 내가 고려하는 브라우저에서 지원되는지 여부를 확인할 수 있는데, 베너 프리픽스를 사용해 해당 브라우저에서 표준이 아닌 속성을 사용할 수 있다.

  • 브라우저별 벤더 프리픽스

    BrowserVendor Prefix
    IE or Edge-ms-
    Chrome-webkit-
    Firefox-moz-
    Safari-webkit-
    Opera-o-
    iOS Safari-webkit-
    Android Browser-webkit-
    Chrome for Android-webkit-

    브라우저는 거의 매달 업데이트가 이루어지고 있어 불필요한 벤더 프리픽스를 사용할 가능성이 크다
    이는 성능에도 영향을 주기 때문에 Prefix Free 라이브러리를 사용하는 것이 좋다
    prefix free 라이브러리는 접두사 없이 각 브라우저를 호환하는 js플러그인이다.

    <script src="prefixfree.min.js"></script>

    위와같이 라이브러리 다운 후 include하기만 하면 됨.

11.2 Shadow

shadow는 텍스트 요소에 그림자 효과를 부여할 수 있는 프로퍼티.

text-shadow

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

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

box-shadow

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

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

11.3 Gradient

Gradient

레이디언트(Gradient)는 2가지 이상의 색상을 혼합하여 부드러운 색감의 배경 등을 생성하는 것
그레이디언트는 종료

  • 선형 그레이디언트 (Linear Gradient: goes down/up/left/right/diagonally)
  • 방사형 그레이디언트 (Radial Gradient: defined by their center)
    그레이디언트는 CSS3가 비교적 최근부터 제공하는 기술로서벤더프리픽스를 사용해야할 수도 있고 브라우저에 따라 조금씩 문법이 상이하여 다루기가 수월하지 않다. 따라서 그레이디언트를 직접 작성하는 것보다 작성 툴을 이용하는 것이 보편적.
    Ultimate CSS Gradient Generator

예시

<head>
  <style>
    .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>
</head>
<body>
  <div class="dawn"></div>
</body>

11.4 Transition

트랜지션(transition)은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것
상태 변화에 따라 CSS 프로퍼티가 변경되면 프로퍼티 변경에 따른 표시의 변화(transition)는 지체없이 즉시 발생. 즉각변환.
트랜지션(transition)은 상태 변화로 변경되는 CSS 프로퍼티 값변화 표시를 부드럽게 애니메이션 속도를 조절 : 일정 시간(duration)

참고) 이런 주의 포인트들이 있다.

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

<head>
  <style>
    div {
      width: 100px;
      height: 100px;
      background: red;
      /* 트랜지션 효과: 모든 프로퍼티의 변화를 2초에 걸쳐 전환한다. */
      transition: all 2s;
    }
    div:hover {
      border-radius: 50%;
      background: blue;
    }
  </style>
</head>
<body>
  <div></div>
</body>
<head>
  <style>
    div {
      width: 100px;
      height: 100px;
      background: red;
    }
    div:hover {
      background: blue;
      border-radius: 50%;
      /* hover on에서만 발동한다. */
      transition: all 2s;
    }
  </style>
</head>
<body>
  <div></div>
</body>

transition은 js 액션(혹은 가상 클래스선택자) 에 의해서만 발생한다(hover..) 만약 트랜지션이 자동 발동(self-invoking transition)하도록 하고 싶다면 CSS 애니메이션을 사용

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

trainsition-property

ransition-property 프로퍼티는 트랜지션의 대상이 되는 CSS 프로퍼티명을 지정(default : 지정x : 모든 property, 복수대상은 쉼표로구분)
주의 ) 모든 CSS 프로퍼티가 트랜지션의 대상이 될 순 없음. width, font-size, background-color 등은 하나의 범주안에서 값이 변화하지만 display 프로퍼티는 그렇지 않다.

  • trainsition 대상이 될 수 있는 css property
    • 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

transition-duration

transition-duration 프로퍼티는 트랜지션에 일어나는 지속시간(duration)을 초 단위(s) 또는 밀리 초 단위(ms)로 지정(default : 0, 효과x)
transition-duration 프로퍼티값은 transition-property 프로퍼티값과 1:1 대응
작성법

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

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

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

transition-timing-function

트랜지션 효과의 변화 흐름, 시간에 따른 변화 속도와 같은 일종의 변화의 리듬을 지정
대부분의 타이밍 함수는 큐빅 베이지어(cubic bezier)를 정의하는 네 점에 의해 정의되므로 상응하는 함수의 그래프로 제공해서 명시할 수 있다. : 베지에곡선
transition-timing-function 프로퍼티값으로 미리 정해둔 5개의 키워드가 제공
코드예시

<head>
  <style>
    div {
      font: bold 16px/50px "Open Sans";
      color: white;
      text-align: center;
      width: 100px;
      height: 50px;
      background-color: red;
      margin-bottom: 10px;
      transition: width 2s;
    }
    div:nth-child(1) {
      transition-timing-function: ease;
    }
    div:nth-child(2) {
      transition-timing-function: linear;
    }
    div:nth-child(3) {
      transition-timing-function: ease-in;
    }
    div:nth-child(4) {
      transition-timing-function: ease-out;
    }
    div:nth-child(5) {
      transition-timing-function: ease-in-out;
    }
    div:hover {
      width: 300px;
    }
  </style>
</head>
<body>
  <h3>transition-timing-function</h3>
  <div>ease</div>
  <div>linear</div>
  <div>ease-in</div>
  <div>ease-out</div>
  <div>ease-in-out</div>
</body>
프로퍼티값효과
ease기본값. 느리게 시작하여 점점 빨라졌다가 느리지면서 종료한다.
linear시작부터 종료까지 등속 운동을 한다.
ease-in느리게 시작한 후 일정한 속도에 다다르면 그 상태로 등속 운동한다.
ease-out일정한 속도의 등속으로 시작해서 점점 느려지면서 종료한다.
ease-in-outease와 비슷하게 느리게 시작하여 느리지면서 종료한다.

transition-delay

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

transition

모든 트랜지션 프로퍼티를 한번에 지정할 수 있는 shorthand

transition: property duration function delay

transition-duration은 반드시 지정해야 한다.

11.5 Animation

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

  • transition vs animation

    • CSS 애니메이션과 트랜지션 방식의 주된 차이는 @keyframes rule에 있다
    • 일반적으로 트랜지션 효과는 요소 프로퍼티값이 다른 값으로 변화할 때 주로 사용하며 요소의 로드와 함께 자동으로 발동(단순 요소의 프로퍼티 변화에 주안점)
    • 애니메이션은 하나의 줄거리를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어할 수 있고 전체 줄거리의 재생과 정지, 반복까지 제어할 수 있다.
    • CSS 애니메이션을 사용하면 기존의 JavaScript 기반 애니메이션 실행과 비교하여 더 나은 렌더링 성능을 제공(경우에따라서는 x)
      • 비교적 작은 효과나 CSS만으로도 충분한 효과를 볼 수 있는 것은 CSS를 사용한다. 예를 들어 요소의 width 변경 애니메이션은 자바스크립트를 사용하는 것보다 훨씬 간편하며 효과적
      • 세밀한 제어를 위해서는 자바스크립트 사용이 바람직하다. 예를 들어 바운스, 중지, 일시 중지, 되감기 또는 감속과 같은 고급 효과는 자바스크립트가 훨씬 유용

  • 애니메이션 프로퍼티

    프로퍼티설명기본값
    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)

@keyframes

@keyframes rule은 시간의 흐름에 따라 애니메이션을 정의
여러 개의 키프레임을 정의하거나 애니메이션 중에 특정 CSS 프로퍼티에 값을 지정하는 지점을 정의

  • @keyframes 뒤 애니메이션을 대표하는 임의의 이름 부여
  • from, to 키워드를 사용하여 애니메이션의 시작과 끝 시점을 정의
  • from, to키워드 대신 % 지정 가능.
    @keyframes move {
/* 애니메이션 시작 시점 */
from { left: 0; }
/* 애니메이션 종료 시점 */
to   { left: 300px; }
}
@keyframes move {
0%   { left: 0; }
50%  { left: 100px; }
100% { left: 300px; }
}

animation-name

정의한 keyframes의 이름을 속성값으로 지정할 수 있으며
animation-name의 효과가 해당 엘레먼트에 적용한다.
: 정의된 효과를 식별해주는 것은 animation-name

<head>
  <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>
</head>

animation-duration

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

animation-timing-function

애니메이션 효과를 위한 수치 함수를 지정

animation-delay

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

animation-iteration-count

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

animation-direction

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

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

animation-fill-mode

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

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

animation-play-state

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

animation

모든 애니메이션 프로퍼티를 한번에 지정.값을 지정하지 않은 프로퍼티에는 기본값이 지정

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

animation-duration은 반드시 지정해야 한다. 지정하지 않는 경우 기본값 0s가 셋팅

11.6 Transform

트랜지션은 CSS 스타일 변경을 부드럽게 표현하기 위해 duration(지속시간)을 부여하여 속도를 조절한다.
애니메이션은 하나의 줄거리(@keyframes)를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어하여 요소의 움직임을 표현한다.
트랜스폼(Transform)은 요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew) 효과를 부여하기 위한 함수를 제공
트랜스폼은 애니메이션 효과를 위해 사용하여야 하는 것은 아니지만 애니메이션 효과를 부여할 필요가 있다면 트랜지션이나 애니메이션과 함께 사용

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)

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

    <html>
<head>
<style>
.box {
  width: 95px;
  height: 95px;
  line-height: 95px;
  color: white;
  text-align: center;
  border-radius: 6px;
}
.original {
  margin: 30px;
  border: 1px dashed #cecfd5;
  background: #eaeaed;
  float: left;
}
.child {
  background: #2db34a;
  cursor: pointer;
}
.translate {
  transform: translate(10px, 50px);
}
.scale {
  transform: scale(.75);
}
.skew {
  transform: skew(5deg, -20deg);
}
.rotate {
  transform: rotate(70deg);
}
.complex {
  transform: scale(.5) rotate(20deg);
}

/* Animation Effect */
.translate:hover {
  transition: transform 1s linear;
  transform: translate(0px, 0px);
}
/* .translate:hover {
  animation: translate 1s linear forwards;
}
@keyframes translate {
  100% {
    transform: translate(0px, 0px);
  }
} */
.scale:hover {
  transition: transform 1s linear;
  transform: scale(1);
}
.skew:hover {
  transition: transform 1s linear;
  transform: skew(0, 0);
}
.rotate:hover {
  transition: transform 1s linear;
  transform: rotate(0);
}
.complex:hover {
  transition: transform 1s linear;
  transform: scale(1) rotate(0);
}
</style>
</head>
<body>
<div class="original box">
  <div class="child box translate">translate</div>
</div>
<div class="original box">
  <div class="child box scale">scale</div>
</div>
<div class="original box">
  <div class="child box skew">skew</div>
</div>
<div class="original box">
  <div class="child box rotate">rotate</div>
</div>
<div class="original box">
  <div class="child box complex">complex</div>
</div>
</body>

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

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)

11.7 웹디자인 타이포그래피(Typography)

웹 브라우저는 로컬 소프트웨어이므로 로컬 환경의 리소스만 사용 가능 (and image쓴다면 많은 트래픽을 유발하고 웹크롤러가 정보를 수집할 수 없어 SEO관점에서도 바람직하지 않다.)
웹폰트는 사용자가 웹페이지를 요청한 순간 CSS에 기술된 필요 폰트가 서버에서 클라이언트로 전송(클라이언트에 해당 폰트가 존재하지 않을 경우 전송)

CDN(Content Delivery Network) 링크 방식

ex)구글에서 제공하는 웹폰트를 사용
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에서 파일을 찾아 다운로드
단점 : 로딩 속도가 느린 단점(로컬 폰트를 사용하는 것에 비해 느리다는 의미이다. 서버 폰트 로딩 방식보다는 빠를수 있다.)

서버 폰트 로딩 방식

CDN의경우 여러 개의 폰트를 사용한다면 로딩에 더욱 시간이 걸리고 CDN 링크를 제공하지 않는 폰트는 사용할 방법이 없다. 이러한 단점을 보완한 방법이 서버 폰트 로딩 방식

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

/* IE 9~ & all browsers */
@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; }

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

font-family: 'Lora', 'KoPub Batang', 'Times New Roman', serif;
profile
정선용
정선용
이전 포스트

HTML/CSS 10.CSS Inheritance & Cascading

다음 포스트

HTML/CSS 12.CSS Layout / Responsive-Layout

0개의 댓글