developerWorks에 처음 로그인하면 developerWorks프로파일이 생성됩니다.귀하의 프로파일에서 동의하신 내용이 공개되지만 이 사항은 언제든지 변경 가능합니다. 귀하의 성명(숨김으로 체크되어 있어도 표시됩니다)과 디스플레이 이름은 게시한 컨텐츠나 사이트 엑세스시 표시됩니다.

모든 정보가 안전하게 전송되었습니다.

처음 developerWorks에 로그인할 때 프로파일이 작성되므로, 이를 위해 디스플레이 이름을 선택해야 합니다. 선택하신 디스플레이 이름은 developerWorks에 게시한 컨텐츠에 표시됩니다.

3글자 이상 31글자 이하의 길이로 사용 가능합니다. dW커뮤니티 내에서는 보안상 이메일주소를 제외한 다른 이름을 지정하셔야 합니다.

모든 정보가 안전하게 전송되었습니다.

My developerWorks：

나의 통지：

로그아웃

언어 선택：

CSS 시작하기

표준을 사용한 디자인

Daniel Lewis, 컴퓨터 과학자, Vanir Systems

Daniel John Lewis는 잉글랜드 출신의 프리랜서 컴퓨터 과학자로 그래픽/색상 설계 전문가의 아들이다. 그는 PHP, Ruby, Java 및 XHTML과 같은 다양한 언어로 웹 애플리케이션을 개발하며 1980년 이후부터 개발 및 설계 소프트웨어를 사용해오고 있다. 그의 전산학 분야의 연구와 컨설팅은 시맨틱 웹, 링크된 데이터, 인공지능, 시스템 학습, 데이터 마이닝 및 "인간성을 위한 컴퓨터 사용"의 "영역에서 수행되는 경향이 있다. 이메일 주소는 daniel@vanirsystems.com이다.

요약： CSS 2.1과 크로스 브라우저 CSS3를 비롯한 표준화된 CSS 스타일 기술을 알아봅니다. 특히, 효과적인 기술을 사용하여 검색 엔진 최적화 기능을 강화하는 방법을 배울 뿐만 아니라 인쇄, 모바일 및 웹 뷰에 적합한 다양한 CSS 스타일을 학습하고 강화된 접근성을 확인합니다.

여기에 태그 달기!

기사 게재일： 2011 년 5 월 10 일
난이도： 초급
PDF： A4 and Letter (52KB | 13 pages)Get Adobe® Reader®
페이지뷰： 2362 회
의견：

CSS(Cascading Style Sheet)는 (X)HTML 웹 페이지 위에 매우 간단하게 계층적으로 적용할 수 있는 디자인 기술이다. 스타일 시트를 "계단식"화하면 스타일 시트를 전체 사이트에 적용할 수 있다. 다시 말해서 스타일을 해당 웹 사이트에 적용하면 스타일이 각 페이지의 각 요소 전체에 적용된다.

자주 사용하는 약어

API: Application programming interface
CSS: Cascading style sheet
HTML: Hypertext Markup Language
XHTML: Extensible HTML

웹 사이트에서는 데이터를 디자인과 분리하는 개념이 중요하다. 데이터는 (X)HTML을 사용하여 브라우저로 전송하며 디자인은 CSS를 사용하여 데이터에 적용한다. 이렇게 데이터를 디자인과 분리하면 특정한 접근성이 필요한 경우에 직접 디자인하지 않아도 사용자가 웹 페이지를 렌더링할 수 있을 뿐만 아니라 "이러한 방식으로 된" 디자인이 없어도 검색 엔진과 같은 시스템에서 웹 사이트를 색인화할 수 있다.

이 기사에서는 웹 사이트의 모습을 개선할 수 있는 기존의 다양한 최신 CSS 기술을 자세하게 살펴본다. 이 기사에서는 (X)HTML에 대한 몇 가지 지식을 생각해보고 이 지식을 웹 사이트 디자인에 필요한 초기 플랫폼으로 역할을 할 수 있게 하고 작동개발에 필요한 기준점으로 삼는다.

CSS의 형식

CSS 스타일 요소의 구조는 다음과 같이 간단하다.

html-tag-name {
	css-property-key-1: css-value-1;
	css-property-key-2: css-value-2;
}

여기서 html-tag-name은 HTML 코드에서 찾을 수 있는 태그(<a>, <div>, <li> 또는 <label>)이다. HTML 태그 대신 여기에 표시된 것과 같이 CSS 코드에서 앞에 해시 기호(#)가 표시되는 ID 참조가 오거나

#id-of-html-tag {
	…
}

앞에 점이나 마침표(.)가 표시되는 클래스 참조가 올 수 있다. CSS 코드의 기호는 다음과 같다.

.class-of-html-tag {
	…
}

CSS에서 이 부분(html-tag-name, id-of-html-tag 또는 class-of-html-tag)은 단순한 선택자로 알려져 있으며 아래와 같이 중간에 공백을 사용하여 중첩함으로써 HTML 세분화를 증대할 수 있다.

outer-html-tag-name inner-html-tag-name { … }

또는 한 가지 디자인 요소를 다수의 선택자에게 적용하기 위한 목록으로 사용할 수 있다.

1st-html-tag-name, 2nd-html-tag-name { … }

그렇지만 위에 있는 코드는 CSS의 정규 구문을 이해하기에는 너무 추상적이므로 이 기사의 나머지 부분에서는 CSS의 단순성과, 잠재력 및 유연성이 강조된 더 구체적이고 유용한 예제를 집중적으로 다룬다.

위로

기본 스타일

사이트를 디자인할 때 가장 먼저 해야 할 작업 중 하나는 기본 스타일을 설정하는 것이다. 이렇게 하려면 목록 1에서와 같이 <body> 태그의 스타일을 지정해야 한다.

목록 1. body 태그용 CSS 기본 스타일

	
body{
background-color: #EEEEEE;
color: #000000;
margin: 0;
padding: 0;
text-align: left;
font-size: 100%;
  	font-family: sans-serif;
}

이 마크업은 배경색(background-color)을 유백색, 글꼴 색상(color)을 검정색으로 지정한다. 또한, 컨텐츠의 모든 모서리가 브라우저 창 프레임의 모서리와 일치하도록 하며(margin 및 padding) 텍스트 컨텐츠를 왼쪽에 정렬한다(text-align). 마지막으로 이 스타일은 글꼴의 크기를 브라우저의 기본값으로(font-size), 글꼴을 굴림체(모서리 주변에 작은 삐침이 없는 글꼴)로 설정한다(font-family).

물론 이러한 것은 단순한 설정이다. 일반적으로 다음과 같은 지침을 적용할 수 있다.

색을 지정하는 위치에는 16진 RGB(Red-Green-Blue) 값을 사용한다.
크기를 지정하는 위치에는 픽셀(숫자 뒤에 px를 표시)이나 em(숫자 뒤에 em을 표시), 즉 지정된 숫자를 곱한 글꼴의 크기 또는 백분율(숫자 뒤에 %를 표시)을 사용한다.
텍스트는 왼쪽, 오른쪽 또는 가운데로 정렬할 수 있다. Float는 왼쪽 또는 오른쪽으로 지정할 수 있다. 세로 정렬은 맨 위, 중간 또는 맨 아래가 된다.
글꼴은 특정 글꼴이나 글꼴군(serif, sans-serif 및 monospace) 또는 다운로드 가능한 글꼴이다.

웹 사이트 디자인을 결정할 때 유동 레이아웃을 사용할 것인지 아니면 고정 레이아웃을 사용할 것인지를 결정하는 일이 가장 중요하다. 고정 레이아웃에서는 요소의 높이와 너비를 지정하며 그 값은 웹 사이트를 보는 브라우저나 운영 체제와 관계없이 동일하다. 대부분 픽셀을 사용하여 이러한 요소를 지정한다. 유동 레이아웃에서는 요소의 높이와 너비가 유동적이고 브라우저 창과 운영 체제 및 사용자 환경 설정에 따라 확장되거나 축소된다. 대부분 백분율과 ems를 사용하여 이러한 요소를 지정한다. 유동 레이아웃과 고정 레이아웃에는 각기 장단점이 있으며 선택하는 레이아웃은 컨텐츠 유형, 컨텐츠 양 및 웹 사이트를 수신하는 대상에 따라 다르다.

위로

(X)HTML에 CSS 적용

CSS를 적용하려면 CSS를 찾을 위치를 브라우저에게 알려주어야 한다. 이는 (X)HTML에서 CSS를 참조하는 경우에만 해당된다. 두 가지 방법, 즉 "빠르지만 지저분한" <style> 태그를 사용하거나 드러나지 않는 "빠르고 깔끔한" <link> 태그를 사용하여 CSS를 참조할 수 있다.

빠르지만 지저분한 style 태그

이 방법은 웹 페이지에 적용된 스타일을 확인할 수 있는 가장 빠른 방법이지만 웹 페이지에 비HTML 코드가 많이 사용된다. 그러나 서버측 언어를 사용하여 헤더를 삽입하지 않는 한, 이렇게 되는 페이지는 스타일이 적용되는 웹 페이지 하나뿐이며, 이 스타일을 복사하여 각 페이지에 붙여 넣으면 페이지의 크기(페이지의 높이와 너비가 아니라 용량)가 증가한다. 따라서 각 페이지를 로드하는 데 걸리는 시간이 증가하여 사용자는 대기하게 된다. 데이터가 초고속으로 전송되는 인터넷 시대에 살고 있다고 하더라도 시간은 사람들이 생각하는 것보다 사용자에게 매우 중요하다.

그러면 어떻게 해야 할까? 매우 간단하다. 다음 마크업을 HTML 페이지에 추가하면 된다. <head> tag:

<style>
	/** Your CSS goes here **/
</style>

빠르고 깔끔하며 드러나지 않는 CSS 링크

이 방법은 스타일을 더욱 깔끔하게 적용할 수 있는 방법이다. 외부 파일에 CSS가 있으면 다른 페이지에 있는 CSS에 링크할 수 있기 때문에 HTML이 깔끔해지고 페이지의 크기(페이지의 높이와 너비가 아니라 용량)가 더 작아진다. 이 방법을 사용하는 과정은 더 단순하다. 다음 코드를 HTML <head> 태그 섹션에 추가하면 된다.

<link href="http://www.example.com/styles/style.css" media="screen" 
        rel="stylesheet" type="text/css" />

여기서 style.css는 내부에 CSS 코드가 있는 평문 파일이다. 필자와 같이 웹 사이트의 공용 html 폴더의 기본 구조를 다음과 같이 사용하는 것이 좋다.

/. public html 폴더, HTML 파일이나 서버측 스크립트(예: PHP)가 들어 있음
/index.html(PHP 개발용 index.php), 홈 및 시작 페이지용
/styles/ 다양한 CSS 파일을 저장할 디렉토리
/scripts/ 다양한 Javascript 파일과 라이브러리를 저장할 디렉토리

이러한 구조를 사용하면 모든 파일을 깔끔하게 정리할 수 있으며 동시에 모든 파일을 분리된 상태로 유지하면서 참조할 수 있다.

위로

스타일 지정 지침

이 섹션에서는 브라우저에서 CSS3을 지원하지 않을 때, 즉 브라우저에서 이 버전을 무시하고 기본값으로 되돌리는 경우에 CSS 버전 3(CSS3)을 적용할 때 발생하는 문제점을 자세하게 다룬다. 또한, 이 섹션에서는 특정 브라우저에 맞는 CSS3 스타일 구현((-moz, -webkit, 등으로 시작)을 간략하게 설명한다.

간단한 <div> 태그

(X)HTML에는 오히려 간단한 <div> 태그가 있으며 이 태그는 본래 웹 페이지를 의미 있는 영역으로 분할하기 위해 사용된다. 이러한 영역은 본질적으로 컨텐츠를 둘러싸고 있는 하나의 상자이므로 디자인 면에서 보면 이렇게 하는 것이 좋다.

CSS 2.1의 표준 <div> 효과

CSS에서는 언제나 <div> 스타일 지정이 지원되었다. 이러한 요소 중에는 다음과 같은 경계 조정 태그가 있다.

border: size type color

이 내용은 다음과 같다.

size는 숫자 값이다.
type은 solid, dashed, dotted, double 또는 몇 가지 3D 스타일 경계가 된다.
color는 일반적으로 RGB 16진 값이다.

예를 들면, 너비가 1픽셀인 검은색 단색 선은 border: 1px solid #000000;이 된다.

body 태그에서와 마찬가지로 표준 배경색과 텍스트의 글꼴 및 색상을 변경할 수도 있다. 기본 스타일에서 했던 것과 같은 방식으로 이러한 것들을 변경할 수 있다.

CSS3에서 강화된 <div> 효과

CSS2.1에는 없지만, 디자인 면에서 가장 필요한 기능 중 하나는 경계 모서리를 둥글게 하는 기능이었다. 이 때문에 과거에는 많은 디자이너가 이미지 기반의 경계를 사용하거나 CSS와 Javascript가 결합된 몇 가지 지저분한 기술을 사용해야 했다. 다행히도 CSS3에는 border-radius 특성(예: border-radius: 10px;)이 도입되어 더 이상 이러한 문제가 발생하지 않는다.

일부 브라우저에서 이 특성이 적용되도록 하려면 다음과 같이 마크업을 삽입해야 한다.

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

이 예제와 같이 하면 이전의 Mozilla 기반(예: Mozilla Firefox) 및 Webkit 기반(예: Apple Safari) 브라우저에서 마크업이 작동하게 된다. 원하면 위에 있는 세 가지 특성을 서로 다른 값을 설정할 수 있으며 이렇게 하면 Firefox와 Google Chrome이 서로 다른 스타일로 표시된다.

CSS3에는 <div>에서 새도우를 생성하는 기능도 있다. 새도우를 생성하려면 다음 세 가지 특성을 사용한다. (여기에서도 다양한 브라우저를 처리한다.)

-webkit-box-shadow: 8px 8px 6px #AAAAAA;
-moz-box-shadow: 8px 8px 6px #AAAAAA;
box-shadow: 8px 8px 6px #AAAAAA;

여기서 첫 번째 특성은 수평 새도우이고, 두 번째는 수직 새도우이며 세 번째는 블러의 양이다. 네 번째 특성은 새도우의 색상이다. 블러와 새도우 사이에 다른 특성, 즉 새도우의 범위와 관련된 또 다른 값(크기를 기반으로 한)을 삽입할 수도 있지만, 이러한 특성은 널리 사용되지 않는다.

(X)HTML의 또 다른 일반적인 요소는 목록이다. 목록은 정렬되지 않은 목록(<ul>)과 정렬된 목록(<ol>) 이렇게 두 가지가 있다. 이러한 목록은 수행 단계와 같은 숫자 목록이 있는 웹 페이지와 조리 재료와 같은 비숫자 목록이 있는 웹 페이지를 제공하는 데 유용하다. 사이트 레이아웃 면에서 보면 목록은 사이트 탐색 구조를 개발하는 데 중요한 경우가 많기 때문에 특히 스타일을 맞추는 데 유용하다.

정렬되었건, 정렬되지 않았건 (X)HTML 목록에는 기본적으로 목록 마커라고 하는 것이 있다. 비공식적인 언어로는 "글머리 기호"라고 한다. CSS2.1에는 list-style-type 특성을 사용해서 설정하는 여러 가지 목록 마커가 있다. 정렬되지 않은 목록 마커의 일반적인 값은 none, disc, circle 및 square이다.

정렬된 목록 마커의 값은 표현되는 숫자의 형식에 따라 달라진다. 가장 일반적으로 사용되는 옵션은 decimal, lower-roman 및 lower-greek이다.

이 기사를 작성할 때는 목록을 기반으로 하는 새로운 CSS3 특성과 속성이 당시에 사용되던 웹 브라우저에서 많이 지원되지 않았다. 만약 그렇지 않았으면 이 기사에서 멋지고 새로운 list-style-type 속성을 예를 들어 설명했을 것이다. 그 대신 더 폭넓게 지원되는 또 다른 CSS3 특성(text-shadow)을 살펴보도록 한다.

앞서 정의한 box-shadow 특성과 달리 text-shadow 특성은 새도우를 제공한다. 그러나 box-shadow와 달리 text-shadow는 개별 문자에 새도우를 적용한다. 예를 들어, 이 특성을 목록 항목에 적용할 경우에는 다음 마크업을 사용할 수 있다.

li {
  text-shadow: 2px 2px 2px #AA00FF;
}

예를 들어, (X)HTML ID가 nav인 정렬되지 않은 목록을 탐색줄로 하는 경우에는 다음과 같이 코드를 작성할 수 있다.

ul#nav li:hover {
  text-shadow: 2px 2px 2px #AA00FF;
}

이 코드는 정렬되지 않은 목록 #nav 내에 있는 목록 요소 위로 마우스를 이동하는 경우에 text-shadow 특성을 적용한다.

링크

과거에 CSS3 표준 개발자들은 클릭하지 않은 링크, 방문한 링크, 활성 링크 및 마우스 오버 링크를 구분하는 것이 좋다고 생각했다. (X)HTML에서는 이러한 링크가 모두 동일한 태그(즉, <a> 태그)로 처리되지만, 브라우저의 상태는 각각 다르다. 다행히도 많은 디자이너가 이러한 구분을 무시하며 일반 링크와 마우스 오버 링크에 스타일을 적용하는 것이 일반화되었다.

일반 링크에 특정 스타일을 적용하는 작업은 거의 필수적이므로 링크 유형(클릭하지 않은 링크, 방문한 링크, 활성 링크 등)과 관계없이 링크를 설정하자. 목록 2에는 이러한 애플리케이션 예제가 있다.

목록 2. CSS 링크 데코레이션 예제

	
a, a:link, a:active, a:visited {
  color: #000000;
  text-decoration: none;
  font-weight: bold;
  background-color: #EEEEEE;
}
a:hover {
  text-decoration: underline;
  background-color: #FFFFAA;
}

이 마크업은 일반 링크의 글꼴 색상을 검정색으로 지정하고, 기본 밑줄을 취소하고, 글꼴을 굵은체로 지정하고, 배경색을 유백색으로 설정한다. 마우스가 링크 위로 이동한 상태에서는 밑줄을 다시 적용하고 배경색을 더 밝은 노란색으로 새로 설정한다. 이 마크업을 브라우저에서 테스트해 보면 링크 위로 마우스를 이동할 때 배경색이 밝은 회색에서 노란색으로 변하고 링크 밖으로 이동하면 노란색에서 밝은 회색으로 변한다는 것을 알 수 있다. 앞서 살펴본 바와 같이 a:hover에 텍스트 새도우를 적용할 수 있다.

개발자들이 CSS3의 개념을 정립하고 있었을 때, 그들은 특정 <a> 태그 관련 스타일을 배제하고 일반적인 것에 더 집중했다. 따라서 이 기사에서는 예를 들면, 탐색에서 <li> 태그에 사용할 수 있는 transform:rotate는 설명하지 않는다. 그 대신 이 기사에서 이미 살펴본 몇 가지를 결합하여 목록 3과 같은 것을 작성할 수 있다.

목록 3. 일부 CSS3 특성을 사용하여 기능을 개선한 CSS 탐색 예제

	
a, a:link, a:active, a:visited {
  color: #000000;
  text-decoration: none;
  font-weight: bold;
  background-color: #EEEEEE;
}
li {
  text-align: center;
  list-style-type: none;
  width: 50px;
  padding: 10px;
  margin: 10px;
  background-color:#EEEEEE;
  border: 1px solid #000000;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -moz-transform:rotate(-20deg);
  -webkit-transform:rotate(-20deg);
  transform:rotate(-20deg);
}
li:hover {
  text-decoration: underline;
  background-color: #FFFFAA;
}

위로

테이블을 사용하지 않고 열 생성

일반적으로 말해서 테이블은 레이아웃 기술로는 좋지 않다. 테이블을 사용하여 웹 페이지를 레이아웃하면 데이터의 논리적 흐름이 방해를 받기 때문이다. 이 기사를 시작할 때 필자는 CSS가 (X)HTML 위에 있는 일종의 계층이라고 말했으며 실제로 (X)HTML은 일관된 방식으로 표현되는 데이터라고 할 수 있다. 가장 좋은 디자인 방식은 어떤 것이든 디자인이나 스타일을 사용하지 않고 데이터를 (X)HTML로 표현하는 것이다. 그러나 디자인이나 스타일이 일관된 것 같으면 CSS 스타일시트를 적용할 수 있다. 특정 디자인이 작동하도록 실제로 (X)HTML을 편집해야 하는 경우에는 CSS를 사용하지 않은 상태에서 여전히 디자인이 일관적인지 확인해야 한다.

이는 두 가지 이유 때문에 중요하다. 첫 번째 이유는 이렇게 하면 고유한 기본 스타일시트 설정이나 소프트웨어를 갖고 있어서 특별한 시각적 요구사항을 만족시켜야 하는 개발자가 이용할 수 있기 때문이다. 두 번째는 시스템이 웹 사이트를 읽을 수 있기 때문이다. 검색 엔진과 기타 소프트웨어는 웹 사이트의 코드를 읽고 추적하여 웹 사이트를 색인화할 수 있어야 한다.

그러면 테이블을 사용하지 않고 어떻게 열을 생성할 수 있을까? 간단하다. 목록 4에서와 같이 <div> 상자를 사용하면 된다.

목록 4. div를 사용하여 열을 생성하는 (X)HTML 예제

	
<div id="left" class="equal-column">
</div>
<div id="right" class="equal-column">
</div>
<div class="something-below">
</div>

그러면 CSS 내에서 다양한 디자인 특성을 설정할 수 있다. 목록 5에는 한 가지 예제가 있다.

목록 5. div 열을 생성하는 CSS 예제

	
div.equal-column {
  width: 45%;
  height:100%:
}
div#left {
 float: left;
}
div#right {
 float: right;
}
div.something-below {
 width: 100%;
 clear: both;
}

이 마크업은 두 열의 너비를 45%로 설정한 다음, 왼쪽 열을 왼쪽에 오른쪽 열을 오른쪽에 고정한다. 마지막으로 something-below 클래스가 있는 또 다른 <div> 열이 있다. 이 div 열은 위에 있는 두 열 아래 화면을 가로질러 간다. 이는 화면에 열 두 개를 빠르고 쉽게 표시할 수 있는 유용한 기술이다.

CSS3에는 아직 독창적인 기술이 더 있는데, 그것은 텍스트 형식의 열이다. 다시 말해서 다음과 같이 column-count 특성을 숫자로 설정하면 단락이 자동으로 두 개로 분리된다.

div#textual-columns {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

이 마크업은 텍스트 형식의 열 두 개가 표시되도록 textual-columns ID를 사용하여 <div>를 설정한다. 그러나 이렇게 하면 각 열의 높이가 같아지고 신문이나 잡지에서 볼 수 있는 컬럼과 비교했을 때, 예상과는 약간 다르다는 것을 알 수 있다.

위로

글꼴 타이포그래피

세 가지 일반적인 글꼴군(serif, sans-serif 및 monospace)은 CSS2.1에서 정의되었다. 이러한 글꼴은 언제나 모든 시스템에서 작동한다. 따라서 이러한 글꼴이 정확히 동일하게 표시될 필요는 없지만 일반적으로 기본 글꼴에 문제가 생길 경우에는 적어도 백업 글꼴로 작동해야 한다. 예를 들면, body 태그의 CSS 선언에서 다음과 같은 코드를 사용할 수 있다.

body {
  font-family: Univers, sans-serif;
}

여기에서는 Univers 글꼴을 선택했으며 사용자의 컴퓨터에서 Univers 글꼴을 사용하지 않는 경우에는 sans-serif가 기본값으로 설정된다.

CSS3에서는 @font-face 요소를 도입하여 이 기능을 약간 강화했으며, 이 요소는 웹 전체, 특히 해당 웹 사이트로 글꼴을 전달하는 매우 복잡한 메커니즘이다. 이 기술은 멋진 글꼴을 사용하고 싶을 때 매우 유용하지만 이러한 고급 주제는 타이포그래피 전문가를 위해 남겨두기로 하겠다. 그러나 이러한 글꼴 페이스 스타일은 Google Font API 및 Typekit과 같은 써드파티 제공자에 의해 글꼴 다운로드 형태로 더 단순하게 개발되었다.

글꼴 다운로드

Google Font API 및 Typekit은 시스템 전체에서 멋진 글꼴을 다운로드할 수 있는 자체 시스템을 제공한다. 이러한 기술에서는 (X)HTML, Javascript 및 CSS3가 복합적으로 작동된다. 따라서 이러한 기술은 아마도 최신 브라우저에서만 작동할 것이다.

이제 액세스하기 쉽고 무료로 사용할 수 있는 Google Font API를 집중적으로 살펴보자. 이 기능을 작동하게 하려면 먼저, Google 글꼴 디렉토리에 있는 Architects Daughter 글꼴을 사용한다는 점을 표시하는 행 하나를 (X)HTML 헤드 영역에 추가한다.

<link href='http://fonts.googleapis.com/css?family=Architects+Daughter' 
        rel='stylesheet' type='text/css'>

그런 다음에는 다음과 같이 CSS를 사용하여 스타일을 적용한다.

body {
  font-family: 'Architects Daughter', serif;
}

그러면 사이트에서 Architects Daughter Google 글꼴을 사용하게 된다. 그러나 "너무 멋진" 글꼴을 사이트 전체에서 사용하는 것은 좋지 않다. 언제나 사이트를 깔끔하고 일관되고 명확하게 유지해야 한다.

위로

결론

CSS2.1과 CSS3는 책에서 다룰만한 중요한 주제이다. 이 기사에서는 스타일시트를 제대로 작성하는 방법을 피상적으로 살펴보았으므로 독자가 웹에서 CSS 참고자료를 찾고 있는 경우에는 이 기사를 바탕으로 지식을 넓혀갈 수 있을 것이다.

(X)HTML과 CSS를 서로 독립적으로, 드러나지 않게 사용하여 표준 호환성, 접근성 및 검색 엔진 최적화 가능성을 극대화할 수 있다. CSS는 XHTML 및 HTML과 마찬가지로 우수한 기술이지만 반드시 표준화된 방식으로 사용해야 한다. 이러한 표준은 웹 디자인에 필요한 기본 요소가 될 수 있지만, 디자인 자체는 아니다. 우수한 디자인은 실용적이고 완벽해야 한다.

참고자료

교육

CSS3의 새로운 기능을 자세히 배우자.
Multi-column Layout module을 참조하자.
"Retrofit your Web pages for wireless compatibility"(developerWorks, 2005년 11월): XHTML과 CSS를 함께 사용하여 모바일 브라우징 호환성을 달성하는 데 필요한 우수한 기사이다.
"Create modern Web sites using HTML5 and CSS3"(developerWorks, 2010년 3월): 최신 디자인에서 HTML5 및 CSS3를 어떻게 사용하는지 설명한다. 이 기사에서 제공하는 기본적인 개념보다 더 고급 개념을 제공하기 때문에(특히 새 CSS3 선택기 영역), Joe가 작성한 기사의 CSS3 섹션은 특히 중요하다.
"Achieve cross-browser functionality with HTML5 and CSS3"(developerWorks, 2011년 2월): HTML5의 디자인 세부사항을 제공한다. HTML5는 HTML5 언어와 Javascript 및 CSS로 구성된 일종의 패키지이다. 따라서 HTML5는 디자인에 더 적합하며 데이터 중심의 웹 애플리케이션을 빌드하는 경우에는 문제점이 생길 수도 있다.
웹 개발 영역에서는 다양한 웹 기반 솔루션을 다루는 기사를 전문적으로 게시한다.
developerWorks의 기술 행사 및 웹 캐스트에서 최신 정보를 얻을 수 있다.
developerWorks on-demand demos: 입문자를 위한 제품 설치 및 설정 과정에서 숙련된 개발자를 위한 고급 기능의 활용에 이르기까지 다양한 데모를 제공한다.
Twitter의 developerWorks 페이지를 팔로우하자.