CSS3를 이용 다양한 타이포그래피(Typegraphy) 만들기

이 강좌는 월간 w.e.b. HOW TO 2011년 03호에 게재되어 있습니다.

“타이포그래피”란 예전부터 활판인쇄술을 가리키는 말로 통용되어 쓰여져 왔다. 그러나 디자인이라는 분야가 부각되기 시작하면서 그 의미도 바뀌었으며 그때부터 “타이포그래피”는 활판인쇄술 뿐만 아니라 의미전달의 한 방법으로써 발전했으며 기능적인 부분과 미적인 면에서 보다 효율적으로 활용하는 기술이나 학문이라는 개념으로 바뀌었다.

전통적인 타이포그래피가 읽기 위한 글자보다 보기에 좋고 미적인 개념이 주된 목적 이였다면 현대의 타이포그래피는 활자 그 자체의 미적 가치보다는 사용자가 얼마나 쉽고 빠르게 읽을 수 있는가 라는 기능에 핵심을 두었다는 점에서 큰 차이가 있다.
(4가지 원칙: 반복적이며 대조적이고 근접성을 갖추고 정렬)
타이포그래피의 기본적인 목적을 읽기 쉬워야 한다는 기능에 두는 것은 당연한 것이다. 그럼에도 불구하고 점차 그 의미와 표현이 다양해지고 깊어질 뿐만 아니라 그 영역도 훨씬 범위를 확대해 나가고 있다.

지난 시간에 언급했듯이 이번 연재엔 CSS3를 이용하여 기본적이지만 유용하게 사용할 수 있고 보다 광범위하게 활용 할 수 있는 여러가지 타이포그래피 튜토리얼을 제작해보자! (물론 여러 여건상 아직 자유롭게 사용 할 수 있는 속성은 한정적이며 브라우저 별 사용하는 방법도 조금씩 다를 수 있다는 것을 염두 해 두자.)

연재순서:

개요

국제 웹 표준화 기구인 W3C에서는 지난1월 HTML5와 CSS3 로고를 공개하였다.

이 또한 로고 타이포그래피이지 않는가?
잘 표현된 타이포그래피는 항상 번뜩이는 창의력 또는 아이디어가 필요하다.
CSS의 강점은 시멘틱한 Markup 구조 또는 성능을 저해하지 않고 웹어플리케이션의 표현력을 강화할 수 있다는데 있다. 그리고 또한 브라우저뷰 및 인쇄상의 유연성과 제어가 가능하다. 이러한 CSS의 장점을 가지고 타이포그래피를 만든다면, 그리고 오로지 CSS로만 할 것이 아니라 JS, 플래시, 이미지 등 각종 웹을 구성하고 있는 요소들을 가지고 활용한다면 좀 더 다양하고 새로운 표현을 할 수 있다.

CSS3를 이용한 타이포그래피의 장점

이미지 사용을 줄여 웹페이지 로딩시간이 줄어든다.
모바일인 경우 통신비용(3G망)을 줄일 수 있다.
CSS코드 수정만으로 유연한 수정이 가능하다.
같은 효과의 타이포그래피가 많은 경우 지정된 선택자의 수정만으로 동일 선택자의 모든요소들이 적용된다.(유지보수 저비용 고효율)

예제작성 순서

Step 1. HTML로 Markup(구조)

모든 웹페이지 작성시 실질적인 코드를 입힐 때 뼈대인 HTML Markup을 하는 단계이다.
원래 제일 많이 고민해야 하고 또한 많은 시간이 걸리며 웹접근성 및 웹표준에 맞춰서 작업하면 완성 시 디버깅타임이 짧아지고 유지보수를 좀더 능동적으로 처리할 수 있게 되지만 본 연재에서의 예제 작성시에는 간단한 Markup만 존재하므로 개략적인 코드로만 작성하였다.
Markup에 쓰일 HTML 버전은 CSS3와 함께 현재 가장 이슈메이커인 HTML5로 DOCTYPE을 잡고 시작한다.

Step 2. CSS로 스타일링하기(표현)

윈도우 기본폰트 중 폰트를 정의하였으며 CSS로 관련 요소들을 정리하여 구성한다.
각 예제에서 배울 CSS속성들을 넣어 코드를 생성한다.

Step 3. 적용결과

PC용 크롬9.0.597.84 (웹킷계열) 버전에서 테스트하였으며 각 브라우저 호환성은 고려하지 않고 테스트하였다.
테스트 환경으로서는 기존 연재에서와 마찬가지로 웹킷(webkit)계열 브라우저를 기본으로 모든 샘플코드 및 예제를 크롬기준으로 작성하고 설명할 것이다.

이번 연재에서 다룰 CSS3 주요속성

모듈형태의 Text effect를 주기 위해서는 아래와 같은 참고사항이 있다.

text-shadow 속성

구분	설명
값	none \| [<가로><세로><번짐크기><색상>], [<가로><세로><번짐크기>,<색상>] \| inherit 줄임) <shadow1>, <shadow2>
초기값	없음
적용	모든 요소 가능
상속	가능
비율	없음
미디어	시각
계산 값	<가로><세로><번짐크기>, <색상>

기존 shadow 효과는 흔히 포토샵같은 그래픽툴에서 drop shadow효과를 적용하여 이미지 형태로 제공해 왔다. 그렇지만 CSS3에서는 text-shadow라는 속성으로 간단하게 shadow효과를 표현할 수 있다.
물론 좀 더 세심하게 작업을 하면 포토샵에 준하는 훌륭한 결과물도 얻을 수 있다.

이 속성은 지정된 요소의 텍스트에 적용이 되며 shadow효과를 얻을 수 있다.
첫번째 shadow가 상단에 있고 두번째 shadow는 아래에 있으며 서로 중첩이 가능하다.
shadow를 콤마(,)로 구분하여 여러 번 지정할 수 있다. 예) text-shadow: W1 H1 Blur1 rgba1, W2 H2 Blur2 rgba2, …
shadow는 요소의 크기를 벗어날 수 있으나 레이아웃에 영향을 주지는 않는다.

그 외 사용속성

속성	설명
transform	translate(X이동,Y이동), scale(수치), skew(각도), rotate(각도)
gradient	-webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), to(#fff));

그 외 text모듈 관련 css3 속성은 명세 Appendix B: Property index를 참고하면 된다.

CSS를 이용하여 이미지를 대체할 각종 효과주기

기존 버전에서 제약사항이 있었던 만큼 CSS3에서는 좀 더 다양한 타이포그래피를 표현할 수 있도록 개발 진행 중이다. 실제로 웹상의 컨텐츠는 많은부분 텍스트형태로 제공되고 있는데 그중에서 중요한 타이틀부터 디테일한 내용까지 다양한 타이포그래피가 적용되어 왔다.
기존의 이미지에 의존되어 사용했었던 대부분의 컨텐츠를 코드로 제작하기 위한 고민을 시작해 보자!
이번 장에서는 그 중에서 몇 가지 예제를 가지고 실제로 웹페이지에 적용시킬 수 있는 몇 가지 를 직접 제작해 보겠다.

각 브라우저별 속성지원 참고사이트

Emboss/ Intaglio (양각/음각)효과

Step 1. HTML


<!DOCTYPE html>
<html lang="ko">
<head>
<title>emboss/intaglio</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
  적용할 CSS 들어가는 곳
</style>
</head>
<body>
  <h1>Amazing CSS3 Emboss Effect!</h1>
  <h2>Amazing CSS3 Intaglio Effect!</h2>
</body>
</html>

Step 2. CSS


body {
  padding:100px;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.01, rgb(38,93,99)),
    color-stop(0.51, rgb(76,158,176)),
    color-stop(0.76, rgb(90,202,214))
    );
}
h1{
  font: 40px Georgia Bold, Sans-Serif;
  text-align: center;
  color: #fff;
  text-shadow: 0px 3px 8px #2a2a2a;
}
h2 {
  font: 40px Tahoma Bold, Sans-Serif;
  text-align: center;
  color: #fff;
  text-shadow: 0px 2px 3px #68afc1;
}

Step 3. 적용결과

Emboss(양각)효과

Intaglio(음각)효과

3D 효과

Step 1. HTML


<!DOCTYPE html>
<html lang="ko">
<head>
<title> 3D </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
  적용할 CSS 들어가는 곳
</style>
</head>
<body>
  <h1>Amazing CSS3 3D Typography!</h1>
</body>
</html>

Step 2. CSS


body{
  padding: 100px;
  background-image: -webkit-gradient(
    linear,
    right bottom,
    left top,
    color-stop(0.01, rgb(85,38,97)),
    color-stop(0.51, rgb(148,77,176)),
    color-stop(0.81, rgb(204,90,214))
  );
}
h1 {
  font: bold 40px/1 Georgia, sans-serif;
  color: #fff;
  text-shadow: 0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0,0,0,.1),
    0 0 5px rgba(0,0,0,.1),
    0 1px 3px rgba(0,0,0,.3),
    0 3px 5px rgba(0,0,0,.3),
    0 5px 10px rgba(0,0,0,.2),
    0 10px 10px rgba(0,0,0,.2),
    0 20px 20px rgba(0,0,0,.15);
}

Step 3. 적용결과

불타는 글자효과

Step 1. HTML


<!DOCTYPE html>
<html lang="ko">
<head>
<title>Fire</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
  적용할 CSS 들어가는 곳
</style>
</head>
<body>
  <h1>Amazing CSS3 Fire Effect!</h1>
</body>
</html>

Step 2. CSS


body {
  padding:100px;
  background: #000;
}
h1 {
  text-align: center;
  font: 40px Tahoma Bold;
  color: #ffff99;
  text-shadow: 0 0 5px #ffff00, 5px -5px 10px #ffcc33, -10px -10px 15px #ff9933,
    15px -20px 20px #ff6666, -20px -25px 25px #cd4606, 0 -30px 30px #ff6633,
    10px -35px 35px #ff0000;
}

Step 3. 적용결과

네온 효과

Step 1. HTML


<!DOCTYPE html>
<html lang="ko">
<head>
<title> Neon</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
  적용할 CSS 들어가는 곳
</style>
/head>
<body>
  <h1>Amazing CSS3 Neon Effect!</h1>
</body>
</html>

Step 2. CSS


body {
  padding:100px;
  background: #000;
}
h1 {
  text-align: center;
  font: 40px Sans-Serif;
  color: #f5c7ff;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de,
    0 0 30px #ff00de, 0 0 40px #ff00de, 0 0 60px #ff00de, 0 0 90px #ff00de,
    0 0 120px #ff00de, 0 0 200px #ff00de;
}

Step 3. 적용결과

텍스트 변형시키기

Step 1. HTML


<!DOCTYPE html>
<html lang="ko">
<head>
<title> Rotate/Skew/Scale </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
  적용할 CSS 들어가는 곳
</style>
</head>
<body>
  <h1>Amazing CSS3 Rotate Effect!</h1>
  <h2>Amazing CSS3 Skew Effect!</h2>
  <h3>Amazing CSS3 Scale Effect!</h3>
</body>
</html>

scale(크기), rotate(시계방향 회전), skew(비틀기)가 가능하다.(translate는 연재5에서 설명)
transform-oriain 속성은 transform의 축 지정하는 속성 – 기본 값 50%(X축),50%(Y축)
(기본값 생략가능)

Step 2. CSS


body {
  padding:100px;
  background-image: -webkit-gradient(
    linear,
    right bottom,
    left top,
    color-stop(0.01, rgb(39,97,43)),
    color-stop(0.51, rgb(135,173,92)),
    color-stop(0.81, rgb(160,212,91))
  );
}
h1{
  font: 40px Georgia Bold, Sans-Serif;
  text-align: center;
  color: #fff;
  text-shadow: 0px 3px 8px #2a2a2a;
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
h2 {
  font: 40px Tahoma Bold, Sans-Serif;
  text-align: center;
  color: #fff;
  text-shadow: 0px 2px 3px #68afc1;
    -webkit-transform: skew(60deg);
}
h3 {
  font: 40px Tahoma Bold, Sans-Serif;
  text-align: center;
  color: #fff;
  text-shadow: 0px 2px 3px #68afc1;
  -webkit-transform: scale(.6);
}

Step 3. 적용결과

슬라이딩 라이트효과

아이폰 비밀번호 잠금해제 할 때 나오는 화면이랑 유사하다. 마지막 연재에 배울 애니메이션 효과도 들어가 있으니 그 부분은 참고하면 될 것이며 주요기능은 그라디언트 부분과 텍스트 타이포그래피적인 부분이다.

Step 1. HTML


<!DOCTYPE html>
<html lang="ko">
<head>
<title> 예제 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
  적용할 CSS 들어가는 곳
</style>
</head>
<body>
  <h1>Slide to Unlock</h1>
</body>
</html>

Step 2. CSS


body {
  padding:100px;
  background: #< | class="nu0">333|>;
}
h1{
  font: 40px Sans-Serif;
  background: -webkit-gradient(linear, left top, right top, from(#555), to(#555), color-stop(0.5, #fff)) 0 0 no-repeat;
  color: rgba(255, 255, 255, 0.3);
    -webkit-background-size: 100px;
    -webkit-background-clip: text;
    -webkit-animation-name: ipslide;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes ipslide{
  0% {background-position: top left;}
  100% {background: top right;}
}

Step 3. 적용결과

5. 참고사이트 http://www.css3maker.com/

마치며

지금까지 다양한 타이포그래피 제작을 위한 CSS3의 Text 관련된 여러 가지 속성들을 다루어 보았다. 현재까지 작성해본 기능만으로도 뭔가 그려지지 않는가? 처음 본 연재를 접한 독자라면 기존 이미지방식의 디자인이 아닌 코드로 디자인하는 첫걸음이 될것이며 CSS를 활용하여 좀더 다양한 디자인을 한다면 더욱 다양한 UI가 코드로 작성 될 수 있을 것이다.

지난 2월 연재 첫 페이지에도 언급했지만 CSS3는 아직 100% 완성된 스팩이 아니며 일부 속성 중 웹킷계열과 오페라, 파이어폭스, IE의 속성 선언방식이 다르다. 그렇기 때문에 가장 최신 업데이트된 CSS3의 명세를 읽어 볼 것을 권장한다. 본 연재를 바탕으로 다양한 페이지를 만들다 보면 어느 정도 밑그림이 그려질 것이고 그것을 바탕으로 주요브라우저가 모두 지원하게끔 제작을 하면 된다.

다음 연재에서는 “이미지 편집/효과주기(2D/3D)”라는 주제를 가지고 웹페이지를 구성하는 가장 일반적인 요소중의 하나인 이미지와 그와 관련된 요소들을 바탕으로 CSS를 통한 각종 효과를 표현하는 방법을 알아볼 것이다.

다음 글도 한번 읽어보세요:

저작자표시 (새창열림)

'Programing > CSS' 카테고리의 다른 글

폰트 꾸미기 (0)	2012.11.23
드롭다운메뉴 (0)	2012.11.21

ultrasound

CSS3를 이용 다양한 타이포그래피(Typegraphy) 만들기

개요

CSS3를 이용한 타이포그래피의 장점

예제작성 순서

Step 1. HTML로 Markup(구조)

Step 2. CSS로 스타일링하기(표현)

Step 3. 적용결과

이번 연재에서 다룰 CSS3 주요속성

text-shadow 속성

그 외 사용속성

CSS를 이용하여 이미지를 대체할 각종 효과주기

Emboss/ Intaglio (양각/음각)효과

Step 1. HTML

Step 2. CSS

Step 3. 적용결과

3D 효과

Step 1. HTML

Step 2. CSS

Step 3. 적용결과

불타는 글자효과

Step 1. HTML

Step 2. CSS

Step 3. 적용결과

네온 효과

Step 1. HTML

Step 2. CSS

Step 3. 적용결과

텍스트 변형시키기

Step 1. HTML

Step 2. CSS

Step 3. 적용결과

슬라이딩 라이트효과

Step 1. HTML

Step 2. CSS

Step 3. 적용결과

마치며

다음 글도 한번 읽어보세요:

'Programing > CSS' 카테고리의 다른 글

티스토리툴바

CSS3를 이용 다양한 타이포그래피(Typegraphy) 만들기

개요

CSS3를 이용한 타이포그래피의 장점

예제작성 순서

Step 1. HTML로 Markup(구조)

Step 2. CSS로 스타일링하기(표현)

Step 3. 적용결과

이번 연재에서 다룰 CSS3 주요속성

text-shadow 속성

그 외 사용속성

CSS를 이용하여 이미지를 대체할 각종 효과주기

Emboss/ Intaglio (양각/음각)효과

Step 1. HTML

Step 2. CSS

Step 3. 적용결과

3D 효과

Step 1. HTML

Step 2. CSS

Step 3. 적용결과

불타는 글자효과

Step 1. HTML

Step 2. CSS

Step 3. 적용결과

네온 효과

Step 1. HTML

Step 2. CSS

Step 3. 적용결과

텍스트 변형시키기

Step 1. HTML

Step 2. CSS

Step 3. 적용결과

슬라이딩 라이트효과

Step 1. HTML

Step 2. CSS

Step 3. 적용결과

마치며

다음 글도 한번 읽어보세요:

'Programing > CSS' 카테고리의 다른 글

'Programing/CSS' Related Articles

티스토리툴바