CSS 완벽 가이드

CSS 완벽 가이드

iv

• 목 차 •

이 책에서 사용된 표기 ........................................................ xviii

속성 규칙 ........................................................................... xix

예제소스 사용하기 ............................................................... xxi

01 CSS와 문서 ........................................................ 1

기품을 잃고 타락한 웹 ............................................................ 1

엉망진창이 된 웹 .......................................................... 2

구원을 위해 등장한 CSS ......................................................... 4

풍부한 스타일 효과 ....................................................... 4

사용의 편리함 .............................................................. 5

여러 페이지에 스타일 적용하기 ....................................... 7

캐스케이딩 .................................................................. 7

작은 파일 크기 ............................................................. 8

미래를 위한 대비 .......................................................... 9

요소 ................................................................................... 10

대체되는 요소와 대체되지 않는 요소 .............................. 10

요소의 표현 방식 ......................................................... 11

CSS와 XHTML 연결하기 ....................................................... 14

link 태그 .................................................................... 16

style 요소 ................................................................... 22

@import 명령 ............................................................. 22

실제 스타일 규칙 ......................................................... 24

CSS 주석 ................................................................... 25

인라인 스타일 ............................................................. 26

요약 ................................................................................... 27

v

02 선택자 .............................................................29

기본 규칙들 ......................................................................... 29

규칙의 구조 ................................................................ 30

요소 선택자 ................................................................ 31

선언과 키워드 ............................................................. 32

그룹화 ................................................................................ 34

선택자 그룹화 ............................................................. 34

선언 그룹화 ................................................................ 36

전체 그룹화 ................................................................ 38

class 선택자와 id 선택자 ........................................................ 40

class 선택자 ................................................................ 40

다중 class ................................................................... 43

id 선택자 ................................................................... 44

class와 id 선택자 중 하나를 선택하기 .............................. 45

속성 선택자 ......................................................................... 47

단순 속성으로 선택하기 ................................................ 47

정확한 속성값으로 선택하기 .......................................... 49

부분 속성값으로 선택하기 ............................................. 51

특정 속성 선택자 ......................................................... 53

문서 구조 이용하기 ............................................................... 54

부모-자식 관계 이해하기 .............................................. 54

자손 선택자 ................................................................ 56

자식 요소 선택하기 ...................................................... 59

인접 형제 요소 선택하기 ............................................... 60

가상 class와 가상 요소 ........................................................... 62

가상 class 선택자 ......................................................... 63

가상 요소 선택자 ......................................................... 71

요약 ................................................................................... 75

vi

03 문서구조와 캐스케이드 .......................................77

구체성 ................................................................................ 77

선언과 구체성 ............................................................. 79

전체 선택자의 구체성 ................................................... 81

id 선택자와 속성 선택자의 구체성 .................................. 82

인라인 스타일의 구체성 ................................................ 82

important 선언 ............................................................ 83

상속 ................................................................................... 84

캐스케이드 .......................................................................... 88

중요도와 출처에 따른 분류 ............................................ 89

구체성 값에 따른 분류 .................................................. 91

순서에 따른 분류 ......................................................... 91

CSS 이외의 표현 정보 .................................................. 94

요약 ................................................................................... 94

04 값과 단위 .........................................................95

숫자 ................................................................................... 95

퍼센트 ................................................................................ 95

색상 ................................................................................... 96

이름 있는 색상 ............................................................ 96

RGB로 표현되는 색상 .................................................. 97

길이 단위 .......................................................................... 103

절대 길이 단위 .......................................................... 103

상대 길이 단위 .......................................................... 106

URL ................................................................................ 111

키워드 ..................................................................... 112

CSS2 단위 ......................................................................... 114

요약 ................................................................................. 115

vii

05 폰트 .............................................................. 117

폰트 패밀리 ....................................................................... 118

범용 폰트 패밀리의 사용 ............................................. 120

폰트 패밀리 지정하기 ................................................. 121

폰트 웨이트 ....................................................................... 124

폰트 웨이트의 원리 .................................................... 125

더 두껍게 만들기 ....................................................... 128

두께 줄이기 .............................................................. 131

폰트 사이즈 ....................................................................... 132

절대크기 .................................................................. 133

상대크기 .................................................................. 135

퍼센트와 사이즈 ........................................................ 136

폰트 사이즈와 상속 .................................................... 137

길이 단위 사용 .......................................................... 139

스타일과 변형들 ................................................................. 141

폰트 스타일 .............................................................. 141

폰트 변형 ................................................................. 143

늘이기와 맞추기 ................................................................. 145

폰트 속성 .......................................................................... 148

line-height 추가 ........................................................ 150

단축 속성 사용 .......................................................... 151

시스템 폰트의 사용 .................................................... 152

폰트 매칭 .......................................................................... 153

font-face ................................................................. 155

요약 ................................................................................. 157

06 텍스트 속성 .................................................... 159

들여쓰기와 수평 정렬 .......................................................... 159

텍스트 들여쓰기 ........................................................ 159

수평 정렬 ................................................................. 163

viii

수직 정렬 .......................................................................... 166

행 높이 .................................................................... 166

텍스트 수직 정렬 ....................................................... 170

어간과 자간 ....................................................................... 177

어간 ........................................................................ 177

자간 ........................................................................ 178

여백과 정렬 .............................................................. 180

텍스트 변환하기 ................................................................. 180

텍스트 꾸미기 .................................................................... 183

이상한 장식 효과 ....................................................... 185

텍스트 그림자 설정 ............................................................. 188

화이트스페이스 다루기 ............................................... 189

텍스트 방향 .............................................................. 192

요약 ................................................................................. 194

07 기본적인 비주얼 서식 ....................................... 195

기본 박스 .......................................................................... 195

포함하는 블록 ........................................................... 196

되짚어 보기 .............................................................. 197

블록 레벨 요소 ................................................................... 198

가로 방향 서식 .......................................................... 199

수직 서식 ................................................................. 210

리스트 아이템 ........................................................... 220

인라인 요소 ....................................................................... 221

라인 레이아웃 ........................................................... 222

기본 용어와 개념 ................................................................ 224

인라인 서식 .............................................................. 226

대체되지 않는 인라인 요소 .......................................... 227

대체되는 인라인 요소 ................................................. 240

요소의 display 전환하기 ....................................................... 245

ix

방식 바꾸기 .............................................................. 246

인라인 블록 요소 ....................................................... 248

run-in 요소 .............................................................. 251

요약 ................................................................................. 254

08 패딩, 보더, 마진 .............................................. 255

기본 요소 박스 ................................................................... 255

너비와 높이 .............................................................. 256

마진 vs. 패딩 ............................................................ 259

마진 ................................................................................. 259

길이 값과 마진 .......................................................... 261

퍼센트와 마진 ........................................................... 263

반복되는 값 .............................................................. 266

한쪽 방향 마진 속성 ................................................... 267

음수 값의 사용과 합쳐진 마진 ...................................... 269

마진과 인라인 요소 .................................................... 271

보더 ................................................................................. 274

보더와 배경 .............................................................. 275

보더의 스타일 ........................................................... 275

보더 너비 ................................................................. 280

보더 색상 ................................................................. 283

보더의 단축 속성 ....................................................... 286

전역 보더 ................................................................. 288

보더와 인라인 요소 .................................................... 290

패딩 ................................................................................. 291

퍼센트 값과 패딩 ....................................................... 295

한쪽 방향 패딩 .......................................................... 296

패딩과 인라인 요소 .................................................... 296

패딩과 대체되는 요소 ................................................. 297

요약 ................................................................................. 298

x

09 색상과 배경 .................................................... 299

색상 ................................................................................. 299

전경색 .............................................................................. 301

속성의 대체 .............................................................. 303

보더 다루기 .............................................................. 305

form 요소의 색상 지정 ............................................... 306

색상의 상속 .............................................................. 307

배경 ................................................................................. 308

배경색 ..................................................................... 308

배경 이미지 .............................................................. 312

반복할 방향 정하기 .................................................... 317

배경 위치지정 ........................................................... 321

방향을 가진 반복 ....................................................... 332

배경 고정하기 ........................................................... 334

단축 코드 ................................................................. 339

요약 ................................................................................. 342

10 플로트와 위치지정하기 ..................................... 343

플로트 .............................................................................. 343

플로트된 요소 ........................................................... 345

플로트: 그 세부 사항들 ............................................... 347

적용된 모습 .............................................................. 354

플로트, 콘텐츠 그리고 겹치기 ...................................... 359

클리어 ..................................................................... 360

위치지정하기 ..................................................................... 364

기본 개념 ................................................................. 365

너비와 높이 .............................................................. 370

오버플로우와 클립 ..................................................... 374

요소 보여주기 ........................................................... 380

절대 위치지정 ........................................................... 382

xi

위치를 고정적으로 지정하기 ........................................ 402

위치를 상대적으로 지정하기 ........................................ 405

요약 ................................................................................. 407

11 테이블 레이아웃 .............................................. 409

테이블의 구성 .................................................................... 409

테이블을 시각적으로 배열하기 ..................................... 410

테이블과 관련된 디스플레이 값 .................................... 412

임의로 삽입된 테이블 오브젝트 .................................... 416

테이블의 계층 구조 .................................................... 421

캡션 ........................................................................ 423

테이블 셀의 보더 ................................................................ 425

분리된 셀의 보더 ....................................................... 425

겹쳐진 셀 보더 .......................................................... 428

테이블에 크기 지정하기 ....................................................... 433

너비 ........................................................................ 434

높이 ........................................................................ 440

정렬 ........................................................................ 441

요약 ................................................................................. 444

12 리스트와 생성된 콘텐츠 .................................... 445

리스트 .............................................................................. 445

여러 가지 타입의 리스트들 .......................................... 446

리스트 아이템 이미지 ................................................. 449

리스트 마커의 위치 .................................................... 451

리스트 스타일의 단축 속성 .......................................... 452

리스트 레이아웃 ........................................................ 453

생성된 콘텐츠 .................................................................... 455

생성된 콘텐츠 삽입하기 .............................................. 456

콘텐츠 정의하기 ........................................................ 459

xii

카운터 ..................................................................... 465

요약 ................................................................................. 473

13 사용자 인터페이스 스타일 ................................. 475

시스템 폰트와 색상 ............................................................. 475

시스템 폰트 .............................................................. 475

시스템 색상 .............................................................. 478

커서 ................................................................................. 481

커서 변경 ................................................................. 481

외곽선 .............................................................................. 486

외곽선 스타일 지정 .................................................... 488

외곽선 너비 .............................................................. 489

외곽선 색상 .............................................................. 489

단축 코드 속성 .......................................................... 491

요약 ................................................................................. 493

14 비화면 매체 .................................................... 495

다중 미디어를 위한 스타일시트 디자인하기 ............................. 496

페이지로 나누어진 미디어 .................................................... 497

인쇄물 스타일 ........................................................... 497

프로젝션 스타일 ........................................................ 512

청각을 위한 스타일 ............................................................. 516

말하기 ..................................................................... 517

볼륨 ........................................................................ 522

목소리 지정하기 ........................................................ 524

목소리 변화시키기 ..................................................... 525

멈춤과 청각적 신호 넣기 ............................................. 528

배경 소리 ................................................................. 531

음원 위치를 조절하기 ................................................. 533

요약 ................................................................................. 537

xiii

A 속성 참조 ....................................................... 539

시각 매체 .......................................................................... 539

테이블 .............................................................................. 569

페이지로 나뉘는 미디어 ....................................................... 571

CSS2.1에서 사라진 속성 ...................................................... 573

시각적인 스타일 ................................................................. 573

페이지로 나뉘는 미디어 ....................................................... 574

음성 스타일 ....................................................................... 575

B 선택자, 가상 클래스, 가상 요소 참조 ................... 582

선택자 .............................................................................. 582

가상 클래스와 가상 요소 ...................................................... 586

C HTML 4 스타일시트 예제 .................................. 591

xiv

옮 긴 이 글

이 책을 읽고 있는 사람이라면 최소한 ‘웹표준’이라는 용어가 생소하게 느껴지지는 않을 것이

며, 그 ‘웹표준’을 위해서 꼭 알아야 할 것 중에 하나로 CSS를 생각하고 있을 것이다. 이제 CSS

는 웹디자인에서 빼놓고 생각할 수 없는 핵심 기술이 되었으며, 그 힘은 점점 더 막강해져 가

고 있다.

CSS가 웹디자인의 체질을 바꾸어 가고 있다. 눈에 보이는 부분만 멋지게 만들던 웹디자인은

이제 구시대적인 방식으로 여겨지기 시작했다. CSS를 적극 활용하게 됨에 따라 틀에 박혀 있

던 디자인 레이아웃도 점점 더 다양하게 변화되어 가고 있고, 웹사이트의 성능도 크게 개선되

고, 접근성과 사용성 또한 높아지게 되었다.

인터넷 익스플로러 6을 비롯한 오래된 브라우저에서는 제대로 지원되지 않는 W3C의 스펙들

이 최근에 새롭게 나오고 있는 웹브라우저에서는 거의 완벽하게 지원하는 수준에 이르고 있

다. 따라서 이제는 더 이상 특정 브라우저를 위한 핵을 쓰게 되는 일은 점점 줄어들게 될 것이

다. 그렇게 되면 앞으로는 좀 더 효율적으로 마크업과 CSS를 사용하는 것이 작업의 커다란 부

분을 차지하게 될 것이다.

이러한 상황에서 CSS의 기본을 좀 더 탄탄하게 다지는 과정은 CSS를 능수능란하게 다루고 활

용하기 위해서는 꼭 필요하다고 본다. 이 책은 CSS를 쉽게 배우고자 하는 초보자들을 위한 책

일 뿐만 아니라, 어쩌면 실무에서 CSS를 사용하며, 어떻게 하면 좀 더 효율적으로 활용할 수

있을지 고민하는 실무 UI 개발자들에게는 더더욱 필요할 것이다.

오랜 기간 동안 용어의 통일과 내용 정리를 위해 함께 고생한 이준님, 연홍석님과 위키북스에

감사함을 전한다. 그리고 주말마다 나의 집중(!)을 위해 배려해준 ‘랑’에게도 고마움을 전한다.

남덕현

xv

웹이 세상에 얼굴을 비치기 시작한 지 이제 겨우 십여 년이 지났을 뿐인데 어느새 까마득하게

느껴진다. 그 이유는 아마도 웹이 우리 생활에서 이제는 없어서는 안 될 매체가 되어 있기 때

문일 것이다. 이제 웹이 없는 세상에서는 물건을 살 수도 없고 외식을 하러 나갈 수도 없으며

심지어는 친구를 사귈 수도 없는 세상이 되어가고 있다. 웹이라는 새로운 세상이 생기면서 우

리의 공간은 두 배로 넓어진 것이 아니라 수십만 또는 수백만 배로 넓어졌다. 아니 넓이라는

개념을 여기서 사용하는 것이 애초에 말이 되지 않을 것이다. 웹은 우리와 같이 섞여서 숨쉬는

생활의 일부가 되었다.

웹을 만드는 일은 이제 우리 사회에서 커다란 부분을 차지하게 되었다. 그래서 점점 더 경쟁이

치열해지고 그 덕분에 더욱 발전해가고 있다. 더욱 새로운 것을 찾는 요구가 늘어나고 이러한

요구에 맞추기 위해서 새로운 것을 만들어가는 기술도 끊임없이 발전하고 있다. 이렇게 발전

하는 기술 중에서 단연 눈에 띄는 것이 바로 마크업과 CSS이다.

CSS는 Cascading Style Sheets의 줄임말로 그대로 해석하자면 ‘스타일을 만드는 코드들을 단계

적으로 나열한 문서’를 말한다. CSS는 웹에서 내용을 담아두는 부분인 마크업 언어가 실제 표

시되는 방법을 기술하는 언어로, HTML과 XHTML에 주로 쓰이며 XML에서도 사용할 수 있

다. 몇 년 전에만 해도 CSS는 그 효용성의 한계와 사용자 에이전트들이 제대로 지원하지 않는

부분이 많아서 크게 주목받지 못했었다. 하지만 이제는 달라졌다. 웹 브라우저 회사들을 포함

한 온갖 사용자 에이전트 회사들이 앞다투어 표준화를 준수한다고 선전을 하고, 실제로도 상

당한 비중으로 표준화에 대한 중요성을 인식하고 있다.

이제 웹표준을 지키는 회사들이 많아지고 법률이 생겨나면서 CSS의 중요성은 더 늘어날 것이

다. 또, CSS를 얼마나 잘 사용하느냐에 따라서 웹의 가치에 대한 평가도 달라질 것이다. CSS는

CSS1과 CSS2를 지나서 CSS2.1이 나오고 이제 CSS3을 만들어가면서 지속적으로 발전하고 개

선될 것이다. 이렇게 끊임없이 발전하는 CSS는 우리가 모르는 수많은 기능들이 사용되어지기

를 기다리고 있지만 우리가 그 문서들을 제대로 열어보고 이해하기는 현실적으로 쉽지 않다.

CSS 완벽 가이드는 앞으로 CSS를 사용하면서 만들어야 하는 그림을 그리는 데 많은 도움을

줄 것이다. 우리가 원해왔던 기능이 어떻게 구현이 되었는지 앞으로 어떤 기능이 좀 더 생겨나

게 될지 그리고 우리가 지금까지 사용해왔던 기능들이 어떻게 만들어지고 왜 불편한 기능들이

개선되지 못하고 있는지를 이 책에서 알게 될 것이다.

이준

xvi

‘웹 표준’의 물결과 함께 CSS는 웹 제작자가 반드시 알아야 할 영역으로 부각되고 있지만 아직

도 정확한 정보보다는 경험적인 지식을 바탕으로 스타일시트를 작성하는 경우가 많다. 가장

큰 이유는 CSS 명세서의 까다로움이겠지만 근본적인 원리를 설명하는 전문 서적이 부족한 것

도 충분한 이유가 된다고 생각한다.

그런 면에서 이 책의 출간이 CSS에 대한 이해를 한 단계 높이는 계기가 될 것으로 기대한다.

최고의 CSS 전문가 중 한 명인 에릭 마이어가 까다로운 명세서를 풍부한 예와 함께 상세히 설

명하고 있기 때문이다. 담고 있는 내용이 만만치 않지만 차근차근 읽어가며 CSS의 세계로 빠

져들 수 있기를 바란다.

참 길고 힘든 시간이었지만 막상 출간된다니 가슴이 설렌다. 끝까지 믿고 격려해주신 위키북

스와 웹 표준화팀 동료들, 바쁜 와중에도 초안을 검토해주신 정찬명님. 무엇보다 함께 고생하

며 부족한 부분을 채워주신 남덕현, 이준, 정태영님께 고마움을 전한다.

연홍석

처음으로 CSS Zen garden과 meyerweb의 CSS/Edge를 봤을 때가 생각난다. 테이블 없이 CSS만

으로도 이런 화려한 페이지를 만들 수 있다는 점에 놀랐고, CSS 만으로도 이런 동적인 페이지

들을 만들 수 있다는 점에 다시 한 번 놀랐으며, 텍스트 브라우저로 접속하더라도 내용을 알

아보는데 전혀 문제가 되지 않는 점에 한 번 더 놀랐다.

세월이 흘러 meyerweb의 에릭마이어가 저술한 CSS 완벽 가이드를 번역할 기회를 얻게되어

너무나도 행복했다. 부분적으로만 알고 있던 CSS에 대해 더 깊이 있게 이해할 수 있게 되었고,

더 많은 것들을 더 간단하게 해결할 수 있게 되었다.

이런 기회를 주신 위키북스와 위키북스를 소개해주신 강민혜 씨에게 감사의 말을 드리고 싶다.

정태영

xvii

지 은 이 · 옮 긴 이 소 개

에릭 마이어 Eric A. Meyer

에릭 A. 마이어는 1993년부터 웹을 주제로 일해왔으며, HTML, CSS, 웹표준 분야에서 세계적

으로 잘 알려져 있다. 또, 아메리카 온라인AOL, 애플 컴퓨터, 웰스 파고 뱅크Wells Fargo Bank, 매크

로미디어 등의 회사를 클라이언트로 가지고 있는 Complex Spiral Consulting의 설립자이기도

하다.

남덕현

SK 커뮤니케이션즈 UI개발팀 표준화 파트에서 근무하고 있다. 싸이월드 통합에디터 UI개발과

IPTV 검색영역 UI개발 업무를 진행했으며, 최근에는 신규 네이트 메인 페이지와 씨름 중이다.

제프리 젤드만의 웹표준 가이드(위키북스, 2007) 감수를 맡았다.

이준

2000년 웹 세상에 입문하였고, 2004년부터 다음커뮤니케이션에서 UI개발을 담당하고 있다.

제프리 젤드만의 웹표준 가이드(위키북스, 2007)를 번역했다.

연홍석

웹의 가능성을 믿고 뒤늦게 UI개발자로서의 길을 걷게 되었다. http://blog.wystan.net 블로그

를 통해서 CSS 관련 정보를 공유하고 있으며, 현재 NHN 웹표준화팀에서 근무하고 있다.

정태영

웹표준 커뮤니티 standardmag.org의 운영진으로 활동 중이며, 현재 한양대학교 대학원에서 영

상 처리 분야를 연구하고 있다.

xviii

들 어 가 는 말

당신이 접근성을 향상시키면서, 효율적으로 정교한 스타일을 이용하여 웹 페이지를 만들고자

하는 웹디자이너이거나 제작자라면, 이 책은 당신에게 꼭 필요한 책이다. 먼저 이 책을 읽기

전에 HTML 4.0에 대한 기본적인 지식이 필요하다. 물론 좀 더 세부적인 사항을 알고 있다면

좋을 것이다. 그 외의 다른 사항들에 대한 지식이 있다면 더 많은 도움이 될 것이다.

이 책은 다양한 방법으로 초기의 내용이 개선된 CSS2와 CSS2.1(워킹 드레프트Working Draft, 2006

년 4월 11일 기준)에 대한 항목이 추가된 CSS 완벽 가이드CSS: The Definitive Guide의 3번째 에디션

이다. 이 책을 쓰면서, CSS3이 후보 권고안Candidate Recommendation의 상태에 이르렀지만, CSS3

셀렉터를 제외하고는 이번 에디션에서는 포함시키지 않기로 했다. 아직 CSS3의 적용이 완벽하

지 않고, 아직 구체화되지 않은 사항들도 있기 때문이다. 현재 지원되고 있는 CSS에 대한 심화

학습에 초점을 맞추어, 앞으로 나오게 될 에디션에서도 다룰 수 있는 여지를 남겨두는 것이 중

요하다는 생각이 들었기 때문이다.

이 책에서 사용된 표기

이 책에서는 다음과 같은 표기 방법이 사용되었다.

이탤릭

새로운 용어, URL, 변수, 사용자 지정 파일, 사용자 지정 디렉토리, 명령어, 파일 확장자,

파일명, 디렉토리 혹은 폴더명 그리고 UNCUniversal Naming Convetion 경로명.

고정폭 텍스트

출력 명령어, 코드 예제, 레지스트리 키, 단축 키보드

굵은 고정폭 텍스트

예제에서 사용자가 입력한 값

xix

이탤릭 고정폭 텍스트

예제와 레지스트리 키에 사용된 변수. 사용자가 변수로 사용한 값이나 (경로명이나 파일명

과 같은) 이탤릭 텍스트 안에 사용자가 지정한 요소

예를 들어, \Windows\username의 경로에서 변경되는 username.

Tip이 아이콘은 팁, 제안, 노트를 의미한다.

CauTion! 이 아이콘은 경고나 주의를 가리킨다.

속성 규칙

이 책 전체에 걸쳐 CSS 속성을 담고 있는 박스가 있다. 이것들은 CSS 명세서에 있는 실용적인

내용들을 축약하여 구문에 대한 설명이 잘 정리가 되어 있다.

전체적으로 각 속성들에 사용되는 값들이 아래와 같은 체계로 구성되어 있다.

값: [ <length> | thick | thin ]{1,4}

값: [ <family-name> , ]* <family-name>

값: <url>? <color> [ / <color> ]?

값: <url> || <color>

“ < ”와 “ > ” 사이에 들어가는 모든 단어는 값의 종류나 다른 속성들에 대한 참조 값이다.

예를 들면, font 속성은 실제로는 font-family 속성에 포함되어 수용될 것이다. 이것은

<font-family>에 의해 표시된다. 고정폭 글꼴로 표시되는 단어들은 인용표시 없이 문자 그대로

보여져야 하는 키워드들이다. 슬래시(/)와 콤마(,) 또한 문자 그대로 사용되어야 한다.

서로 연결되어 있는 몇몇 키워드들은 모두 주어진 순서대로 작성되어야 한다. 예를 들어, help

me는 정확한 순서대로 사용되어야 하는 키워드 속성이라는 의미이다.

만약 수직 바가 둘을 분리한다면(X | Y), 둘 중 하나가 선택된다. 두 개의 수직 바(X || Y)는 X,

Y 혹은 둘 다 순서에 상관없이 실행된다. 괄호 ([…])는 그룹핑을 하기 위한 것이다. 병렬로 배

xx

치하는 것은 두 개의 수직 바보다 우선하고, 두 개의 수직 바는 하나의 수직 바보다 우선한다.

따라서 “V W | X || Y Z”는 “[ V W ] | [ X || [ Y Z ]]”와 동일하다.

모든 단어나 괄호로 묶인 그룹은 다음 중 하나의 문법을 따르게 된다.

• 별표(*)는 앞에 오는 값이나 괄호로 묶인 그룹이 0 혹은 그 이상의 횟수만큼 반복된다는

것을 의미한다. 따라서 bucket*는 bucket라는 단어가 한 번도 실행되지 않거나 여러 번

사용될 수 있다는 의미이다. 사용될 수 있는 숫자에는 제한이 없다.

• 더하기(+) 표시는 앞에 오는 값이나 괄호로 묶인 그룹이 한 번 혹은 그 이상 반복된다는 것

을 의미한다. 따라서 mop+는 mop라는 단어가 최소 한 번 이상 사용되어야 한다는 것을

의미한다.

• 물음표(?)는 앞에 오는 값이나 괄호로 묶인 그룹이 선택적이라는 것을 의미한다. 예를 들

어, [pine tree]?는 pine tree라는 단어가 사용될 때 순서대로 정확하게 보여지더라도

사용되지 않을 수도 있다는 것을 의미한다.

• 대괄호 {M,N}로 묶인 것은 앞에 오는 값이나 괄호로 묶인 그룹이 최소 M, 최대 N만큼 반복

된다는 의미이다. 예를 들어, ha{1,3}은 ha라는 단어의 인스턴스로 1, 2, 3이 사용될 수 있

다는 의미이다.

몇 가지의 예제가 있다.

give // me // liberty

3개 중 적어도 하나 이상의 단어가 사용되고, 순서에 상관없이 사용될 수 있다. 예를 들어,

give liberty, give me, liberty me give, give me liberty 모두 사용될 수 있다.

[I | am]? the || walrus

I 혹은 am이라는 단어 중 하나가 사용될 것이고, 어느 한쪽이 사용되는 것은 선택사항이

다. 덧붙여, the 혹은 walrus 혹은 둘 다 순서에 상관없이 사용될 수 있다. 따라서, I the

walrus, am walrus the, am the, I walrus, walrus the 등의 조합이 가능하다.

koo+ka-choo

하나 이상의 koo의 인스턴트가 ka-choo뒤에 따라오게 된다. 따라서 koo koo ka-choo,

xxi

koo koo koo ka-choo, koo ka-choo 모두 유효하다. 비록 실행 시에 제한이 있겠지만,

잠재적으로 koo의 개수는 무한하다.

I really{1,4}? [love | hate] [Microsoft | Netscape | Opera | Safari]

이것은 다용도로 웹디지이너의 의견을 표현할 수 있다. 이 예제는 I love Netscape, I

really love Microsoft 와 비슷한 표현으로 풀이될 수 있다. 0개부터 4개의 really가

사용될 수 있다. 또한 예제에서는 love만 보여지고 있지만, love와 hate 둘 중 하나를 선택

해서 사용할 수도 있다.

[[Alpha || Baker || Cray],]{2,3} 그리고 Delphi

이것은 조금은 길고 복잡한 표현식이다. 결과로 올 수 있는 하나의 값은 Alpha, Cray,

Delphi가 될 것이다. 감싸고 있는 괄호 그룹 안에서의 위치 때문에 콤마가 사용된다.

예제소스 사용하기

여러분의 학습을 돕기 위한 예제 소스를 제공하고 있다. 대부분, 이 책의 예제를 여러분 자신

의 프로그램과 문서에서 사용할 수 있을 것이다. 예제 파일의 일부를 수정하는 것을 승인받기

위해 O’Reilly와 연락할 필요는 없다. 예를 들어, 이 책에 사용하는 예제 소스를 사용하는 데 승

인받을 필요는 없다. 예제 CD-ROM을 팔거나 공급하려면 O’Reilly부터의 승인이 필요하다. 책

에 언급되어 있는 질문에 답하고 예제 소스를 인용하는 것은 승인이 필요 없다. 책의 예제 소

스를 특정 제품의 문서에 추가하기 위해서는 승인이 필요하다.

표시해 준다면 고마운 일이지만, 귀속권이 필수는 아니다. 귀속권은 일반적으로 제목, 작가,

출판사, ISBN이 포함된다. 예를 들어, “Eric A. Meyer. Copyright 2007 O’Reilly Media, Inc.,

978-0-596-52733-4, CSS: The Definitive Guide, Third Edition”이 되는 것이

다.

위에서 주어진 권한이나 이외의 코드 사용에 대해서는 permissions@oreilly.

com로 연락 바란다.

xxii

SafariⓇ Enabled

여러분이 잘 보는 기술서적에서 SafariⓇ Enabled 아이콘을 본다면, 그것은 O’Reilly의 온라인

네트워크인 Safari 서재에서도 구입이 가능하다는 것을 의미한다.

Safari는 e-book보다 좋은 솔루션을 제공한다. 가상의 도서관으로 좀 더 쉽게 다양한 기술 서

적들을 검색할 수 있게 해주고, 예제 코드들을 복사해서 붙여 넣을 수 있으며, 책의 장chapter을

다운로드받을 수도 있고, 현재 정보에 대한 좀 더 정확한 답변을 쉽게 구할 수도 있다. http://

safari.oreilly.com을 방문해 보자.

감사의 글

독자들에게 이 책이 읽히기까지 많은 도움을 주신 여러분들에게 감사의 말씀을 전한다.

먼저, 오랜 시간 동안 고생하며 계속해서 책을 출간할 수 있는 기회를 준 오라일리O’Reilly의 모

든 분들께 감사드린다. 이번 에디션을 위해 마감일에 쫓기며 작업하던 나를 잘 참고 이해해준

타티아나 아판디Tatiana Apandi에게 깊은 고마움을 느낀다.

또한 이번 에디션의 기술적인 리뷰를 맡아주었던 데이비드 바론David Baron, 이안 킥슨Ian Kickson,

버트 보스Bert Bos, 해콘 리에Hakon Lie에게 고마움을 전하고 싶다. 두 번째 에디션의 리뷰는 탄텍

셀릭Tantek Celik과 이안 힉슨이 맡아주었다. 이번 세 번째 에디션의 기술적인 리뷰는 대럴 오스틴

Darrell Austin, 리자 달리Liza Daly, 나일 리Neil Lee의 손에 달려 있었다. 그들의 전문적이며 안목 있는

조언들이 약간은 난해하면서 혼란을 줄 수 있는 최근의 CSS의 새로운 내용들까지 수용할 수

있도록 나를 이끌어주었다. 그들 공동의 노력 없이는 좋은 결과를 얻을 수 없었을 것이다. 만

약 글의 내용 중에 잘못된 내용이 있다면 그것은 전적으로 나의 잘못이지 그들의 실수가 아니

다. 너무나 판에 박힌 소리라 할지도 모르겠지만, 정말 그렇다.

마찬가지로, 에러를 지적해주신 모든 분들에게 감사의 말을 전하고 싶다. 항상 메일에 대한 피

드백을 곧장 보내는 것은 아니지만, 여러분들의 질문과 고민들을 모두 읽고, 필요하면 수정사

항들을 만들기도 했다.

지속적인 피드백과 건설적인 비평은 지금보다 항상 좋은 책이 되도록 만들어 줄 것이다.

xxiii

책을 만들면서 개인적으로 고마움을 전할 몇몇의 사람들이 있다.

클리블랜드 라디오 FM 91.1의 직원에게 9년이라는 시간 동안 좋은 음악과 재미를 안겨준 것에

감사한다. 아마 언젠가 한 번쯤은 빅밴드를 데리고 그 방송에 출연을 할지도 모르겠다. 방송에

나가든 못 나가든 계속 시도할 것이다.

나의 좋은 동료이자 파트너인 제프리 젤드만Jeffrey Zeldman, 그리고 정말 최고의 친구들인 그의

가족에게 감사한다.

몰리Molly ‘이모’에게도 항상 감사의 마음을 전한다.

전문적인 측면과 개인적인 측면 다방면에서 짐Jim ’삼촌’에게도 고마움을 전한다. 그의 영향력

이 없었다면 내가 존재하지 않았을 것이라는 표현은 전혀 과장된 것이 아니다.

그리고 ‘빵과 수프 모임’의 Jim, Genevieve, Jim, Gini, Ferrett, Jen, Jenn, Molly - 여러분들의

뛰어난 요리실력과 여러분들과의 맛깔스런 대화에 감사한다.

항상 나를 사랑해주고 지원해 준 나의 가족 같은 사람들에게 감사한다.

그리고 내가 기대했던 것보다 나의 삶을 더 멋지게 만들어주고, 항상 더 많은 사랑을 보여주는

나의 아내와 딸에게 더 많이 감사한다. 물론 나도 열심히 노력할 것이다.

에릭 마이어

Cleveland Heights, Ohio

2006년 8월 1일

CHAPTER 1

CSS와 문서

캐스케이딩 스타일시트Cascading Style Sheets, CSS는 하나 또는 연관된 문서의 표현 영역을 제어하는

강력한 방법이다. 하지만, 문서 자체가 존재하지 않으면 CSS는 무용지물이되는데, 그 이유는

CSS가 표현할 대상인 콘텐츠가 없기 때문이다. 물론, ‘문서’의 정의는 굉장히 광범위하다. 예를

들어 모질라 계열의 브라우저들은 CSS를 이용해서 브라우저 크롬chrome1 자체를 표현한다. 그

렇다고 해도 크롬의 콘텐츠인 버튼, 주소 입력줄, 대화 상자, 창 등이 없으면 CSS(또는 다른 표

현적인 정보)는 필요가 없을 것이다.

기품을 잃고 타락한 웹

희미한 기억을 더듬어 초창기 웹(1990-1993)으로 돌아가 보면 HTML은 상당히 간결한 언어였

다. HTML은 대부분 문단이나 하이퍼링크, 리스트, 제목headings 같은 것들을 기술하기에 적합

한 구조적인 요소들로만 구성되었다. 테이블이나 프레임, 또는 웹 페이지를 만들기 위해 필수

적이라 생각하는 복잡한 마크업 같은 것들은 전혀 없었다. HTML은 원래 문서의 다양한 부분

을 설명하는 데 사용할 수 있는 구조적인 마크업 언어를 목표로 만들어졌고, 이런 부분들이 어

떻게 보여져야 하는지에 대해서는 거의 다루지 않았다. HTML은 외양(표현)에 관해서는 신경

을 쓰지 않는, 그저 순수하고 간결한 마크업 체계일 뿐이었다.

그리고는 모자이크가 등장했다.

10분 이상 웹을 이용해본 거의 모든 사람들이 월드 와이드 웹의 힘을 순식간에 깨닫게 되었다.

한 문서에서 다른 문서로 이동하려면 특별한 색으로 표시된 텍스트나 이미지 위에 커서를 올

리고 마우스 버튼을 클릭하기만 하면 되었다. 게다가 텍스트와 이미지를 함께 볼 수 있었고,

1　(옮긴이) 애플리케이션에서 사용자 인터페이스(UI)에 사용되는 영역을 의미한다.

2 l CSS & Documents

단순한 텍스트 에디터plain-text editor2만 있으면 페이지를 만들 수도 있었다. 웹은 무료였고 누구

에게나 열려 있는 매혹적인 존재였다.

여기저기서 웹사이트가 생겨나기 시작했다. 개인적인 일기나 대학 사이트, 기업 사이트, 그 밖

의 다양한 사이트가 생겨났다. 사이트의 수가 늘어나면서 특별한 기능을 가진 새로운 HTML

요소를 원하는 요구도 커져갔다. 제작자들은 텍스트를 두껍게bold 하거나 기울여서italicized 표현

할 수 있는 방법을 요구하기 시작했다.

당시의 HTML에는 이런 요구들을 처리할 수 있는 기능이 없었다. 일부 텍스트를 강조할 수는

있었지만 그 강조가 항상 기울여서 표현되는 것은 아니었다. 사용자의 브라우저나 설정에 따

라서 두껍게 표현될 수도 있었고, 심지어 어떤 경우에는 색만 다른 일반 텍스트로 표현될 수도

있었다. 제작자가 만든 그대로 독자가 보게 된다는 확실한 보장이 없었다.

이런 문제들 때문에 <FONT>와 <BIG> 같은 마크업 요소가 HTML 언어에 스며들기 시작했다.

구조적인 언어가 갑자기 표현적인 언어로 바뀌기 시작한 것이다.

엉망진창이 된 웹

몇 년이 흐른 후, 이런 무분별한 관행이 많은 문제점을 불러 일으켰다. 예를 들어 HTML 3.2

와 HTML 4.0 명세서의 대부분은 전적으로 표현적인 부분만을 다루고 있다. font 요소로 텍

스트의 색과 크기를 바꾸고 문서와 테이블에 배경색과 배경이미지를 넣을 수 있게 된 것, 테이

블 속성(cellspacing 같은)을 사용할 수 있게 된 것, 텍스트를 깜빡거릴 수 있게 된 것은 모두

‘더 많은 표현적인 제어’를 원했던 초기의 욕구가 낳은 결과들이었다.

엉망진창이 된 웹의 실제 예는 어느 곳이든 상관없이 기업 웹사이트의 마크업을 잠깐 살펴보

면 찾을 수 있다. 아마도 실제 유용한 정보에 비해서 지나치게 많은 마크업에 놀라게 될 것이

다. 거기다가 더 문제가 되는 것은 대부분의 사이트가 table과 font 요소로만 이루어져 있다

는 점이다. 이 두 요소들은 표현되는 대상에 대하여 어떤 시멘틱한 의미도 전달하지 못한다. 구

조적인 관점에서 봤을 때 이런 페이지들은 문자를 무작위로 나열한 것보다 조금 나을 뿐이다.

예를 들어 제작자가 h1 같은 제목 요소 대신 font 요소를 사용해서 페이지 제목을 마크업했다

고 가정해보자.

<font size="+3" face="Helvetica" color="red">페이지 제목</font>

2　 (옮긴이) 복잡한 서식을 사용하지 않고 텍스트를 편집할 수 있는 간단한 에디터. 예로, 윈도우의 ‘메모장(notepad)’이 있음.

1장 CSS와 문서 l 3

구조적인 관점에서 font 태그에는 아무런 의미도 없다. 이것이 문서의 유용성을 상당히 떨어

뜨린다. 예를 들어 font 태그는 음성 합성 브라우저3에게 얼마나 유용한 정보를 제공할까? 만

약 제작자가 font 요소 대신 제목 요소를 사용했다면 음성을 출력하는 브라우저는 해당 텍스

트를 특정한 억양으로 읽어줄 수 있다. 하지만 font 태그를 사용하면 이 텍스트에 특별한 의

미가 있다는 것을 음성 합성 브라우저가 알아낼 방법이 없다.

왜 제작자들은 구조와 의미를 이렇게 함부로 다룰까? 그 이유는 자신이 디자인한 페이지의 모

습 그대로 독자가 보게 되기를 원하기 때문이다. 구조적인 HTML 마크업을 사용하려면 페이

지의 겉모습에 대한 제어를 상당 부분 포기해야 한다. 또한 이런 구조적인 마크업은 그동안 대

중화된 조밀한 페이지 디자인에 적용하기도 확실히 힘들다. 이런 잘못된 접근 방식이 갖는 다

음의 문제점들을 생각해보자.

• 구조화되지 않은 페이지는 콘텐츠의 색인 작업을 상당히 어렵게 만든다. 정확하고 검색능력이

탁월한 검색 엔진은 페이지 제목이나 페이지 안에 있는 섹션 제목, 아니면 문단 내의 텍스트나

제작자가 중요하다고 표시한 문단만 사용자가 검색하도록 할 수도 있다. 하지만, 이런 멋진 결

과는 페이지의 콘텐츠가 반드시 어떤 구조적인 마크업(대부분의 페이지가 갖고 있지 않은 바

로 그 마크업) 안에 포함되어 있어야만 얻을 수 있다. 예를 들어 구글은 마크업 구조를 고려해

서 페이지의 순위를 정한다. 따라서 구조적인 페이지는 구글 검색 순위를 높여 줄 것이다.

• 불확실한 구조는 접근성을 떨어뜨린다. 여러분이 시력을 잃고 음성 합성 브라우저에 의존

해서 웹을 검색한다고 상상해보자. 브라우저가 섹션 제목만 들려줘서 어떤 섹션을 더 듣고

싶은지 선택할 수 있도록 해주는 구조화된 페이지와 무엇이 제목이고 무엇이 문단이며 어

떤 정보가 중요한지 구분하지 않고 모든 콘텐츠를 읽어주는 구조화되지 않은 페이지 중 어

느 쪽을 좋아하겠는가? 다시 구글로 돌아가보자. 사실상 구글 검색 엔진은 어떤 웹 페이지

를 보고 어디에서 물건을 구입할 것인가를 전적으로 자신에게 의지하는 수백만 명의 친구

를 거느린 세상에서 가장 활동적인 시각 장애 사용자이다.4

• 고급 페이지 표현 기법은 특정한 문서 구조에서만 사용할 수 있다. 섹션 제목과 화살표만

으로 이루어진 페이지를 상상해보자. 사용자는 자신에게 맞는 섹션을 선택해서 클릭할 수

있고, 그러면 해당 섹션의 내용이 나타나게 된다.

3　 (옮긴이) 텍스트를 음성으로 변환해주는 TTS(text-to-speech) 시스템 등을 이용해서 웹 콘텐츠를 음성으로 들려주는 브라우저.

4　 (옮긴이) 구글 검색 엔진 자체는 시각 장애를 가진 사람과 비슷하게 페이지를 인식한다. 이미지나 동영상을 볼 수도 없고, 자바스크립트로 작성된 메뉴를 인식하지도 못한다. 기업 웹사이트가 부족한 접근성에 대한 핑계로 “시각 장애가 있는 고객이 들어 올 가능성이 거의 없다"라고 하지만 구글이 제대로 페이지를 색인하면 수백만명의 잠재적인 고객을 끌어들일 수 있다. 관련 링크: http://www.webaccessstrategies.com/blog/id/googlebot-is-a-blind-user/

4 l CSS & Documents

• 구조화된 마크업은 유지보수하기 쉽다. 다양한 브라우저 환경에서 페이지를 엉망으로 만

들던 작은 문제 하나를 찾기 위해 다른 사람(또는 여러분 자신)이 작성한 HTML 소스를

한참 동안이나 뒤졌던 적이 얼마나 많았는가? 흰색 하이퍼링크가 들어 있는 사이드바 하

나를 만들기 위해서 중첩된 table과 font 요소를 작성하느라 얼마나 많은 시간을 소모했

는가? 제목과 그 뒤에 이어지는 내용을 적당히 구분하기 위해서 얼마나 많은 br 요소를

사용했는가? 구조적인 마크업을 사용하면 코드도 깔끔해지고 찾고 싶은 부분도 더 쉽게

찾을 수 있게 된다.

완전히 구조화된 문서는 그렇게 화려하지 않다는 사실은 인정한다. 바로 이 한 가지 이유 때문

에 구조적인 마크업을 지지하는 많은 주장들이 마케팅 부서를 설득하지 못했고, 그 결과 20세

기 후반에 정립된 HTML 형식이 지금까지 이어져오게 되었다. 우리에게 필요한 것은 구조적

인 마크업과 매력적인 페이지 디자인을 결합시키는 방법이다.

구원을 위해 등장한 CSS

당연히 월드 와이드 웹 컨소시엄World Wide Web Consortium, W3C도 HTML이 표현적인 마크업으로 오

염되고 있다는 사실을 인식하고 빠른 해결책을 찾기 시작했다. 1995년에 W3C는 CSS라고 이름

붙인 중간 작업물을 공개하기 시작했으며 1996년에 마침내 HTML 권고안과 동등한 비중을 갖

는 완전한 권고안이 되었다. 지금부터 그 이유에 대해서 알아보자.

풍부한 스타일 효과

우선, CSS는 HTML이 표현적인 부분에서 정점에 이르렀을 때보다도 훨씬 풍부하게 문서를 표

현할 수 있도록 해준다. CSS를 이용하면 모든 요소의 텍스트와 배경에 색을 넣을 수 있고, 보

더도 만들 수 있다. 이뿐만 아니라 요소 주변 공간을 자유롭게 늘리거나 줄일 수 있으며 텍스

트의 대·소문자 표기와 꾸밈(예를 들어, 밑줄 같은), 문자 사이의 간격, 심지어 텍스트를 보여

줄지 안 보여줄지도 조절할 수 있다. 그리고 이 밖에 다른 많은 효과를 제공한다.

예를 들어 일반적으로 페이지 제목이 되는 페이지의 첫 번째(그리고 가장 중요한) 제목을 살펴

보자. 적절한 마크업은 다음과 같다.

<h1>물 위로 뛰어넘기</h1>


만약 이 제목을 특정한 폰트를 사용해서 밑줄이 그어진 어두운 빨간색 기울임체로 표현하고

배경은 노란색으로 처리하기를 원한다고 가정해보자. HTML로 이 모든 것을 구현하려면 h1

요소를 table 안에 넣고 font나 u 같은 다른 요소를 잔뜩 사용해야 할 것이다. 하지만 CSS를

이용하면 필요한 것은 한 가지 규칙뿐이다.

h1 {color: maroon; font: italic 2em Times, serif; text-decoration: underline; background: yellow;}

이것이 전부다. 여러분도 볼 수 있듯이 HTML로 할 수 있는 것은 CSS로도 가능하다. 하지만

HTML이 할 수 있는 이런 일에만 국한될 필요는 없다.

h1 {color: maroon; font: italic 2em Times, serif; text-decoration: underline; background: yellow url(titlebg.png) repeat-x; border: 1px solid red; margin-bottom: 0; padding: 5px;}

이번에는 수평으로 반복되는 이미지를 h1의 배경으로 넣고서 텍스트 주위에 최소 5 픽셀의 공

간을 두고 보더를 넣었다. 또한 요소의 하단 마진(빈 공간)을 없앴다. 이것은 HTML은 따라할

수도 없는 CSS만의 놀라운 기능이며, CSS가 가진 능력의 맛보기에 불과하다.

사용의 편리함

CSS의 가능성이 여러분에게 확신을 주지 못했더라도 “스타일시트는 웹 제작자의 업무 부담을

획기적으로 줄여 준다”는 말을 들으면 아마 생각이 달라질 것이다.

무엇보다 스타일시트는 특정한 시각 효과에 대한 명령을 문서 전체에 분산시키지 않고 관리하

기 편한 하나의 장소에 집중시킬 수 있게 해준다. 예를 들어 문서의 모든 h2 제목을 보라색으

로 표현해야 한다고 생각해보자. HTML을 사용해서 이런 효과를 얻으려면 아래처럼 모든 제

목에 font 태그를 넣어야 할 것이다.

<h2><font color="purple">보라색 제목!</font></h2>

이런 방식을 모든 둘째 단계 제목(h2)에 적용시켜야만 한다. 만약 40개의 제목이 있다면 각각

의 제목에 하나씩 전부 40개의 font 요소를 넣어야 한다. 작은 효과 하나를 위해서는 너무 큰

일이다.

이렇게 작업해서 font 요소를 전부 넣었다고 가정해보자. 일은 끝났고 만족스러웠다. 그 다음

여러분(또는 여러분의 상사가)이 모든 h2 제목이 사실은 보라색이 아니라 어두운 녹색이어야

6 l CSS & Documents

한다고 결정했다. 이제 다시 되돌아가서 모든 font 요소를 하나씩 수정해야만 한다. 물론 ‘찾

아서 바꾸기find-and-replace’ 기능을 이용할 수도 있지만 그러기 위해서는 문서에 제목 외에 다른

보라색 텍스트가 있어서는 안 된다. 만약 문서에 보라색으로 지정한 다른 font 요소를 넣었다

면 해당 요소에도 영향이 미치기 때문에 ‘찾아서 바꾸기’를 이용할 수 없다.

이런 방법 대신 단 하나의 규칙을 사용하는 것이 훨씬 나은 방법이다.

h2 {color: purple;}

빠르게 입력할 수 있을 뿐 아니라 수정하기도 편하다. 만약 보라색에서 어두운 녹색으로 바꾸

려면 바로 이 규칙 하나만 수정하면 된다.

앞 절에서 다양한 스타일을 적용했던 h1 요소로 돌아가보자.

h1 {color: maroon; font: italic 2em Times, serif; text-decoration: underline; background: yellow;}

이 규칙은 HTML을 사용하는 편이 오히려 입력하기가 쉽다고 느낄지도 모른다. 하지만 h1 요

소와 똑같이 표현돼야 하는 h2 요소가 12개 정도 있는 페이지를 생각해보자. 12개의 h2 요소를

위해 얼마나 많은 마크업이 필요할까? 굉장히 많이 필요할 것이다. 하지만 CSS를 이용하면 다

음과 같은 규칙만 있으면 된다.

h1, h2 {color: maroon; font: italic 2em Times, serif; text-decoration: underline; background: yellow;}

단지 세 번의 키 입력으로 이제 이 스타일은 h1과 h2 요소 모두에게 적용된다.

만약 h1과 h2 요소 모두를 다르게 표현하고 싶다면 CSS의 이점은 더욱 두드러진다. h1 하나와

h2 열두 개의 HTML 마크업을 바꾸는 시간과 이전 스타일을 다음과 같이 바꾸는 데 걸릴 시간

을 생각해보라.

h1, h2 {color: navy; font: bold 2em Helvetica, sans-serif; text-decoration: underline overline; background: silver;}

만약 이 두 가지 접근 방식으로 내기를 한다면 나는 무조건 CSS를 잘 아는 제작자가 HTML 쪽

전문가를 쉽게 이기는 쪽에 걸 것이다.

게다가 CSS 규칙 대부분은 문서의 한 곳에 모여진다. 연관성 있는 스타일이나 개별적인 요소


에 따라 규칙을 나누는 방법으로 규칙을 문서에 분산시킬 수도 있지만, 일반적으로 모든 스타

일을 하나의 스타일시트에 넣는 것이 훨씬 효율적이다. 이렇게 스타일을 집중시키면 문서 전

체의 외양을 한 곳에서 만들고 변경(또는 관리)할 수 있다.

여러 페이지에 스타일 적용하기

장점은 더 있다. 특정 페이지에 관한 모든 스타일 정보를 한 곳에 집중시킬 수 있을 뿐 아니라

여러 페이지에 적용할 수 있는 하나의 스타일시트를 만들 수도 있다. 이렇게 하려면 스타일시

트를 독립적인 문서로 저장한 다음 이 스타일시트를 필요로 하는 문서에서 불러오면import 된

다. CSS의 이런 기능을 이용하면 웹사이트 전체에 적용될 일관된 디자인을 빠르게 만들 수 있

다. 여러분이 해야 할 일은 하나의 스타일시트를 웹사이트의 모든 문서에 링크시키는 것뿐이

다. 그러면 사이트 전체 페이지의 디자인을 바꿔야 할 경우에도 단 하나의 파일만 수정하면 변

경 사항이 전체 서버에 자동으로 적용된다.

모든 제목이 흰색 바탕에 회색 글씨인 사이트를 생각해보자. 여기서 색은 하나의 스타일시트

에 지정되어 있다.

h1, h2, h3, h4, h5, h6 {color: gray; background: white;}

이제 이 사이트가 700개의 페이지로 구성되어 있고, 각각의 페이지는 제목을 회색으로 지정해

놓은 위 스타일시트를 사용한다고 해보자. 어떤 시점에 사이트 웹 관리자가 제목을 회색 바탕

에 흰색으로 바꾸기로 결정했다. 그래서 스타일시트를 다음과 같이 수정했다.

h1, h2, h3, h4, h5, h6 {color: white; background: gray;}

그리고 스타일시트를 디스크에 저장하는 것으로 모든 수정 작업이 끝났다. 모든 제목을 table

과 font 태그에 넣는 방식으로 700페이지를 수정하는 것보다 훨씬 낫다는 것은 당연하다.

캐스케이딩

이것이 전부가 아니다! CSS에는 상반된 규칙을 처리할 수 있는 규칙도 있는데 이런 규칙들을

통틀어 캐스케이딩이라 부른다. 예를 들어 여러 웹 페이지에서 하나의 스타일시트를 불러왔던

종전의 예를 생각해보자. 이제 먼저 만들어진 페이지 스타일을 대부분 공유하면서 자신에게만

8 l CSS & Documents

적용되는 특별한 규칙도 포함하고 있는 페이지를 추가해보자. 이 페이지에서만 불러들일 새로

운 스타일시트를 만들어서 이미 존재하는 스타일시트와 함께 불러들이거나 특별한 스타일을

필요로 하는 페이지에 넣기만 하면 된다.

예를 들어 700페이지 중 한 페이지만 제목이 회색 바탕에 흰색이 아닌 파란색 바탕에 노란색으

로 표현하고 싶다면 그 한 페이지에만 다음과 같은 규칙을 넣으면 된다.

h1, h2, h3, h4, h5, h6 {color: yellow; background: blue;}

캐스케이딩 덕분에 이 규칙은 제목을 회색 바탕에 흰색으로 지정했던 이전 규칙을 재정의한

다. 이런 캐스케이딩 방식을 이해하고 잘 사용하면 수정하기 쉽고 페이지에 전문적인 디자인

을 불어넣을 수 있는 아주 정교한 스타일시트를 만들 수 있다.

캐스케이딩의 힘은 제작자에게만 한정되지 않는다. 일부 브라우저에서는 독자(혹은 웹 서퍼)

가 브라우저의 스타일뿐 아니라 제작자가 만든 스타일과도 캐스케이딩되는 (사용자 스타일시

트라 불리는) 자신만의 스타일시트를 만들 수 있다. 따라서 색맹인 사용자는 하이퍼링크를 다

음과 같이 표현하는 스타일시트를 만들 수도 있다.

a:link, a:visited {color: white; background: black;}

사용자 스타일시트는 거의 모든 것을 포함할 수 있다. 시력이 나쁜 사용자가 충분히 읽을 수

있도록 텍스트 크기를 키우는 규칙이나 내용을 빨리 읽고 검색할 수 있도록 이미지를 제거하

는 규칙도 포함할 수 있고, 심지어 사용자가 좋아하는 그림을 모든 문서에 배경으로 넣는 스타

일도 가능하다(물론 권장하지는 않지만 가능하기는 하다). 이런 방식으로 독자는 제작자의 스

타일을 전부 끄지 않고도 웹에서의 경험을 자신에게 맞게 바꿀 수 있다.

불러오기와 캐스케이딩, 그리고 다양한 효과가 합쳐져서 CSS는 모든 제작자와 사용자에게 멋

진 도구가 된다.

작은 파일 크기

CSS의 시각적인 강력함과 제작자와 사용자 모두에게 더 많은 제어 기능을 주는 능력 외에도

CSS에는 여러분이 좋아할 만한 것이 더 있다. CSS는 문서 크기를 최대한 작게 만들어서 다운

로드 속도를 빠르게 해 줄 수 있다. 어떻게 이런 것이 가능할까? 앞서 언급한 것처럼 많은 페이

지들이 멋진 시각 효과를 위해서 table과 font 요소를 사용하고 있다. 불행히도 이 두 방법은


파일 크기를 증가시키는 부수적인 HTML 마크업을 만들어낸다. 시각적인 스타일 정보를 편리

한 곳에 한데 모으고 상당히 간결한 CSS 문법을 사용해서 스타일 규칙을 표현하면 font 요소

나 흔히 쓰이는 다른 많은 태그를 제거할 수 있다. 따라서 CSS로 로딩 시간을 줄일 수 있고, 그

결과 독자들의 만족은 높아질 것이다.

미래를 위한 대비

앞서 지적했던 것처럼 HTML은 구조적인 언어이고 CSS는 HTML을 보완하는 표현적인 언어

이다. 웹에 관한 표준을 검토하고 승인하는 조직인 W3C는 이 사실을 인정하고 스타일을 위해

사용되던 요소를 HTML에서 제거하기 시작했다. 이런 움직임이 생긴 이유는 특정한 HTML 요

소가 현재 제공하는 효과를 스타일시트로도 만들어낼 수 있기 때문이다. CSS로 가능한데 누가

그 요소를 필요로 할까?

그래서 XHTML 명세서에는 많은 요소를 사용을 반대하는deprecated 요소로 분류했다. 다시 말

해서 이 요소는 해당 언어에서 단계적으로 제거되는 중이다. 결국 이 요소는 폐기된obsolete 요

소로 분류될 것인데 그 의미는 브라우저가 해당 요소를 지원할 필요도 없고 지원하는 것을

권장하지도 않는다는 뜻이다. 이렇게 사용을 반대하는 요소에는 <font>, <basefont>, <u>,

<strike>, <s>, <center> 등이 있다. 스타일시트의 출현으로 이런 요소들 중 어느 것도 필수적

이지 않게 되었다. 그리고 시간이 지남에 따라서 사용을 반대하는 요소는 더 늘어날 수도 있다.

이렇게 표현적인 요소를 배제하는 것으로도 충분하지 않아서 HTML이 점진적으로 XML

Extensible Markup Language로 대체될 가능성도 있다. XML은 HTML보다 훨씬 복잡하지만 훨씬 강

력하고 유연하기도 하다. 이런 강력함에도 불구하고 XML은 <i>나 <center> 같은 스타일 요

소를 선언하는 방법을 제공하지 않는다. 대신에 XML 문서가 스타일시트를 이용해서 겉모습을

표현할 것이 거의 확실하다. XML과 함께 사용될 스타일시트는 CSS가 아닐 수도 있지만 CSS

의 뒤를 잇는 무엇인가가 될 것이고 CSS와 매우 유사할 것이다. 그러므로 제작자가 지금 CSS

를 익히면 XML 기반의 웹으로 도약할 시간이 올 때 큰 이점을 얻게 될 것이다.

CSS를 익히기로 마음먹었다면 CSS와 문서 구조가 어떻게 서로 연관되어 있는지 이해하는 것

이 매우 중요하다. CSS를 사용해서 문서의 표현을 매우 깊이 있는 방식으로 다룰 수 있지만,

CSS에는 여러분이 할 수 있는 것에 대한 한계 또한 존재한다. 기본적인 몇 가지 용어를 살펴보

는 것으로 시작해보자.

10 l CSS & Documents

요소

요소element는 문서 구조의 기반이다. HTML에서 가장 일반적인 요소는 p, table, span, a, div

와 같이 쉽게 알 수 있는 것들이다. 문서 내의 모든 개별 요소는 문서 표현에 참여한다. 이 말

은 CSS 용어로(적어도 현재의 CSS2.1에서는) 각각의 요소가 자신의 콘텐츠를 담는 박스를 만

들어낸다는 의미이다.

대체되는 요소와 대체되지 않는 요소

CSS가 비록 요소에 의해 좌우되기는 하지만 모든 요소가 동등하게 만들어지는 것은 아니다.

예를 들어 이미지와 문단은 같은 유형의 요소가 아니며, span과 div도 마찬가지이다. CSS에서

요소는 일반적으로 대체되는 요소replaced와 대체되지 않는 요소nonreplaced의 두 가지 형태를 갖

는다. 이 두 유형에 대해서는 박스 모델에 대해 다루는 7장에서 상세히 알아볼 것이므로 여기

에서는 간략하게만 다루고 넘어가겠다.

대체되는 요소

대체되는 요소란 요소의 콘텐츠가 문서 콘텐츠로 직접 표현되지 않는 무엇인가로 대체되는

요소이다. XHTML에서 가장 잘 알려진 예는 문서 외부에 있는 이미지 파일로 대체되는 img

요소이다. 다음과 같은 간단한 예를 생각해보면 알 수 있듯이 사실 img 요소에는 실제 콘텐

츠가 없다.

<img src="howdy.gif" />

이 마크업에는 실제 콘텐츠가 없고 요소 이름과 속성만 있을 뿐이다. 이 요소는 여러분이 어떤

외부 콘텐츠(이 예에서는 src 속성에 지정된 이미지)를 가리키도록 지정하지 않으면 아무것도

표현하지 않는다. input 요소 역시 type 속성에 따라서 라디오 버튼이나 체크 박스, 텍스트 입

력 박스 등으로 대체된다. 대체 요소도 다른 요소와 마찬가지로 화면에 박스를 만들어 낸다.

대체되지 않는 요소

대부분의 HTML과 XHTML 요소는 대체되지 않는 요소이다. 이 말은 요소의 콘텐츠가 요소 자신

이 만들어낸 박스 안에서 사용자 에이전트(보통은 브라우저)에 의해 표현됨을 의미한다. 예를 들

어 <span>안녕</span>은 대체되지 않는 요소이고 사용자 에이전트는 ‘안녕’이라는 텍스트를 보여

줄 것이다. 문단, 제목, 테이블 셀, 리스트, 그 밖에 거의 모든 HTML 요소들이 여기에 해당된다.


요소의 표현 방식

CSS2.1은 대체 유무에 따른 구분과 더불어서 블록 레벨과 인라인 레벨이라는 두 개의 다른 기

본 유형으로 요소를 분류한다. HTML이나 XHTML 마크업을 작성해서 웹 브라우저로 표현해

본 제작자라면 이런 유형에 좀 더 익숙할 것이다. 그림 1-1이 두 요소를 설명하고 있다.

그림 1-1. XHTML 문서의 블록 레벨 요소와 인라인 레벨 요소

블록 레벨 요소

블록 레벨 요소는 기본적으로 부모 요소의 콘텐츠 영역을 채우면서 양 옆으로 다른 요소가 배

치되지 않는 요소 박스를 만든다. 다시 말해서 블록 레벨 요소에는 요소 박스의 전후로 ‘줄 바

꿈breaks’이 생긴다. HTML에서 가장 잘 알려진 블록 요소는 p와 div이다. 대체되는 요소도 블

록 레벨 요소가 될 수 있지만 일반적으로는 그렇지 않다.

리스트 아이템list item은 특별한 블록 레벨 요소이다. 다른 블록 요소와 동일한 방식으로 동작하

지만 요소 박스에 ‘덧붙는’ 마커(보통 순서 없는 리스트의 불릿이나 순서 있는 리스트의 숫자

같은)를 추가적으로 만든다. 마커의 존재 여부를 제외하면 리스트 아이템은 다른 블록 요소와

동일하다.

인라인 레벨 요소

인라인 레벨 요소는 한 줄의 텍스트 안에서 요소 박스를 만들고 그 줄의 흐름을 끊지 않는다.

가장 대표적인 인라인 요소는 a 요소이며, strong과 em도 잘 알려져 있다. 인라인 요소는 자

신의 전후로 ‘줄 바꿈’을 만들지 않기 때문에 다른 요소의 콘텐츠 안에서 해당 요소의 표현 방

식을 방해하지 않고 사용될 수 있다.

비록 ‘블록’과 ‘인라인’이라는 용어가 XHTML의 블록 레벨과 인라인 레벨 요소와 많은 부분에


서 공통점을 갖지만 둘 사이에는 중요한 차이가 있다는 점에 주의해야 한다. HTML과 XHTML

에서 블록 레벨 요소는 인라인 레벨 요소의 자손이 될 수 없다. 하지만 CSS에서는 요소의 표현

방식이 상호간에 어떻게 중첩될 수 있는지에 관한 제한이 없다.

어떻게 이것이 가능한지 CSS의 속성인 display를 살펴보자.

display

속성값 none | inline | block|inline-block | list-item | run-in |

table | inline-table | table-row-group | table-header-group |

table-footer-group | table-row | table-column-group |

table-column | table-cell | table-caption | inherit

기본값 inline

적용대상 모든 요소

상속여부 No

산출값 플로트float, 위치지정position, root 요소 여부에 따라 달라짐(CSS2.1 9.7 섹션 참고),

그 외에는 지정된 값.

display 속성에 많은 값이 올 수 있다는 것을 이미 알고 있을지도 모르는데 그 중에서 block

과 inline, list-item 세 개만 앞서 간략히 다뤘다. 나머지 값들을 2장과 7장에서 상세히 다

루고 있기 때문에 여기에서는 살펴보지 않고 그냥 넘어가겠다.

지금은 block과 inline에만 집중하도록 하자. 우선 다음 마크업을 생각해보자.

<body><p>이것은 <em>인라인 요소를</em> 포함하는 문단이다.</p></body>

여기에 두 개의 블록 요소(body와 p)와 하나의 인라인 요소(em)가 있다. XHTML 명세서에 따

르면 em은 p의 자손이 될 수 있지만, 그 반대는 불가능하다. 일반적으로 XHTML 계층 구조는

이렇게 인라인이 블록의 자손일 경우에만 효력을 갖고, 그 반대일 경우에는 제대로 적용되지

않는다.

반면에 CSS에는 이런 제한이 없다. 마크업은 그대로 두고 두 요소의 표현 방식만 다음과 같이

바꿀 수가 있다.


p {display: inline;}em {display: block;}

이 규칙은 요소들이 인라인 박스 안에 블록 박스를 만들게 해준다. 이것은 완벽하게 문법에 맞

으며 명세서의 어떤 부분도 어기지 않는다. 하지만 발생할 수 있는 유일한 문제는 여러분이 요

소들의 포함 관계를 반대로 바꾸려고 할 때 생긴다.

<em><p>이것은 인라인 요소에 잘못 둘러싸인 문단이다.</p></em>

CSS로 표현 방식을 어떻게 바꾸든 상관없이 이것은 XHTML 문법에 어긋난 것이다.

XHTML 문서에서는 요소의 표현 방식을 바꾸는 것이 유용하게 사용될 수 있지만 XML 문서

에서는 결정적인 역할을 한다. XML 문서는 고유한 표현 방식을 갖는 경우가 거의 없기 때문에

그것을 정의하는 것은 전적으로 제작자에게 달려 있다. 예를 들어 다음과 같은 XML의 일부가

어떻게 표현될지 궁금할 것이다.

<book> <maintitle>CSS 완벽 가이드</maintitle> <subtitle>3판 개정판</subtitle> <author>에릭 A. 마이어</author> <publisher>위키북스</publisher> <pubdate>2008</pubdate> <isbn>이러쿵저러쿵</isbn></book><book> <maintitle>제프리 젤드만의 웹표준 가이드</maintitle> <author>제프리 젤드만</author> <publisher>위키북스</publisher> <pubdate>2008</pubdate> <isbn>이러쿵저러쿵</isbn></book>

display 속성의 기본값이 inline이기 때문에 이 콘텐츠는 그림 1-2처럼 기본적으로 인라인

텍스트로 표현될 것이다. 따라서 표현되는 결과는 전혀 쓸모가 없다.

그림 1-2. XML 문서의 기본 표현


display 속성을 이용하면 이 문서의 기본적인 레이아웃을 확실히 지정해 줄 수 있다.

book, maintitle, subtitle, author, isbn {display: block;}publisher, pubdate {display: inline;}

이제 일곱 개의 요소 중 다섯 개를 block으로, 두 개를 inline으로 지정했다. 이것으로 각각의

block 요소는 XHTML에서 div 요소가 다뤄지는 방식으로 취급되고, 두 개의 inline 요소는

span과 비슷한 방식으로 다루어질 것이다.

표현 방식을 바꾸는 중요한 능력은 다양한 상황에서 CSS의 유용성을 한층 높여준다. 앞서 정의

한 규칙을 시작점으로 해서 다양한 규칙을 추가해주면 그림 1-3과 같은 결과를 얻을 수 있다.

그림 1-3. 스타일이 적용된 XML 문서

이 책의 나머지 부분에서 위 예제와 같은 표현을 가능하게 해주는 다양한 속성과 값을 살펴볼

것이다. 그렇지만 먼저 CSS와 문서를 연결시키는 방법을 알아봐야 한다. 무엇보다 CSS와 문서

를 한데 묶지 않으면 CSS가 문서에 영향을 줄 수 있는 방법이 없기 때문이다. 이에 관한 내용

을 보다 익숙한 XHTML 환경에서 알아볼 것이다.

CSS와 XHTML 연결하기

앞서 HTML과 XHTML 문서는 고유한 구조를 갖는다고 언급했는데 여기서 다시 반복해도 지

나치지 않을 만큼 중요한 가치가 있다. 사실 이것은 오래된 웹 페이지들이 안고 있는 문제의

일부로 문서가 시각적인 구조와는 전혀 다른 고유한 내부 구조를 가져야 한다는 사실을 너무

CSS 완벽 가이드3판 개정판

에릭 A. 마이어위키북스(2008)

이러쿵저러쿵

제프리 젤드만의 웹표준 가이드제프리 젤드만

위키북스(2008)

이러쿵저러쿵


많은 사람들이 잊고 있다는 점이다. 웹에서 가장 멋진 페이지를 만들려는 조급함 때문에 우리

들은 페이지가 어떤 구조적인 의미를 갖는 정보를 포함해야만 한다는 사실을 외면하거나 왜곡

했고, 대개는 무시했다.

구조는 XHTML과 CSS의 관계에 있어서 고유한 속성이다. 구조가 없으면 관계도 있을 수 없

다. 이해를 돕기 위해서 예제 XHTML 문서를 살펴보고 문서를 각각의 부분으로 나누어보자.

<html><head><title>Eric’s World of Waffles</title><link rel="stylesheet" type="text/css" href="sheet1.css" media="all" /><style type="text/css">@import url(sheet2.css);h1 {color: maroon;}body {background: yellow;}/* These are my styles! Yay! */</style></head><body><h1>와플!</h1><p style="color: gray;">가장 훌륭한 아침 식사는 와플이다--벌집 모양의

기발한 무늬에 달콤한 시럽이나 잼을 넣은 와플을 먹는 아이들은 행복함으로 부풀어 오를 것이다.

게다가 와플은 만들기 아주 쉽다! 간단하게 만들어서 맛있게 먹을 수 있는 와플은 여러분에게

달콤한 아침을 선사할 것이다!

</p></body></html>

그림 1-4는 이 마크업의 결과이다.

그림 1-4. 간단한 예제 문서

그러면 이 문서를 CSS와 연결하는 여러 가지 방법을 알아보자.


link 태그

먼저 link 태그의 용도를 알아보자.

<link rel="stylesheet" type="text/css" href="sheet1.css" media="all" />

link 태그는 제대로 사용될 날만을 기다리면서 HTML 명세서 주위를 몇 년 동안이나 떠돌고

있는 태그로, 거의 주목을 못받았지만 그럼에도 불구하고 완벽하게 유효한(HTML 명세서에

어긋나지 않는) 태그이다.

link 태그의 근본적인 목적은 link 태그를 포함하는 문서와 다른 어떤 문서를 HTML 제작자

가 연결시킬 수 있게 해주는 것이다. CSS는 이 태그를 이용해서 스타일시트를 문서에 연결시

키는데 그림 1-5에서는 파일명이 sheet1.css인 스타일시트가 문서에 연결되었다.

그림 1-5. 외부 스타일시트가 문서에 적용되는 방법을 표현한 그림

이렇게 HTML 문서의 일부가 아닌데도 문서의 일부처럼 사용되는 스타일시트를 외부 스타일

시트라 한다. 이렇게 불리는 이유는 HTML 문서 외부에 있는 스타일시트이기 때문이다.

외부 스타일시트를 제대로 불러오기 위해서는 link가 title 요소처럼 반드시 head 요소 안

에 있어야 하고 그 외의 다른 요소 안에 있어서는 안된다. 그러면 그림 1-5 같은 방식으로 웹

index.html

sheet1.css


브라우저가 스타일시트를 찾아서 읽어들이고 그 안에 포함된 모든 스타일을 이용해서 HTML

문서를 표현한다.

그러면 외부 스타일시트는 어떤 포맷으로 이루어져 있을까? 이전 절과 예제 XHTML 문서에서

봤던 것처럼 단순히 규칙을 나열한 것이지만, 이번에는 이 규칙들이 독립적인 파일에 저장되

어 있다. 스타일시트는 스타일 규칙만 포함할 수 있고, XHTML이나 다른 마크업 언어는 포함

할 수 없다는 점을 기억하자. 외부 스타일시트의 내용은 다음과 같다.

h1 {color: red;}h2 {color: maroon; background: white;}h3 {color: white; background: black; font: medium Helvetica;}

이것이 외부 스타일시트에 들어 있는 전부이다. HTML 마크업이나 주석은 전혀 없고 그저 간

결하고 단순한 스타일 선언뿐이다. 일반적으로 이런 스타일 선언은 텍스트 파일로 저장되고

sheet1.css처럼 .css라는 확장자가 붙는다.

CauTion! 외부 스타일시트는 어떤 문서 마크업도 포함할 수 없고, 나중에 이 장 뒷부분에

서 설명할 CSS 규칙과 CSS 주석만 들어갈 수 있다. 외부 스타일시트에 마크업

이 들어가면 스타일시트의 일부나 전체가 무시될 수도 있다.

파일명 확장자가 반드시 필요한 것은 아니지만 일부 구형 브라우저는 link 요소에 type을

text/css로 정확하게 지정해도 .css로 끝나지 않는 파일은 스타일시트를 담고 있는 파일로 인

식하지 못한다. 사실 일부 웹서버는 파일명이 .css로 끝나지 않는 파일은 text/css로 전달하지

않지만 이런 문제는 웹서버의 설정 파일을 바꾸는 것으로 대부분 해결할 수 있다.

속성

link 태그의 나머지 부분에서 속성과 속성값은 상당히 직관적이다. rel은 ‘관계relation’를 의미

하고 이 예제에서 관계는 stylesheet이다. type은 항상 text/css로 지정한다. 이 속성값은

link 태그를 사용해서 불러들일 데이타의 유형을 나타낸다. 웹 브라우저는 이런 방식으로 스

타일시트가 CSS 스타일시트라는 것을 알게 되고 불러들인imported 데이타를 어떻게 처리할지

결정하게 된다. 무엇보다 미래에는 다른 스타일 언어가 사용될 수도 있기 때문에 여러분이 사

용하고 있는 스타일 언어를 선언하는 것이 중요하다.


그 다음으로 href 속성을 볼 수 있다. 이 속성값은 여러분이 사용할 스타일시트의 URL이 된

다. URL은 상황에 따라서 절대 경로나 상대 경로 둘 중 하나가 된다. 물론 이 예제에서는 URL

을 상대 경로로 사용했다. 상대 경로 대신 간단히 http://www.meyerweb.com/sheet1.css처

럼 바꿔 쓸 수도 있다.

마지막으로 media 속성이 있다. 예제에서 사용한 all 값은 이 스타일시트가 모든 표현 미디

어에 적용되어야 한다는 의미이다. CSS2는 media 속성으로 쓸 수 있는 다양한 값을 정의하고

있다.

all

모든 표현 미디어에서 사용된다.

aural

음성 합성기나 스크린 리더, 문서를 음성으로 표현해주는 기타 장치에서 사용한다.

braille

점자 장치로 문서를 표현(렌더링)할 때 사용한다.

embossed

점자 출력 장치로 인쇄할 때 사용한다.

handheld

PDA나 웹 접속이 가능한 핸드폰 같은 휴대용 장치에 사용한다.

print

시각이 있는 사용자를 위한 문서를 인쇄할 때나 문서의 ‘인쇄 미리보기print preview’를

보여줄 때 사용한다.

projection

연설을 하면서 슬라이드쇼를 보여줄 때 사용하는 디지탈 프로젝터 같은 프로젝션 매

체에서 사용한다.

screen

데스크톱 컴퓨터의 모니터 같은 스크린 매체를 이용해서 문서를 표현할 때 사용한다.

이런 환경에서 운영되는 모든 웹 브라우저는 스크린을 매체로 하는 사용자 에이전트

이다.


tty

문서를 텔레타이프teletype처럼 피치pitch가 고정된 환경으로 전송할 때 사용한다.

tv

텔레비전을 통해 문서를 표현할 때 사용한다.

이런 미디어 유형 대부분은 현재의 어떤 웹 브라우저에서도 지원되지 않는다. 가장 널리 지

원되는 것은 all, screen, print 유형이다. 이 글을 쓰는 시점에서 오페라 브라우저는

projection을 추가로 지원하기 때문에 문서를 슬라이드쇼로 표현할 수 있다.

적용할 미디어를 쉼표로 구분해서 나열하면 둘 이상의 매체에서 스타일시트를 사용할 수 있

다. 따라서 링크된 스타일시트를 screen과 projection 미디어 모두에서 사용할 수 있다.

<link rel="stylesheet" type="text/css" href="visual-sheet.css" media="screen, projection" />

하나의 문서에 다수의 외부 스타일시트가 연결될 수도 있다는 점에 주의하자. 이런 경우에는

rel 속성이 stylesheet로 지정된 link 태그만 문서의 초기 디스플레이에 사용된다. 그래

서 basic.css와 splash.css라는 두 개의 스타일시트를 연결시키려면 다음과 같은 마크업을 사

용한다.

<link rel="stylesheet" type="text/css" href="basic.css" /><link rel="stylesheet" type="text/css" href="splash.css" />

이렇게 하면 브라우저가 두 개의 스타일시트를 모두 읽어들이고 각각의 규칙을 한데 모은 다

음 문서에 적용한다(정확히 어떻게 스타일시트가 합쳐지는지는 3장에서 알아볼 것이고, 지금

은 스타일시트가 합쳐진다는 것만 그냥 알아두자). 예를 들어,

<link rel="stylesheet" type="text/css" href="basic.css" /><link rel="stylesheet" type="text/css" href="splash.css" />

<p class="a1">이 문단은 basic.css 스타일시트가 적용될 경우에만 회색으로 표현된다.</p><p class="b1">이 문단은 splash.css 스타일시트가 적용될 경우에만 회색으로 표현된다.</p>

예제 마크업에는 없지만 사용할 수 있는 속성이 하나 있는데 바로 title 속성이다. title 속성

은 자주 사용되지는 않지만 언젠가는 중요한 역할을 할지도 모른다. 그리고 올바르게 사용하지

않으면 예상치 못한 결과를 가져올 수도 있다. 그 이유가 무엇인지 다음 절에서 알아보자.


대체 스타일시트

대체 스타일시트를 정의할 수도 있다. 스타일시트의 rel 속성을 alternate stylesheet로

지정하면 대체 스타일시트가 정의되고 사용자가 선택할 경우에만 문서 표현에 사용된다.

대체 스타일시트를 이용할 수 있는 브라우저는 link 요소의 title 속성값을 이용해서 대체할

수 있는 스타일 목록을 만든다. 따라서 다음과 같은 마크업을 작성할 수 있다.

<link rel="stylesheet" type="text/css" href="sheet1.css" title="Default" /><link rel="alternate stylesheet" type="text/css" href="bigtext.css" title="Big Text" /><link rel="alternate stylesheet" type="text/css" href="zany.css" title="Crazy colors!" />

그러면 사용자가 자신이 원하는 스타일을 고를 수 있고, 브라우저는 최초의 스타일시트(이 경

우에는 ‘Default’로 지정된)를 사용자가 선택한 스타일로 바꾸게 된다. 그림 1-6은 이러한 선택

방식이 구현된 한 예이다.

그림 1-6. 브라우저가 다양한 대체 스타일시트를 제공하는 모습

Tip대체 스타일시트는 모질라나 넷스케이프 6+ 같은 대부분의 Gecko 엔진 기반 브라

우저와 오페라 7에서 지원된다. 인터넷 익스플로러에서는 자바스크립트를 이용해서

대체 스타일시트를 지원하도록 할 수는 있지만 브라우저 자체적으로 지원하는 것은

아니다.


다수의 대체 스타일시트에 같은 title 값을 부여해서 대체 스타일시트를 그룹으로 묶는 것 또

한 가능하다. 그래서 사용자가 여러분의 사이트를 screen과 print 미디어 둘 다 다른 스타일을

선택하도록 만들 수 있다. 예를 들어,

<link rel="stylesheet" type="text/css" href="sheet1.css" title="Default" media="screen" /><link rel="stylesheet" type="text/css" href="print-sheet1.css" title="Default" media="print" /><link rel="alternate stylesheet" type="text/css" href="bigtext.css" title="Big Text" media="screen" /><link rel="alternate stylesheet" type="text/css" href="print-bigtext.css" title="Big Text" media="print" />

사용자가 대체 스타일시트 관련 명세서를 따르는 사용자 에이전트conforming user agent가 제공하

는 대체 스타일시트 선택 방식에서 ‘Big Text’를 선택하면 bigtext.css가 screen 매체의 문서 스

타일에 사용되고 print 매체에는 print-bigtext.css가 사용된다. sheet1.css와 print-sheet1.css는

어떤 매체에서도 사용되지 않는다.

왜 이런 현상이 생길까? rel 속성이 stylesheet인 link 요소에 title 속성을 주면 해당 스

타일시트를 우선 스타일시트로 지정하는 것이기 때문이다. 이 말은 해당 스타일시트가 대체 스

타일시트보다 우선적으로 사용된다는 의미이다. 문서가 처음 보여질 때 이 스타일시트가 사용

되지만 일단 여러분이 대체 스타일시트를 선택하면 우선 스타일시트는 사용되지 않는다.

게다가, 만약 여러분이 다수의 스타일시트를 우선 스타일시트로 지정할 경우에는 그 중 하나

를 제외한 나머지는 무시된다. 다음과 같은 상황을 생각해보자.

<link rel="stylesheet" type="text/css" href="sheet1.css" title="Default layout" /><link rel="stylesheet" type="text/css" href="sheet2.css" title="Default text sizes" /><link rel="stylesheet" type="text/css" href="sheet3.css" title="Default colors" />

세 요소 모두 title 속성값이 있기 때문에 이제 세 개의 link 요소 모두가 우선 스타일시트로

지정되었지만, 실제로는 그 중 단 하나만이 사용되고 나머지 두 스타일시트는 완전히 무시된다.

그렇다면 무시되어질 두개는 어떤 것일까? HTML과 XHTML 어느 쪽도 어떤 우선 스타일시트가

무시되고 어떤 것이 사용돼야 하는지를 결정할 방법을 제공하지 않기 때문에 확실한 답은 없다.


만약 스타일시트에 title 속성을 주지 않으면 그 스타일시트는 고정 스타일시트가 되고 문서

표현에 항상 사용된다. 대부분의 경우에 제작자가 의도하는 바로 그런 결과를 만든다.

style 요소

style 요소는 스타일시트를 포함시키는 방법의 하나로 문서 자체에 들어간다.

<style type="text/css">

style 요소는 반드시 type 속성과 함께 사용해야 하는데 CSS 문서의 경우 올바른 type 속성

값은 link 요소와 똑같은 "text/css"이다.

style 요소는 위의 예처럼 언제나 <style type="text/css">로 시작돼야 한다. 하나 또는 그

이상의 스타일이 이어진 다음 닫는 </style> 태그로 마무리된다. 앞서 설명한 외부 스타일시

트에서 허용되던 값을 style 요소의 media 속성으로 줄 수도 있다.

여는 style 태그와 닫는 태그 안에 있는 스타일을 문서 스타일시트 또는 임베디드embedded 스

타일시트라 부르는데 이 스타일시트가 문서 안에 포함되어 있기 때문이다. 문서 스타일시트

안에는 문서에 적용될 다양한 스타일이 들어가며 추가로 @import 명령을 사용해서 다수의 외

부 스타일시트를 링크시킬 수도 있다.

@import 명령

이제 style 태그 안에 있는 것들을 알아보자. 먼저 link와 매우 유사한 것이 있는데 바로

@import 명령이다.

@import url(sheet2.css);

@import 명령은 link와 똑같이 웹 브라우저가 외부 스타일시트를 불러와서 그 안에 있는 스

타일을 HTML 문서 렌더링에 사용하도록 지시하는 데 이용된다. 둘 사이의 주요 차이점은 실제

문법과 명령이 올 수 있는 위치뿐이다. 아래 예에서 볼 수 있듯이 @import 명령은 style 요소

안에 들어가 있다. 반드시 그 안에 있어야 하고 다른 CSS 규칙보다 앞에 있어야 한다. 그렇게

하지 않으면 @import는 아무런 효과도 발휘하지 못한다. 다음 예를 생각해보자.

<style type="text/css">@import url(styles.css); /* @import가 앞에 놓인다. */h1 {color: gray;}</style>


link처럼 문서에 하나 이상의 @import 문이 있을 수 있다. 하지만 link와는 달리 @import

로 불러오는 모든 스타일시트는 로딩이 되고 나서 사용되어진다. 즉, @import 명령으로는 대

체 스타일시트를 지정할 수가 없다. 따라서 다음과 같은 @import 명령이 있다면,

@import url(sheet2.css);@import url(blueworld.css);@import url(zany.css);

세 개의 외부 스타일시트가 로딩되고 그 안에 있는 모든 스타일 규칙이 문서 표현에 사용된다.

CauTion! 오래된 브라우저 상당수는 다양하게 변형된 @import 명령을 처리하지 못한다.5

이런 문제를 이용해서 구형 브라우저에서 스타일을 숨기는 방법이 있는데 자

세한 사항은 http://w3development.de/css/hide_css_from_browsers 페이지

를 참고하기 바란다.

link처럼 스타일시트 URL 뒤에 적용될 미디어를 나열해서 불러들일 스타일시트를 특정 미디

어에 한정 지을 수 있다.

@import url(sheet2.css) all;@import url(blueworld.css) screen;@import url(zany.css) projection, print;

@import는 외부 스타일시트에서 다른 외부 스타일시트에 있는 스타일을 사용해야 할 때 특히

유용하다. 외부 스타일시트는 어떤 문서 마크업도 허용하지 않기 때문에 link 요소를 사용할

수가 없지만 @import는 가능하다. 따라서 다음과 같은 스타일시트를 작성할 수 있다.

@import url(http://example.org/library/layout.css);@import url(basic-text.css);@import url(printer.css) print;body {color: red;}h1 {color: blue;}

이 예와 동일한 스타일을 사용하지는 않겠지만 어쨌든 이해할 수 있을 것이다. 예제에서 상대

경로로 지정된 URL과 절대 경로로 지정된 URL이 함께 쓰인 것을 주의해서 보자. link와 마

찬가지로 두 가지 유형의 URL을 모두 사용할 수 있다.

위의 예제에서처럼 @import 명령이 스타일시트 맨 처음에 나온 사실에 유의하자. CSS에서

5　(옮긴이) url을 큰따옴표로 묶거나, url() 없이 경로를 지정하는 식의 변형.


@import 명령은 스타일시트 안에 있는 다른 어떤 규칙보다 먼저 나와야 한다. ‘명세서를 따

르는 사용자 에이전트conforming user agent’는 다른 규칙(body {color: red;} 같은) 뒤에 있는

@import 명령을 무시할 것이다.

CauTion! 윈도우용 인터넷 익스플로러는 명령의 위치와 상관없이 모든 @import 명령

을 받아들인다. 다른 브라우저는 위치가 올바르지 않은 @import 명령을 무

시하기 때문에 실수로 @import 명령을 정확하지 않은 위치에 사용해서 윈도

우용 인터넷 익스플로러를 제외한 다른 브라우저에서 엉뚱한 결과를 얻을 수

도 있다.

실제 스타일 규칙

예제의 @import 구문 다음에는 일반적인 스타일 규칙 몇 가지를 볼 수 있다. 지금 당장 그 규

칙의 의미가 중요한 것은 아니지만, h1 요소를 적갈색으로 만들고 body 요소의 배경을 노란색

으로 지정하는 규칙임을 예상할 수 있을 것이다.

h1 {color: maroon;}body {background: yellow;}

이런 스타일들이 문서embedded 스타일시트의 대부분을 차지한다. 간단할 수도 있고 복잡할 수

도 있으며 짧을 수도 있고 길 수도 있다. style 요소 안에 아무 규칙도 없는 그런 문서는 거의

없을 것이다.

하위 접근성

오래된 구형 브라우저에서의 접근성(문서를 이용할 수 있게 하는)에 관심이 있다면 생각해봐

야 할 중요한 주의사항이 있다. 여러분은 브라우저가 자신이 인식하지 못하는 태그는 무시한

다는 사실을 아마 알고 있을 것이다. 예를 들어 페이지에 잘못된 태그가 있으면 브라우저가 해

당 태그를 인식하지 못하기 때문에 결국 완전히 무시된다.

이와 똑같은 방식이 스타일시트에도 적용된다. 만약 브라우저가 <style> 태그와 </style> 태

그를 인식하지 못하면 이 태그들은 완전히 무시된다. 하지만, 브라우저 입장에서 이 태그 안에

있는 스타일 선언은 일반적인 텍스트와 다를 바가 없기 때문에 반드시 무시되지는 않는다. 그


결과 스타일 선언이 페이지 맨 앞에 나타나게 된다(물론 브라우저가 body 요소 외부에 있는

텍스트를 무시해야 하지만 실제로는 그렇지가 않다).

이 문제를 해결하려면 스타일 선언을 주석 태그 안에 넣어 주는 것이 좋다. 아래 예를 보면, 주

석 태그가 여는 style 태그 바로 뒤에서 시작되어 닫는 style 태그 바로 앞에서 끝났다.

<style type="text/css"></style>

이렇게 하면 구형 브라우저는 style 태그와 함께 선언도 완전히 무시하는데, 그 이유는

HTML 주석을 표현하지 않기 때문이다. 반면에 CSS를 이해하는 브라우저는 여전히 스타일시

트를 읽을 수 있다.

CSS 주석

CSS에서도 주석을 사용할 수 있는데 /*와 */에 둘러싸인 C/C++ 언어의 주석과 거의 비슷하다.

/* CSS1 주석이다 */

C++에서처럼 여러 줄을 한꺼번에 주석 처리할 수도 있다.

/* CSS1 주석은 여러 줄을

한 번에 사용할 수 있다. */

하지만 CSS 주석은 중첩해서 사용할 수 없다는 점을 반드시 기억해야 한다. 따라서 다음과 같

은 주석은 올바르지 않다.

/* 이 주석 안에는 다른 주석이 들어가 있는데 이것은 잘못된 사용법이다./* 주석 안에 들어간 다른 주석 */그리고 원래 주석은 여기서 끝난다. */

하지만, 주석을 중첩해서 사용하는 경우는 거의 없으므로 이런 제한은 큰 문제가 되지 않는다.


CauTion! 의도하지 않았는데도 중첩된 주석이 만들어지는 경우가 한 가지 있는데 이미

주석이 들어 있는 큰 스타일시트 블록 전체를 임시로 주석 처리할 때이다. CSS

가 중첩된 주석을 허용하지 않기 때문에 바깥쪽 주석은 안쪽 주석이 끝나는 곳

에서 끝나게 된다.

주석을 스타일 규칙과 같은 줄에 넣어야 할 경우에는 주석의 위치에 특히 조심해야 한다. 예를

들어 다음은 올바른 방법이다.

h1 {color: gray;} /* 이 CSS 주석은 여러 줄이지만 */h2 {color: silver;} /* 실제 스타일 옆에 있기 때문에 */p {color: white;} /* 각각의 줄을 */pre {color: gray;} /* 주석 처리해야 한다. */

아래 예처럼 각각의 줄을 주석으로 둘러싸지 않으면 스타일시트 대부분이 주석이 일부가 되어

제대로 작동하지 않을 것이다.

h1 {color: gray;} /* 이 CSS 주석도 여러 줄이지만

h2 {color: silver;} 모든 줄이 주석 처리되지 않았기 때문에

p {color: white;} 첫 번째를 제외한 나머지 스타일은

pre {color: gray;} 주석의 일부로 인식된다. */

위 예제에서는 첫 번째 규칙(h1 {color:gray;})만 문서에 적용된다. 나머지 규칙은 사실 주석

의 일부이기 때문에 브라우저의 렌더링 엔진이 무시한다.

예제를 계속 살펴보면 XHTML 태그 안에 CSS 정보가 조금 더 있다는 사실을 알게 될 것이다!

인라인 스타일

문서embedded 스타일시트나 외부 스타일시트 없이 하나의 개별 요소에 간단히 몇 개의 스타일

을 지정하고 싶을 때는 HTML 속성인 style을 사용해서 인라인 스타일을 만들 수 있다.

<p style="color: gray;">The most wonderful of all breakfast foods is the waffle--a ridged and cratered slab of home-cooked, fluffy goodness... </p>

style 속성은 body 영역 밖에 있는 태그(예: head, title)를 제외한 모든 HTML 태그에 사용

할 수 있다.


style 속성에 사용되는 문법에는 특별한 것이 없다. 사실 중괄호가 큰따옴표로 바뀐 점을 제

외하면 style 요소나 외부 스타일시트에 들어가는 선언과 거의 똑같다.

그래서 <p style="color: maroon; background: yellow;">라는 인라인 스타일은 해당

문단의 텍스트를 적갈색으로, 배경을 노란색으로 만든다. 이때, 문서의 다른 부분은 이 선언의

영향을 받지 않는다.

전체 스타일시트가 아닌 선언 부분만 인라인 style 속성에 넣을 수 있다는 점에 주의해야 한

다. 그래서 @import 명령을 style 속성으로 넣거나, 완전한 전체 규칙을 포함시킬 수는 없다.

style 속성값으로 넣을 수 있는 것은 규칙에서 중괄호 사이에 올 수 있는 것들뿐이다.

일반적으로 style 속성을 사용하는 것은 썩 좋은 방법이 아니다. 실제로 XHTML 1.1에서는

style 속성 사용을 반대deprecated하고 있고, XHTML을 제외한 다른 XML 언어에서도 거의 사

용되지 않는다. CSS의 주요 장점 중 하나는 문서 전체의 겉모습이나 웹서버에 있는 전체 문서

의 겉모습을 관리하는 집중된 스타일을 구성할 수 있다는 점인데 인라인 스타일을 사용하면

이런 장점이 사라진다. 인라인 스타일이 font 태그보다 훨씬 유연하기는 하지만 여러모로 생

각했을 때 크게 나을 바가 없다.

요약

CSS를 이용하면 사용자 에이전트가 요소를 표현하는 방식을 완전히 바꿀 수 있다. 이런 변화

는 기본적으로 display 속성과 스타일시트를 문서에 연결시키는 다양한 방법으로 얻어진다.

사용자는 이런 효과가 외부 스타일시트나 문서embedded 스타일시트 때문인지, 아니면 인라인

스타일을 통해서인지 알 수가 없다. 외부 스타일시트의 실질적인 중요성은 제작자가 사이트의

표현에 관한 모든 정보를 한 곳에 모을 수 있고, 모든 문서가 그 한 곳에 있는 정보를 이용할

수 있도록 해주는 방식에 있다. 이것은 사이트의 업데이트와 관리를 쉽게 해줄 뿐 아니라 문서

에서 표현에 관한 내용을 제거하기 때문에 네트워크 전송량을 줄여준다.

CSS의 강력함을 최대한 활용하려면 제작자는 스타일을 어떻게 문서의 요소와 연결시키는지

알아야 한다. CSS가 어떻게 이 모든 것을 가능하게 하는지를 완전히 이해하려면 CSS가 스타일

을 적용하기 위해서 문서의 일부를 선택하는 방식을 확실히 이해해야 하는데, 이것이 바로 다

음 장의 주제이다.

CHAPTER 2

선택자

디자이너들이 특히 좋아할 만한 CSS의 장점으로는 같은 유형의 모든 요소에 동일한 스타일을

쉽게 적용할 수 있다는 점이다. 솔깃하지 않은가? 단지 CSS 한 줄만을 고쳐서 모든 제목의 색

상을 바꿀 수 있다고 생각해 보자. 현재 사용 중인 파란 색이 마음에 들지 않는다면 한 줄만 수

정해서 보라색이라든지 노랑, 적갈색 등 어떤 색이든 원하는 색으로 바꿀 수 있다. 이런 장점

은 여러분이 디자이너로서 다른 것에 신경쓸 필요 없이 디자인에만 신경쓸 수 있도록 해준다.

다음 회의에서 누군가가 제목의 녹색 계열을 살짝 바꿔보기를 원한다면 단지 한 줄을 고친 뒤

새로고침을 눌러주면 된다. 순식간에 만족스러운 결과를 모두에게 보여줄 수 있다.

CSS로 모든 문제를 해결할 순 없지만(예를 들어 이미지의 색을 바꾸는 것은 불가능하다) 전반

적인 변화를 주는 건 아주 간단하다. 이제부터 선택자와 CSS의 전반적인 구조에 대해 알아보

도록 하자.

기본 규칙들

시작할 때 얘기한 것처럼 CSS에는 문서의 어떤 요소 전체에 똑같은 규칙을 일괄 적용할 수 있

는 주요한 기능이 있다. 모든 h2 요소를 회색으로 표시하려 한다고 생각해 보자. 구식(예전 스

타일)의 HTML을 사용하면 <FONT COLOR="gray">...</FONT> 태그를 모든 h2 요소에 추가해

줘야 할 것이다.

<h2><font color="gray">h2 텍스트</font></h2>

문서에 h2 요소가 많이 들어가 있는 경우에는 매우 지루한 작업인데다가 나중에 회색이 아니

라 녹색으로 표시하도록 수정하려면 지루한 작업을 한 번 더 해야 한다.

30 l Selectors

하지만 CSS를 이용하면 수정과 편집이 쉽고 여러분이 지정한 모든 텍스트 요소에 적용할 수

있는 규칙을 만들 수 있다(이런 규칙이 어떤 식으로 동작하는지는 다음 절에서 알아보자). 예

를 들어 h2 요소를 회색으로 표시하려면 아래와 같은 규칙을 작성하면 된다.

h2 {color: gray;}

이 상태에서 h2 요소를 다른 색으로(은색이라고 해보자) 바꾸려고 하면 규칙을 다음과 같이 살

짝 수정해주면 된다.

h2 {color: silver;}

규칙의 구조

규칙의 개념을 자세히 설명하기 위해서 우선 규칙의 구조를 상세히 살펴보도록 하자.

각각의 규칙들은 크게 선택자와 선언부로 나눌수 있다. 선언부는 하나 이상의 선언들로 구성

되며 각각의 선언들은 속성과 값의 쌍으로 이루어진다. 스타일시트는 여러 개의 규칙들이 모

여 있는 것이라 할 수 있다. 그림 2-1을 보면 규칙이 어떻게 구성되는지를 알 수 있다.

{color: red; background: yellow;}

선언

속성 속성값 속성

h1

선택자

속성값

선언

선언부

그림 2-1. 규칙의 구조

규칙의 왼편에 있는 선택자는 문서의 어떤 부분에 영향을 미치게 되는지를 정의하게 된다. 그

림 2-1에 있는 선택자는 h1 요소를 선택하게 되며 만약 h1 대신 p를 지정하면 모든 p(문단) 요

소가 영향을 받게 된다.

규칙의 오른쪽 부분에는 하나 이상의 선언들로 구성되는 선언부가 위치한다. 각각의 선언들은

CSS 속성과 속성값의 조합으로 이루어져 있다. 그림 2-1의 선언부에는 두 개의 선언이 존재하

며 문서의 일부가 첫 번째 선언에 의해 빨간색 글씨로 표시되고, 두 번째 선언에 의해 노란색

배경을 가진다. 그러므로 문서에 있는 (선택자에 정의된) 모든 h1 요소들은 노란 배경에 빨간

글씨로 표현된다.

2장 선택자 l 31

요소 선택자

대부분의 경우 선택자는 HTML 요소지만 언제나 그런 것은 아니다. 예를 들어 XML 문서에 적

용될 스타일을 포함하는 CSS 파일에는 다음과 같은 선택자가 있을 수도 있다.

QUOTE {color: gray;}BIB {color: red;}BOOKTITLE {color: purple;}MYElement {color: red;}

다시 말해서, 문서의 요소는 가장 기본적인 선택자 역할을 한다. XML은 임의의 요소명을 갖는

새로운 마크업 언어를 만들어낼 수 있는 언어이므로, 무엇이든 선택자로 사용할 수 있다. 하지

만 HTML 문서에 스타일을 적용하는 경우 선택자는 보통 p, h3, em, a, 심지어 html 자신 같은

HTML 요소가 될 것이다.

html {color: black;}h1 {color: gray;}h2 {color: silver;}

이 스타일시트는 그림 2-2와 같은 결과를 보여 준다.

플루토늄

다양한 용도로서 유용하지만 잘못 취급하면 위험을 초래할 수 있다.

안전에 관한 정보

플루토늄을 다룰 때에는 임계 질량을 초과하지 않도록 각별히 주의해야 한다.

플루토늄은 내폭 가능성이 매우 높으므로 최대한 이를 피해야만 한다. 소량으로 나누어서 취급하면 이런 위험을 피할 수 있다.

설명

불가피한 경우가 아니면 플루토늄을 아예 사용하지 않는 것이 최선이다.

그림2-2. 간단한 문서에 입혀진 스타일

전체적으로 직접 요소에 스타일을 지정했는데 그 요소가 아닌 다른 요소로 이 스타일을 옮기

고 싶을 수 있을 것이다. 그림 2-2의 예제에서 회색을 h1 요소가 아닌 문단에 적용하려면 h1

선택자를 p 선택자로 바꿔주기만 하면 된다.

32 l Selectors

html {color: black;}p {color: gray;}h2 {color: silver;}

이 스타일을 적용하면 그림 2-3과 같은 결과를 얻을 수 있다.

플루토늄





설명


그림 2-3. 스타일을 어떤 요소에서 다른 요소로 옮기기

선언과 키워드

선언부에는 하나 이상의 선언이 있다. 선언은 속성, 콜론, 값, 세미콜론이 이어지는 형식으로

구성된다. 콜론과 세미콜론 뒤에는 스페이스가 한 개 이상 있어도 별 상관이 없으며 대부분의

경우 값은 하나의 키워드나 스페이스로 구분된 (그 속성에서 사용가능한) 여러 개의 키워드 집

합이 된다. 만약 선언에 잘못된 속성이나 값을 사용하게 되면 선언 전체(속성과 값 모두)가 무

시된다. 그러므로 다음과 같이 선언을 하게 되면 제대로 적용이 되지 않는다.

brain-size: 2cm; /* 잘못된 속성 */color: ultraviolet; /* 잘못된 값 */

두 개 이상의 키워드를 허용하는 속성에서 각각의 키워드는 보통 스페이스로 구분된다. 모든 속성

이 다중 키워드를 허용하지는 않지만 font를 포함한 여러 속성에서 다중 키워드를 사용할 수 있

다. 그림 2-4에서처럼 문단 텍스트에 중간 크기의 Helvetica를 사용하려는 경우를 생각해 보자.

2장 선택자 l 33

플루토늄





설명


그림 2-4. 다중 키워드를 속성값으로 사용한 경우

규칙은 다음과 같이 표현할 수 있다.

p {font: medium Helvetica;}

각각의 키워드인 medium과 Helvetica 사이엔 스페이스가 놓이게 된다(첫 번째 키워드는 폰

트 크기를, 두 번째 키워드는 실제 폰트명을 의미한다). 사용자 에이전트는 스페이스로 두 개

의 키워드를 구별해낼 수 있고 결국 두 키워드 모두를 제대로 적용할 수 있게 된다. 그리고 세

미콜론은 선언이 끝났음을 알려준다.

이렇게 스페이스로 분리된 단어들도 키워드로 인식되는데, 단어들이 합쳐져서 주어진 속성의

값이 되기 때문이다. 예로, 다음과 같은 가상의 규칙을 생각해보자.

rainbow: red orange yellow green blue indigo violet;

rainbow라는 속성은 없고, 게다가 값들 중 두 가지는 사용할 수 있는 유효한 색상이 아니지만

이해를 돕기 위해서는 무리없을 것이다. 속성 rainbow의 값은 red orange yellow green

blue indigo violet이고 7개의 키워드가 합쳐져서 하나의 유일한 값이 된다. rainbow를

다음과 같이 다시 정의해 보자.

rainbow: infrared red orange yellow green blue indigo violet ultraviolet;

34 l Selectors

rainbow에 새로운 값이 더해져서 이젠 7개가 아닌 9개의 값을 가지게 된다. 비록 두 값이 비

슷하기는 하지만 이 두 값은 0과 1처럼 유일하면서 동시에 서로 다르다.

Tip font 속성 한 가지를 제외한 CSS 키워드들은 앞에서 살펴봤던 대로 스페이스로 나

누어진다. 예외적으로 font 속성에서는 특정한 두 키워드를 슬래시(/)로 나눠서 입

력할 수 있다. h2 {font: large/150% sans-serif;}

슬래시로 요소의 font-size와 line-height를 지정하는 키워드를 구별하게 되며 슬래

시가 나올 수 있는 곳은 여기 뿐이다. 폰트의 다른 키워드들은 스페이스로 구분되어

야 한다.

이런 것들은 간단한 선언의 기초일 뿐이고 실제론 훨씬 복잡하다. 다음 절에서부터 CSS가 얼

마나 강력한지를 알아보도록 하자.

그룹화

지금까지 하나의 선택자에 하나의 스타일만을 적용하는 간단한 방법만을 살펴봤다. 하지만 동

일한 스타일을 여러 요소에 적용하고 싶을땐 어떻게 해야할까? 그런 경우라면 다수의 선택자

를 사용하거나, 요소 혹은 요소 그룹에 다수의 스타일을 적용하면 될 것이다.

선택자 그룹화

h2 요소와 문단에 있는 글씨를 회색으로 표현하려면 다음과 같이 선언하는 게 가장 쉬운 방법

이다.

h2, p {color: gray;}

h2와 p를 규칙의 왼편에 놓고 쉼표(,)로 구분한 다음 우측에 스타일을 정의해 놓으면(color:

gray;) 이 스타일들이 두 가지 선택자에 해당되는 모든 요소에 적용된다. 쉼표는 규칙에 두 개의

선택자가 있다는 것을 브라우저에게 알려준다. 만약 쉼표가 빠지면 해당 규칙은 완전히 다른 의

미를 갖게 되는데 자세한 사항은 나중에 다룰 ‘자손 선택자Descendant Selectors’에서 알아볼 것이다.

2장 선택자 l 35

얼마나 많은 선택자를 그룹지을 수 있는지에 대한 제한은 없으므로 많은 요소를 한꺼번에 회

색으로 표시하고 싶다면 다음과 같은 규칙을 작성하면 된다.

body, table, th, td, h1, h2, h3, h4, p, pre, strong, em, b, i {color: gray;}

제작자들은 그룹화를 이용해서 특정한 유형의 스타일 지정을 극단적으로 간소화할 수 있고,

그 결과 스타일시트의 길이를 줄일 수 있다. 다음에 나오는 두 가지 예제는 정확히 동일한 효

과를 내지만 어느 쪽이 더 작성하기 쉬운지는 누가 봐도 명백할 것이다.

h1 {color: purple;}h2 {color: purple;}h3 {color: purple;}h4 {color: purple;}h5 {color: purple;}h6 {color: purple;}

h1, h2, h3, h4, h5, h6 {color: purple;}

그룹화는 몇 가지 흥미로운 선택의 기회를 제공한다. 예를 들어 다음 예제에 사용된 규칙들은

모두 동등하다. 각각의 규칙들은 선택자와 선언을 그룹화하는 다양한 방식을 보여줄 뿐이다.

/* 그룹 1 */h1 {color: silver; background: white;}h2 {color: silver; background: gray;}h3 {color: white; background: gray;}h4 {color: silver; background: white;}b {color: gray; background: white;}

/* 그룹 2 */h1, h2, h4 {color: silver;}h2, h3 {background: gray;}h1, h4, b {background: white;}h3 {color: white;}b {color: gray;}

/* 그룹 3 */h1, h4 {color: silver; background: white;}h2 {color: silver;}h3 {color: white;}h2, h3 {background: gray;}b {color: gray; background: white;}

36 l Selectors

위의 예제들은 모두 그림 2-5와 같은 결과를 보인다(이 예에선 다음 절에 다룰 ‘선언 그룹화

Grouping Declarations’에서 알아볼 선언 방법을 미리 사용하고 있다).

플루토늄





설명


그림 2-5. 동등한 스타일시트의 적용 결과

전체 선택자

CSS2에서는 전체 선택자라 불리는 간단한 선택자가 새로 추가되었다. 이는 별표(*)로 표시하

며 와일드 카드처럼 모든 요소를 선택하게 된다. 문서 내의 모든 요소를 빨간색으로 표시하고

싶다면 다음 규칙을 이용하면 된다.

* {color: red;}

이 선언은 문서 내의 모든 개별 요소를 열거해서 선택자를 그룹화한 것과 동등하다. 이처럼 전

체 선택자를 이용하면 한 번의 효율적인 작업으로 모든 요소를 빨간색으로 표시할 수 있다. 전

체 선택자는 매우 편리하지만 가끔 의도하지 않은 결과를 가져오기도 하므로 조심해서 사용해

야 한다(이에 대해서는 다음 장에서 알아본다).

선언 그룹화

하나의 규칙에 여러 개의 선택자를 그룹지어 사용할 수 있는 것처럼 선언들을 그룹화하는 것

도 가능하다. 모든 h1 요소를 청록색aqua 배경색에 보라색 18픽셀 Helvetica 텍스트로 표현해야

2장 선택자 l 37

한다고 생각해보자(그리고 사용자의 가독성을 신경 쓰지 않는다면). 다음과 같은 스타일을 작

성할 수 있다.

h1 {font: 18px Helvetica;}h1 {color: purple;}h1 {background: aqua;}

하지만 이 방법은 효율적이지 못하다. 한 요소에 적용될 10~15개의 스타일 목록을 만든다고

생각해보라! 그 대신 선언들을 한꺼번에 그룹화할 수 있다.

h1 {font: 18px Helvetica; color: purple; background: aqua;}

이 선언은 방금 봤던 세 줄로 작성된 스타일과 정확히 똑같은 효과를 만들어낸다.

선언들을 그룹화할 때 각각의 선언 뒤에 있는 세미콜론이 결정적인 역할을 한다는 점을 명시

하자. 사용자 에이전트는 스타일시트에 있는 공백을 무시하고 정확한 문법에 따라서 스타일시

트를 해석한다. 그러므로 스타일을 아래처럼 작성하더라도 그 효과는 동일하다.

h1 { font: 18px Helvetica; color: purple; background: aqua;}

하지만, 만약 두 번째 세미콜론이 빠지게 되면 사용자 에이전트는 스타일시트를 다음과 같이

해석하게 된다.

h1 { font: 18px Helvetica; color: purple background: aqua;}

background:는 color에 사용할 수 있는 유효한 값이 아니고 color는 오직 한 개의 키워드만

허용하기 때문에 사용자 에이전트는 background: aqua 부분을 포함해서 color 선언을 완전

히 무시해버린다. h1 요소들은 배경색 없이 보라색 글씨로 표시될 수도 있지만 대부분의 경우

보라색조차 제대로 적용되지 않고, 그 대신 배경 없이 기본 색(보통은 검정)으로 표시될 것이

다. font: 18px Helvetica는 세미콜론이 제대로 붙어 있으므로 문제 없이 적용된다.

38 l Selectors

Tip기술적으로 마지막 선언에는 세미콜론이 없어도 아무 상관이 없지만 세미콜론을 붙

이는 습관을 들이는 것이 좋다. 이렇게 세미콜론을 붙이는 습관을 들이면 렌더링 에

러를 일으키는 가장 흔한 원인 중 하나를 예방할 수 있고 규칙에 새로운 선언을 추

가하더라도 세미콜론을 빼먹었을까봐 걱정할 필요가 없다. 게다가 인터넷 익스플

로러 3.x 같은 구형 브라우저에선 마지막 선언에 세미콜론이 없을 경우 이상하게 동

작하기도 하므로 이런 문제들을 피해가려면 선언의 위치와 상관없이 모든 선언 뒤

에 세미콜론을 붙이도록 하자.

선택자 그룹화처럼 선언을 그룹지으면 스타일시트를 쉽게 관리할 수 있을 뿐만 아니라 짧고

의미있는 스타일시트를 만들 수도 있다.

전체 그룹화

선택자나 선언들을 그룹화할 수 있다는 걸 알아봤으니 이를 조합해서 사용해 보자. 이렇게 하

면 복잡한 스타일을 단지 몇 줄만으로 간단히 정의할 수 있다. 모든 제목에 복잡한 스타일을

지정해서 똑같이 적용하려 한다면 다음과 같이 해보자.

h1, h2, h3, h4, h5, h6 {color: gray; background: white; padding: 0.5em; border: 1px solid black; font-family: Charcoal, sans-serif;}

선택자를 그룹화했기 때문에 규칙의 오른편에 있는 스타일들은 위에 열거한 모든 제목 요소에

적용된다. 또한 선언들도 그룹지어 사용했으므로 열거한 스타일들이 왼편에 있는 선택자에 모

두 적용된다는 것을 의미하고, 결국 그림 2-6 에서와 같은 결과를 보이게 된다.

2장 선택자 l 39

플루토늄





설명


그림 2-6. 선택자와 규칙을 함께 그룹화하기

대부분 아래처럼 시작되는(나머지 스타일은 생략함) 지루한 방식보다는 앞에서 살펴봤던 방식

이 더 바람직하다.

h1 {color: gray;}h2 {color: gray;}h3 {color: gray;}h4 {color: gray;}h5 {color: gray;}h6 {color: gray;}h1 {background: white;}h2 {background: white;}h3 {background: white;}

이처럼 스타일을 길게 작성해도 되기는 하지만 그렇게 하는 것은 모든 곳에 font 태그를 써주

는 것처럼 소모적인 방법이므로 별로 권장하고 싶지 않다.

선택자를 더 정밀하게 만들어서 요소에 제한되지 않고 특정한 정보 유형에 따라 스타일을 적

용시킬 수도 있다. 물론 이런 강력한 방법을 사용하려면 약간의 수고가 더 필요하지만 충분히

그럴만한 가치가 있다.

40 l Selectors

class 선택자와 id 선택자

지금까지 선택자와 선언을 그룹화하는 다양한 방식을 알아봤지만 우리가 사용했던 선택자는

여전히 문서 요소만을 가리키는 단순한 선택자였다. 어느 정도까지는 이런 선택자로도 충분하

지만 때로는 보다 전문적인 무엇인가를 필요로 할 때도 있다.

기본적인 요소 외에도 class 선택자와 id 선택자라는 두 개의 선택자가 더 존재하며 이를 이용

하면 요소 종류에 상관없이 스타일을 지정할 수 있게 된다. 이 선택자들은 독자적으로 사용하

거나 요소 선택자와 결합시켜 사용할 수 있지만 문서에 마크업이 제대로 되어 있지 않으면 정

상적으로 동작하지 않으므로 잘 계획해서 사용하는 것이 중요하다.

이해를 위해 플루토늄을 다루는 방법에 대해 문서 초안을 작성하고 있다고 해보자. 이 문서는

위험한 플루토늄을 안전하게 다루기 위한 여러 가지 주의사항을 담고 있는데 이런 사항들을

눈에 잘 띄게 볼드체로 표시하고자 한다. 그런데 어떤 주의사항은 문단 전체를 사용할 수도 있

지만 경우에 따라서 긴 리스트의 한 항목이거나 텍스트의 일부분이 될 수도 있다. 이렇게 주의

사항이 어떤 요소를 사용해서 표현될지는 모르므로 간단한 선택자로는 이 주의사항에 대한 규

칙을 작성할 수가 없다. 여러분이 다음과 같은 방법을 사용했다고 생각해보자.

p {font-weight: bold;}

규칙을 위 예처럼 작성하면 주의사항이 담긴 문단뿐만 아니라 모든 문단이 볼드체로 표시되므

로 주의사항만을, 더 정확하게는 주의사항을 포함하고 있는 요소만을 선택할 수 있는 방법이

필요하다. 그럼 어떻게 해야 할까? 요소에 상관없이 특정한 방식으로 구분된 문서의 일부분에

class 선택자를 이용해서 스타일을 적용하면 된다.

class 선택자

요소에 구애받지 않고 스타일을 적용시키는 가장 일반적인 방법은 class 선택자를 이용하는 것

이다. 하지만 그러기 위해서는 문서의 실제 마크업을 수정해서 class 선택자가 동작하도록 해

주어야 한다. 다음과 같이 class 속성을 추가해 보자.

<p class="warning">플루토늄을 다룰 때에는 임계 질량을 초과하지 않도록 각별히 주의해야 한다.</p><p>플루토늄은 <span class="warning">내폭 가능성이 매우 높으므로 최대한 이를 피해야만 한다</span>. 소량으로 나누어서 취급하면 이런 위험을 피할 수 있다.</p>

2장 선택자 l 41

요소에 class 선택자로 지정한 스타일을 적용시키려면 class 속성에 적절한 값을 지정해주어

야 한다. 앞에서 나온 마크업에선 첫 문단과 두 번째 문단의 span 요소에 warning이란 class

값이 지정되어 있다.

이젠 class가 지정된 요소에 스타일을 적용시키기만 하면 된다. HTML 문서에서는 class 이름

앞에 점(.)을 써주는 간단한 표기법을 사용할 수 있고, 다른 간단한 선택자와 조합해서 사용할

수도 있다.

*.warning {font-weight: bold;}

앞에서 살펴본 마크업에 이 규칙을 적용하면 그림 2-7과 같은 모습을 볼 수 있으며 font-

weight: bold는 전체 선택자 덕에 class 속성에 warning 값을 가지는 모든 요소에 적용

된다.

플루토늄





설명


그림 2-7. class 선택자 사용하기

위에서 볼 수 있듯이 class 선택자는 요소의 class 속성값을 직접 참조하는 방식으로 동작한

다. 이런 참조는 항상 점(.)으로 시작되는데 이 점(.)이 class 선택자임을 나타낸다. 또한 이 점

(.)은 선택자를 조합해서 사용할 때 class 선택자와 다른 선택자(예: 요소 선택자)를 구분짓는

역할을 한다. 예를 들어 문단 전체가 주의사항일 경우에만 볼드체로 표현하고 싶다면 다음 규

칙을 사용하면 된다.

42 l Selectors

p.warning {font-weight: bold;}

이 선택자는 class 속성에 warning이라는 단어가 들어 있는 모든 p 요소와 일치하지만 p 요

소가 아니거나 class가 다른 요소와는 일치하지 않는다. p.warning이라는 선택자는 “class 속

성에 warning이라는 단어가 포함된 모든 문단”으로 해석된다. span 요소는 문단이 아니기 때

문에 이 규칙의 선택자는 span 요소에 적용되지 않고, 따라서 볼드체로 표현되지 않는다.

span 요소에 다른 스타일을 적용해주려면 다음과 같이 span.warning을 이용하면 된다.

p.warning {font-weight: bold;}span.warning {font-style: italic;}

이렇게 하면 주의사항을 나타내는 문단은 볼드체가 되고 주의사항이 포함된 span은 이탤릭체

가 된다. 각각의 규칙은 특정한 요소/class 조합에만 적용되기 때문에 다른 요소에는 영향을 주

지 않는다.

그리고 다음 예제와 같이 전체 class 선택자와 특정 요소에 국한된 class 선택자를 함께 사용하

는 방법도 있다. 이는 사용하기에 따라 아주 유용할 수 있다. 결과는 그림 2-8 과 같다.

.warning {font-style: italic;}span.warning {font-weight: bold;}

플루토늄




설명


그림 2-8. 전체 class 선택자와 특정 요소에 국한된 class 선택자를 이용한 스타일 조합

2장 선택자 l 43

이 경우 주의사항은 모두 이탤릭체로 표현되고, warning class를 가지는 span 요소는 이탤

릭 볼드체로 표시된다.

이전 예제에서 사용한 전체 class 선택자의 형태에 주목하자. 요소 이름 없이 점(.)과 class 명

만으로 구성된 선택자를 사용했다. 동일한 class명을 갖는 모든 요소를 선택하고 싶을 때에는

class 선택자에서 전체 선택자를 생략해도 아무런 문제가 발생하지 않는다.

다중 class

이전 절에서는 class 값으로 한 개의 단어만을 가지는 경우를 살펴봤다. HTML에서는 스페이스

로 구분된 여러 단어를 하나의 class 속성값으로 가질 수 있다. 예를 들어 긴박한 주의사항을

담고 있는 요소를 특별하게 표현하고 싶다면 다음과 같이 작성할 수 있다.

<p class="urgent warning">플루토늄을 다룰 때에는 임계 질량을 초과하지 않도록

각별히 주의해야 한다.</p><p>플루토늄은 <span class="warning">내폭 가능성이 매우 높으므로 최대한

이를 피해야만 한다.</span> 소량으로 나누어서 취급하면 이런 위험을 피할 수 있다.</p>

순서는 별 의미가 없으므로 "warning urgent"처럼 적어줘도 된다.

그럼 이제 warning class의 요소는 모두 볼드체로, urgent class의 요소는 모두 이탤릭체로,

warning과 urgent class를 둘 다 갖는 요소는 은색 배경으로 표현하고 싶다고 생각해보자. 다

음과 같은 규칙이 사용될 것이다.

.warning {font-weight: bold;}

.urgent {font-style: italic;}

.warning.urgent {background: silver;}

두 개의 class 선택자를 연결하면 순서와 상관없이 두 개의 class 이름을 모두 갖는 요소만 선택

할 수 있다. HTML 소스는 class="urgent warning"이고 CSS 선택자는 .warning.urgent

지만 이런 표현 순서와 상관없이 이 규칙은 그림 2-9처럼 “플루토늄을 다룰 때에는...” 문단을

은색 배경색으로 표시한다.

공백으로 구분된 class 목록에 없는 class명을 포함하는 다중 class 선택자는 적용이 되지 않는

다. 다음 규칙을 생각해보자.

p.warning.help {background: red;}

44 l Selectors

플루토늄




설명


그림 2-9. 다중 class를 갖는 요소 선택하기

여러분의 예상처럼 이 선택자는 class 속성에 warning과 help라는 단어가 포함된 p 요소만을

선택하기 때문에 warning과 urgent만 갖는 p 요소에는 적용되지 않는다. 하지만 다음과 같이

마크업된 요소에는 적용된다.

<p class="urgent warning help">Help me!</p>

CauTion! 인터넷 익스플로러 7 이전의 인터넷 익스플로러(윈도우와 매킨토시용 모두)는

다중 class 선택자를 제대로 처리하지 못한다. 이런 구버전에서는 목록에 있는

단일 class는 선택할 수 있지만 다중 class명을 이용해서 선택하는 것은 제대로

동작하지 않는다. 따라서 p.warning은 예상대로 동작하지만 p.warning.help

는 선택자에 마지막으로 나오는 help라는 class가 포함된 모든 요소와 일치한

다. 만약 p.help.warning이라고 작성하면 구버전 인터넷 익스플로러는 help

라는 class 유무와 상관없이 class 값으로 warning을 갖는 모든 p 요소를 선택

하게 된다.

id 선택자

어떤 면에서 id 선택자는 class 선택자와 매우 비슷하지만 몇 가지 중요한 차이점이 있다. 우선

id 선택자는 점(.) 대신 번호를 나타내는 #기호octothorp(파운드 기호 또는 해시 마크라고도 불린

2장 선택자 l 45

다)로 시작된다. 그러므로 id 선택자는 다음과 같이 표현된다.

*#first-para {font-weight: bold;}

이 규칙은 first-para id를 가지는 요소를 볼드체로 표시하게 만든다.

두 번째 차이점은 class 속성 대신 id 속성을 참조한다는 점이다. 실제 어떤 식으로 동작하는 지

에 대한 예를 하나 살펴보자.

*#lead-para {font-weight: bold;}

<p id="lead-para">이 문단은 볼드체로 표현된다.</p><p>이 문단은 볼드체로 표현되지 않는다.</p>

lead-para 값은 문서의 어떤 요소에나 적용될 수 있다는 점을 주의하기 바란다. 여기선 첫 번

째 문단에만 적용했으나 두 번째나 세 번째 요소에도 마찬가지로 쉽게 적용할 수 있다.

class 선택자에서처럼 id 선택자에서도 전체 선택자를 생략할 수 있다. 앞에 나온 예제를 다음

과 같이 작성할 수도 있다.

#lead-para {font-weight: bold;}

이 선택자는 앞에 나왔던 선택자와 동일하게 동작한다.

class와 id 선택자 중 하나를 선택하기

이미 알아봤듯이 class는 여러 요소에 적용될 수 있다. warning class가 p와 span 요소에 적용

되었고 더 많은 요소에도 적용될 수가 있다. 하지만 id는 HTML 문서 내에서 오직 한 번만 사

용되어야 하므로 id로 lead-para 값을 가지는 요소가 이미 있다면 문서 내의 다른 요소에는

이 값을 사용할 수 없다.

Tip실제로 브라우저는 대부분 HTML 문서 내의 id가 유일한지를 확인하지 않는데 이

말은 HTML을 구성하는 몇 개의 요소에 동일한 값을 id 속성으로 지정하면 각각의

요소에 동일한 스타일이 적용될 것이라는 뜻이다. 이것은 올바른 동작 방식이 아니

지만 어쨌든 그렇게 동작한다. 문서 내의 여러 요소에 동일한 id 값을 주면 DOM 스

크립트를 사용할 때 어려움이 생기는데 getElementById() 같은 일부 함수(메소드)

는 주어진 id 값에 해당하는 요소가 오직 하나뿐이라는 가정하에 동작하기 때문이다.

46 l Selectors

id 속성은 공백으로 구분된 다중 값을 허용하지 않으므로 id 선택자는 class 선택자 때처럼 조합

해서 사용할 수는 없다.

순전히 문법적인 관점에서, 점(.)-class 표기법(.warning 같은)은 XML 문서에서 제대로 동작

한다고 장담할 수가 없다. 점(.)-class 표기법은 이 글을 쓰는 시점에서 HTML, SVG, MathML

에서 사용 가능하고, 미래에 발표될 언어에서도 허용될 가능성이 크지만 그것을 결정하는 것

은 각각의 언어 명세서에 달려 있다. #-id 표기법(#lead 같은)은 문서 내에서 유일한 값을 가

져야만 하는 속성이 있는 모든 문서 언어1에서 동작한다. 문서 내에서 속성값의 유일성만 보장

된다면 유일한 속성은 id나 그 밖의 무엇이든 될 수 있다.

class와 id의 또 다른 차이점은 주어진 요소에 어떤 스타일이 적용되어야 하는지를 결정할 때

id가 class보다 더 높은 우선순위를 갖는다는 점이다. 이런 우선순위에 관해서는 다음 장에서

자세히 다룰 것이다.

class와 마찬가지로, id 선택자도 요소의 종류에 영향을 받지 않는다. 가령 문서에서 어떤 내용

이 무슨 요소로 표현될 지는 모르지만 어떤 id 값을 갖는 지를 알고 있다면 (플루토늄을 다루는

방법에 대한 주의사항처럼) 독립적인 id 선택자를 선언하면 된다. 예를 들어 mostImportant

id를 가지게 될 요소가 있다. 이 요소가 문단일지 문장의 일부일지 리스트의 한 항목일지 아니

면 제목일지를 알 수 없고, 단지 문서에서 임의의 요소로 딱 한 번만 나오게 될거라는 점만 알

고 있다면 다음과 같은 규칙을 작성할 수 있다.

#mostImportant {color: red; background: yellow;}

이 규칙은 다음에 나오는 요소 모두와 일치한다(미리 얘기 했지만 이 요소들은 모두 같은 id를

가지므로 같은 문서에 존재하면 안 된다).

<h1 id="mostImportant">중요한 부분!</h1><em id="mostImportant">중요한 부분!</em><ul id="mostImportant">중요한 부분!</ul>

문서에 사용된 언어에 따라 다르겠지만 class나 id 선택자의 이름에선 대소문자가 구별될 수 있

다. HTML과 XHTML은 class나 id 값에서 대소문자를 구별하므로 CSS의 class, id 값과 문서의

class, id 값은 대소문자가 반드시 일치해야 한다. 따라서 다음 CSS, HTML 예제의 요소는 볼드

체로 표시되지 않는다.

1　(옮긴이) 문서 언어란 HTML, XHTML, SVG처럼 소스 문서가 작성(인코딩)된 언어를 의미함.

2장 선택자 l 47

p.criticalInfo {font-weight: bold;}<p class="criticalinfo">중요한 정보임.</p>

문자 i의 대소문자가 달라졌기 때문에 이 선택자는 주어진 요소와 일치하지 않는다.

CauTion! 오래된 브라우저에선 class나 id 이름에서 대소문자를 구별하지 않지만 현재 사

용되는 브라우저들은 모두 대소문자를 구별한다.

속성 선택자

class와 id 선택자 모두 실제로는 특정한 속성값을 선택하는 것이었다. 앞서 두 절에서 사용했

던 문법은 이 글을 쓰는 시점에서 HTML, SVG, MathML 문서에 특화된 것으로 다른 마크업

언어에서는 이런 class와 id 속성을 이용할 수 없는 경우도 있다. 이런 상황을 처리하기 위해서

CSS2는 속성과 속성값을 이용해서 요소를 선택할 수 있도록 해주는 속성 선택자를 도입했다.

속성 선택자에는 네 가지 유형이 있다.

CauTion! 속성 선택자는 사파리와 오페라 그리고 모든 Gecko 기반 브라우저에서 사용

할 수 있지만 매킨토시용 인터넷 익스플로러 5나 윈도우용 인터넷 익스플로러

6 이하 버전에선 사용할 수가 없다. 인터넷 익스플로러 7은 CSS2.1의 모든 선

택자와 CSS3 선택자 일부를 지원하는데 이 선택자들도 이번 절에서 다룬다.

단순 속성으로 선택하기

속성값과 상관없이 특정한 속성을 가지는 요소를 선택하고 싶다면 단순 속성 선택자를 이용하

면 된다. 예를 들어 속성값이 무엇이든 class 속성을 가지는 모든 h1 요소를 선택해서 은색으

로 표시하려면 다음과 같이 규칙을 작성하면 된다.

h1[class] {color: silver;}

아래와 같은 마크업 예제에 이 규칙을 적용해보자.

<h1 class="hoopla">Hello</h1><h1 class="severe">Serenity</h1><h1 class="fancy">Fooling</h1>

48 l Selectors

그림 2-10. 속성을 이용해서 요소 선택하기

결과는 그림 2-10 에서 확인할 수 있다.

XML 언어에서는 용도를 구체적으로 나타내는 요소명과 속성명을 사용하는 경향이 있기 때

문에 이런 접근 방식은 XML 문서에서 매우 유용하다. 행성과 태양계를 설명하는 XML 언어

(PlanetML이라고 부를 것이다)가 있다고 생각해보자. moons라는 속성을 갖는 모든 planet 요

소를 선택하고 볼드체로 표현해서 달을 소유하고 있는 행성만 구별되게 표현하고 싶다면 다음

과 같은 규칙을 작성할 수 있다.

planet[moons] {font-weight: bold;}

이 규칙으로 인해 다음 마크업의 두 번째와 세 번째 요소는 볼드체로 표시된다. 하지만 첫 번

째 요소는 볼드체로 표시되질 않는다.

<planet>Venus</planet><planet moons="1">Earth</planet><planet moons="2">Mars</planet>

HTML에선 이런 방식을 창의적으로 다양하게 이용할 수 있다. 예를 들어 올바른 형식을 갖추

고 있는지를 확인하기 위해 alt 속성이 있는 모든 이미지를 강조해서 보여줄 수도 있다.

img[alt] {border: 3px solid red;}

(위 예제는 디자인을 위해서 보다는 문서가 형식을 제대로 지키고 있는지를 확인할 때 보다 유

용하다.)

title 속성을 갖는 모든 요소를 볼드체로 표현하려면 다음과 같이 작성하면 된다. 대부분의

브라우저는 이렇게 title 속성이 지정된 요소 위에 커서가 머무르면 ‘툴팁tool tip’으로 title 정보

를 보여준다.

*[title] {font-weight: bold;}

2장 선택자 l 49

비슷한 방법으로 href 속성이 있는 앵커(a 요소)에만 스타일을 적용시킬 수도 있다.

다음과 같이 속성 선택자를 여러 개 연결하면 한 가지 속성만이 아니라 두 개 이상의 속성을

이용해서 요소를 선택할 수도 있다. 예를 들어 href와 title 속성을 동시에 가진 HTML 하이

퍼링크를 선택하고 싶다고 하면 이렇게 해보자.

a[href][title] {font-weight: bold;}

이렇게 하면 다음 마크업 중 첫 번째 요소만이 볼드체로 표시된다.

<a href="http://www.w3.org/" title="W3C Home">W3C</a><br /><a href="http://www.webstandards.org">Standards Info</a><br /><a title="Not a link">dead.letter</a>

정확한 속성값으로 선택하기

속성으로 요소를 선택할 때 추가적으로 특정한 속성값을 갖는 요소만 처리하도록 선택 방식을

제한할 수도 있다. 웹서버의 특정 문서를 가리키는 하이퍼링크만을 볼드체로 표시하려면 다음

과 같이 해보자.

a[href="http://www.css-discuss.org/about.html"] {font-weight: bold;}

요소의 속성과 속성값을 자유롭게 조합해서 지정할 수 있지만 문서에 정확한 조합이 없을 경

우에는 선택자가 아무것도 선택하지 않는다. 이런 방식은 XML 언어에서 스타일을 처리할 때

유용하게 이용될 수 있다. PanetML로 다시 돌아가서 moons 속성값으로 1을 가지는 planet

요소만을 선택해보자.

planet[moons="1"] {font-weight: bold;}

다음 마크업에선 두 번째 요소만이 볼드체로 표시될 것이다.

<planet>Venus</planet><planet moons="1">Earth</planet><planet moons="2">Mars</planet>

속성만을 사용할 때처럼 속성-값 조합도 여러 개를 동시에 연결해서 사용할 수 있다. http://

www.w3.org를 가리키고, title 속성값으로 W3C Home을 가지는 하이퍼링크만 두 배 크기의

텍스트로 표현하고 싶다면 다음과 같이 해보자.

a[href="http://www.w3.org/"][title="W3C Home"] {font-size: 200%;}

50 l Selectors

이 선택자는 아래 마크업의 첫 번째 링크 텍스트만 두 배 크기로 표현하고 나머지 링크에는 영

향을 주지 않는다.

<a href="http://www.w3.org/" title="W3C Home">W3C</a><br /><a href="http://www.webstandards.org" title="Web Standards Organization">Standards Info</a><br /><a href="http://www.example.org/" title="W3C Home">dead.link</a>

결과는 그림 2-11에서 확인할 수 있다.

그림 2-11. 속성-속성값 조합으로 요소 선택하기

이 방식은 속성값이 정확히 맞아야 하므로 공백으로 분리된 목록을 값으로 가지는 속성

(HTML의 class 같은)들과 함께 사용할 경우에는 문제가 되기도 한다. 다음 예제를 살펴보자.

<planet type="barren rocky">Mercury</planet>

정확한 속성값을 이용해서 이 요소를 선택하는 유일한 방법은 다음과 같이 선택자를 작성하는

것이다.

planet[type="barren rocky"] {font-weight: bold;}

만약 planet[type="barren"]처럼 적어주면 위의 예제에 있는 요소를 선택할 수 없다. 이는

HTML의 class 속성에도 동일하게 적용된다. 다음과 같은 예를 생각해보자.


각별히 주의해야 한다.</p>

정확한 속성값으로 이 요소를 선택하려면 다음과 같이 작성해야 한다.

p[class="urgent warning"] {font-weight: bold;}

이 선택자는 앞서 살펴봤던 점(.)-class 표기법이나 다음 절에서 다룰 선택자와는 동등하지 않

다. 그보다는 class 속성값이 정확하게 urgent warning인(단어의 순서가 정확하고 단어 사

이에 한 개의 스페이스만 있는) p 요소만 선택한다. 따라서 사실상 정확한 문자열string과 일치

한다.

2장 선택자 l 51

또, id 속성을 대상으로 하는 속성 선택자와 id 선택자는 완전히 동일하다고 할 수 없다. 다시

말해서 h1#page-title과 h1[id="page-title"] 사이에는 작지만 결정적인 차이점이 있다.

이 차이점에 대해선 다음 장에서 설명한다.

부분 속성값으로 선택하기

공백으로 구분된 목록을 값으로 허용하는 속성에선 그 값들 중 일부만을 이용해서 요소를 선

택할 수 있다. 그 전형적인 예로 HTML의 class 속성을 들 수 있으며, 이런 속성들은 값으로 하

나 이상의 단어를 가질 수 있다. 우리가 자주 사용하는 아래 예제 텍스트를 생각해보자.


각별히 주의해야 한다.</p>

class 속성에 대한 값으로 warning을 포함하는 요소를 선택한다고 하면 다음과 같은 식으로

속성 선택자를 사용할 수 있다.

p[class~="warning"] {font-weight: bold;}

선택자에 틸데 기호(~)를 사용했음을 유의해서 살펴보자. 이 기호는 스페이스로 나누어진 단어

가 속성값에 있는지를 확인해서 요소를 선택하는 데 핵심적인 역할을 한다. 틸데 기호를 적어

주지 않았을 경우 이전 절에서 얘기했던 대로 값이 정확하게 일치할 때에만 선택된다.

이렇게 작성한 선택자는 앞에서 살펴봤던 점(.)-class 표기법과 동등하므로 p.warning과

p[class~="warning"]은 HTML 문서에 적용될 경우 동일한 역할을 한다. HTML 버전의

PlanetML 마크업을 살펴보자.

<span class="barren rocky">Mercury</span><span class=" cloudy barren">Venus</span><span class="life-bearing cloudy">Earth</span>

class 속성에 barren이란 단어가 들어 있는 요소를 이탤릭체로 표시하고 싶다면 이렇게 하면

된다.

span[class~="barren"] {font-style: italic;}

이 선택자는 그림 2-12에서 확인할 수 있듯이 예제 마크업의 첫 번째와 두 번째 요소를 이탤릭

체로 표시해주며 결국 span.barren {font-style: italic;}을 사용했을 때와 동일한 효과

를 보인다.

52 l Selectors

그림 2-12. 부분 속성값으로 요소 선택하기

그럼 왜 HTML에서 번거롭게 ~= 를 이용한 속성 선택자를 사용할까? 그 답은 이 선택자가

class만이 아니라 어떤 속성에든 사용할 수 있기 때문이다. 문서에 이미지가 아주 많이 삽입되

어 있는데 그 중 일부만이 그림일 경우를 생각해보자. 이런 경우 다음과 같이 title 속성의 일

부를 이용해서 그림를 선택할 수 있게 된다.

img[title~="Figure"] {border: 1px solid gray;}

이 규칙은 title 값에 Figure란 단어를 포함하는 모든 이미지를 선택하게 된다. 그러므로 그

림에 “Figure 4. 머리가 벗겨진 원로 정치인”과 같은 title 값이 주어져 있으면 해당 그림을 선

택할 수 있게 된다. img[title~="Figure"] 선택자는 “How to Figure out Who’s In Charge”과

같은 title 값을 가지는 이미지들까지도 선택하지만 title 속성이 없거나 title에 ‘Figure’

란 단어를 포함하고 있지 않은 이미지는 선택하지 않는다.

CSS2가 완성된 시점에서 한참 뒤에 발표된 진보된 CSS 선택자 모듈에서는 부분적인 속성값을

선택할 수 있는 몇 가지 선택자(명세서에서는 ‘부분 문자열 일치 속성 선택자’라고 부른다)를

더 포함하고 있다. 이 선택자는 인터넷 익스플로러 7을 포함해서 많은 브라우저들이 지원하고

있으며 표 2-1에 간단한 설명이 있다.

표 2-1. 부분 문자열 일치 속성 선택자

유형 설명

[foo^=“bar”] foo속성이“bar”로시작하는요소를선택

[foo$=“bar”] foo속성이“bar”로끝나는요소를선택

[foo*=“bar”] foo속성에“bar”가포함되는요소를선택

다음과 같은 규칙과 마크업을 이용하면 그림 2-13과 같은 결과를 얻을 수 있다.

span[class*="cloud"] {font-style: italic;}span[class^="bar"] {background: silver;}span[class$="y"] {font-weight: bold;}

<span class="barren rocky">Mercury</span><span class="cloudy barren">Venus</span><span class="life-bearing cloudy">Earth</span>

2장 선택자 l 53

그림 2-13. 속성값에 있는 문자열 중 일부를 이용해서 요소를 선택하기

세 규칙 중 첫 번째 규칙은 class 속성에 “cloud”란 문자열을 포함하는 span 요소에 매칭된

다. 그러므로 두 개의 “cloudy” 행성이 선택된다. 두 번째 규칙은 class 속성이 “bar”로 시작되

는 span 요소와 매칭되므로 class 값으로 barren rocky를 가지는 Mercury만이 선택된다.

Venus는 barren이 class 속성의 시작 부분이 아닌 뒷부분에서 나오므로 선택되질 않는다. 마

지막으로 세 번째 규칙은 class 속성이 y로 끝나는 span 요소와 매칭되므로 Mercury와 Earth

가 동시에 선택된다. Venus는 class 값이 y로 끝나질 않으므로 이번에도 선택되지 않는다.

여러분이 상상하는 것처럼 이런 선택자는 다양한 방식으로 활용될 수 있다. 오라일리 웹사이

트로 연결되는 링크에 특별한 스타일을 적용하고 싶다면 그 링크들에 전부 class를 주고 class

에 맞춘 스타일을 작성하는 대신 다음 규칙을 적용해 보자.

a[href*="oreilly.com"] {font-weight: bold;}

물론, class나 href 속성에만 속성 선택자가 적용되는 것은 아니다. 어떤 속성이든 사용할 수

있고 title, alt, src, id 등 여러분이 지정하기만 하면 그 값이나 부분 값을 이용해서 스타일

을 적용시킬 수 있다. 다음 규칙은 구식 table 레이아웃에 사용된 모든 스페이서 GIF 이미지와

URL에 “space”가 포함된 다른 모든 이미지에 적용된다.

img[src*="space"] {border: 5px solid red;}

CauTion! 문자열의 일부만을 이용하는 선택자는 현재 사파리, 오페라, 게코 기반의 브라

우저, 윈도우용 인터넷 익스플로러 7 등에서 지원된다.

특정 속성 선택자

속성 선택자의 마지막 유형으로 특정 속성 선택자가 있으며 이는 직접 예제를 보면서 설명하

는게 더 이해하기 쉽다. 다음 규칙을 살펴보자

*[lang|="en"] {color: white;}

이 규칙은 lang 속성이 en이거나 en-으로 시작되는 요소를 선택해주므로 다음 예제의 세 번째

요소까지는 위 규칙에 해당된다.

54 l Selectors

<h1 lang="en">Hello!</h1><p lang="en-us">Greetings!</p><div lang="en-au">G'day!</div><p lang="fr">Bonjour!</p><h4 lang="cy-en">Jrooana!</h4>

일반적으로 [att|="val"] 형식은 어떤 속성이나 값에도 사용할 수 있다. HTML 문서에

figure-1.gif, figure-2.gif와 같은 일련의 파일이름을 가지는 그림이 있다고 해보자. 그렇다면

다음 선택자로 이 이미지들을 쉽게 선택해낼 수 있다.

img[src|="figure"] {border: 1px solid gray;}

이 유형의 속성 선택자는 lang 속성값에 따라서 요소를 선택할 때 주로 사용된다.

문서 구조 이용하기

앞서 설명했듯이 CSS는 적용될 스타일과 적용 방법을 결정하는데 있어서 문서 구조를 이용하

기 때문에 강력한 힘을 발휘한다. 하지만 스타일과 적용 방법을 결정하는 것만이 CSS가 문서

구조를 이용하는 전부는 아니다. 실제로 구조는 문서에 스타일이 적용되는 데 훨씬 많은 역할

을 한다. 더욱 강력한 선택 방식을 다루기 전에 잠시 구조에 대해 알아보자.

부모-자식 관계 이해하기

선택자와 문서 사이의 관계를 이해하기 위해서 어떻게 문서가 구조화되는지를 다시 한 번 살

펴봐야 한다. 아주 간단한 HTML 문서를 생각해보자.

<html><head> <base href="http://www.meerkat.web/"> <title>Meerkat Central</title></head><body> <h1>Meerkat <em>Central</em></h1> <p> Welcome to Meerkat <em>Central</em>, the <strong>best meerkat web site on <a href="inet.html">the <em>entire</em> Internet</a></strong>!</p> <ul> <li>We offer:

2장 선택자 l 55

<ul> <li><strong>Detailed information</strong> on how to adopt a meerkat <li>Tips for living with a meerkat</li> <li><em>Fun</em> things to do with a meerkat, including: <ol> <li>Playing fetch</li> <li>Digging for food</li> <li>Hide and seek</li> </ol> </li> </ul> </li> <li>...and so much more!</li> </ul> <p> Questions? <a href="mailto:[email protected]">Contact us!</a> </p></body></html>

CSS의 강력함은 상당 부분 요소의 부모-자식 관계를 기반으로 한다. HTML 문서(실제로는 종

류와 상관없이 완전히 구조화된 문서)는 그림 2-14에서와 같이 트리 형태로 표현할 수 있는 요

소 간의 계층 구조를 바탕으로 구조화된다. 이런 계층 구조에서 각 요소는 문서의 전체 구조

중 일부를 차지한다. 각 요소는 다른 요소의 부모 혹은 자식이 되며 둘 다 되는 경우도 많다.

p u

html

head body

base title h1 pl

em em astrong li li

a

em

ul

li li li

li

ol

lili

그림 2-14. 트리형태로 나타낸 문서 구조

56 l Selectors

요소가 문서 구조상으로 다른 요소 바로 위에 있을 경우에 이 요소를 다른 요소의 부모 요소

라 부른다. 예를 들어 그림 2-14의 첫 번째 p 요소는 em과 strong 요소의 부모 요소인 동시에

strong 요소는 anchor(a) 요소의 부모 요소이고, 이 anchor 요소는 또 다른 em 요소의 부모

가 된다. 반대로 요소가 다른 요소의 바로 아래 있으면 자식 요소가 된다. 따라서 그림 2-14의

anchor 요소는 strong 요소의 자식이 되고, strong 요소는 다시 p 요소의 자식이 되며 이런

관계가 계속 이어진다.

부모와 자식이라는 용어는 조상과 자손이라는 용어의 특별한 형태인데 두 용어간의 차이점은

다음과 같다. 요소가 문서 구조상으로 다른 요소의 정확히 한 단계 위에 있으면 부모-자식 관

계가 성립한다. 만약 요소와 다른 요소 간의 경로가 두 단계 이상 이어져 있으면 해당 요소는

조상-자손 관계를 갖게 되고 부모-자식 관계는 더 이상 성립되지 않는다(물론 자식은 자손에

속하고 부모는 조상에 속하지만). 그림 2-14에서 첫 번째 ul 요소는 li 요소 두 개의 부모가

되면서 동시에 그 li 요소 아래 있는 모든 자손 요소에게는 조상 요소가 된다. 이런 방식은 가

장 깊숙히 중첩된 li 요소까지 이어진다.

또, 그림 2-14에서 a 요소는 strong 요소의 자식이면서 p, body, html 요소의 자손 요소가 된

다. body 요소는 브라우저가 기본적으로 표현하게 될 모든 요소의 조상 요소이고, html 요소

는 전체 문서의 조상 요소이다. 이런 이유로 html 요소를 root(최상위) 요소라고 부르기도 한다.

자손 선택자

부모-자식 관계를 이해함으로써 얻을 수 있는 첫 번째 이점은 자손 선택자(문맥 선택자라고도

한다)를 정의할 수 있는 능력이다. 자손 선택자 정의는 특정한 구조를 만족할 때에만 동작하고

그 외에는 전혀 동작하지 않는 규칙을 만드는 것이다. 예를 들어 h1의 자손이 되는 em 요소에

만 스타일을 적용하고 싶다고 생각해보자. h1 안에 들어 있는 모든 em 요소에 class를 부여할

수도 있지만 font 태그를 사용하는 것만큼의 시간이 소모될 것이다. 그보다는 h1 안에 있는

em 요소만 선택하는 규칙을 선언하는 것이 훨씬 효율적이다.

그렇게 하기 위해서 다음과 같은 규칙을 선언해보자.

h1 em {color: gray;}

이 규칙은 h1 요소의 자손 요소인 em 요소들을 회색으로 표시되게 한다. 문단이나 인용 블록

blockquote에 있는 em 요소처럼 그 외의 em 요소에는 이 규칙이 적용되지 않는다. 그림 2-15 를

2장 선택자 l 57

보면 더 명확하게 이해할 수 있다.

그림 2-15. 문맥 구조를 이용해서 요소를 선택하기

자손 선택자에서 규칙의 선택자 부분은 스페이스로 구분된 두 개 이상의 선택자로 구성된다.

선택자 사이의 스페이스는 ‘결합자combinator’의 한 예이다. 각각의 스페이스 결합자는 선택자를

좌측에서 우측으로 읽는 경우에 ‘~안에 있는’, ‘~의 일부분인’, ‘~의 자손인’ 등으로 해석할 수

있다. 따라서 h1 em은 ‘h1의 자손인 모든 em 요소’로 해석된다(선택자를 우측에서 좌측으로 읽

으려면 “em이 h1 요소의 자손이면 지정한 스타일이 em에 적용된다.”고 표현할 수 있다).

당연하겠지만 세 개 이상의 선택자를 사용할 수도 있다. 다음과 같은 예를 생각해보자.

ul ol ul em {color: gray;}

이렇게 하면 그림 2-16에서럼 순서 없는 리스트(Unordered List, UL) 안에 있는 순서 있는

리스트(Ordered List, OL) 아래의 순서 없는 리스트(Unordered List, UL)에 포함된 em

요소만이(복잡하지만 올바른 표현이다) 회색으로 표시된다. 이렇게 하면 아주 구체적인 조건

을 만족하는 요소만을 선택할 수 있다.

그림 2-16. 아주 구체적으로 정의한 자손 선택자

자손 선택자는 매우 강력하다. 이를 이용하면 (아주 많은 font 태그를 사용하지는 않는 한)

HTML로는 절대 할 수 없는 일들을 할 수 있다. 흔한 예제로 사이드바와 메인 영역을 갖는 문

서를 생각해보자. 사이드바는 파란 배경을 가지고, 메인 영역은 하얀 배경을 가진다. 그리고

두 영역 모두 링크 목록을 가지고 있다고 해보자. 사이드바에선 글씨를 읽을 수 없게 되므로

모든 링크를 파란색으로 지정할 수는 없다.

58 l Selectors

자손 선택자를 사용하면 이런 문제를 해결할 수 있다. 이 경우에는 사이드바가 들어 있는 테이

블 셀에 sidebar라는 class를 주고, 메인 영역에는 main이라는 class를 부여한 다음 아래처럼

스타일을 작성하면 된다.

td.sidebar {background: blue;}td.main {background: white;}td.sidebar a:link {color: white;}td.main a:link {color: blue;}

결과는 그림 2-17과 같다.

그림 2-17. 자손 선택자를 이용해서 같은 유형의 요소에 다른 스타일 적용하기

Tip :link는 아직 방문하지 않은 링크를 나타낸다. 이에 대해선 이번 장 후반부에서 얘

기하도록 하자.

또 다른 예제로 인용 블록blockquote과 문단에 있는 b(볼드체) 요소를 회색으로 표시하고 싶다고

해보자.

blockquote b, p b {color: gray;}

이렇게 하면 인용블록이나 문단의 자손인 b 요소는 회색으로 표시된다.

자손 선택자는 두 요소가 아주 멀리 떨어져있더라도 상관이 없다. 한 예로 ul em 선택자는 두

요소 사이에 얼마나 많은 구조상의 단계가 있든지 상관없이 ul 요소의 자손인 em 요소를 선택

한다. 그러므로 다음 마크업에서도 ul em은 em 요소를 선택하게 된다.

<ul><li>List item 1<ol><li>List item 1-1</li><li>List item 1-2</li><li>List item 1-3<ol>

2장 선택자 l 59

<li>List item 1-3-1</li><li>List item <em>1-3-2</em></li><li>List item 1-3-3</li></ol></li><li>List item 1-4</li></ol></li></ul>

자식 요소 선택하기

가끔은 멀리 떨어진 자손 요소를 선택하기 보단 범위를 줄여서 어떤 요소의 자식 요소만을 선

택하고 싶을 때가 있다. 예를 들어 h1 요소의 자식(조상과 대립되는) 요소인 strong만을 선택

하고 싶다고 해보자. 이렇게 하기 위해선 자식 결합자(>)를 사용하면 된다.

h1 > strong {color: red;}

이 규칙은 아래 마크업에 있는 첫 번째 h1 요소의 strong 요소만 빨간색으로 만든다.

<h1>This is <strong>very</strong> important.</h1><h1>This is <em>really <strong>very</strong></em> important.</h1>

우측에서 좌측으로 읽으면 h1 > strong 선택자는 “선택할 strong 요소는 h1 요소의 자식

이다.”와 같이 해석할 수 있다(좌측에서 우측으로 읽을 경우에는 “h1 요소의 자식이 되는 모든

strong 요소를 선택”이라고 해석할 수 있다). 자식 결합자의 앞뒤로는 공백이 와도 상관이 없

으므로 h1 > strong, h1> strong, h1>strong은 모두 동등하다. 공백을 모두 제거해버려도

상관은 없다.

문서를 트리 구조로 보면 자식 선택자가 트리상으로 직접 연결된 요소에만 선택을 국한시킨다

는 점을 쉽게 이해할 수 있다. 그림 2-18에 문서 트리 구조의 일부를 나타냈다.

p

span

strong

spana

그림 2-18. 문서 트리 중 일부

이 트리 구조를 보면 부모-자식 관계를 쉽게 확인할 수 있다. 예를 들어 a 요소는 strong 요

소의 부모 요소지만 p 요소에게는 자식 요소가 된다. 이 구조에는 p > a 와 a > strong 등이

60 l Selectors

매칭될 수 있지만 strong 요소는 p의 자손 요소일 뿐 자식 요소는 아니므로 p > strong에는

매칭되지 않는다.

하나의 선택자로 자손과 자식 조합을 연결할 수도 있다. 따라서 table.summary td > p는

class가 summary인 table 요소의 자손인 td 요소의 자식 요소 p를 모두 선택한다

인접 형제 요소 선택하기

제목 바로 뒤에 나오는 문단에 특별한 스타일을 적용하고 싶다거나 문단 바로 뒤에 나오는 리

스트에 특별히 마진을 주고 싶다고 가정해보자. 같은 부모를 갖는 두 요소에서 특정 요소 바로

다음에 위치한 요소를 선택하려면 플러스 기호(+)로 표시되는 인접 형제adjacent sibling 결합자를

사용하면 된다. 자식 결합자처럼 이 기호 앞뒤로는 CSS 작성자의 기호에 따라서 공백을 넣어

도 상관없다.

h1 요소 바로 다음에 나오는 문단의 상단 마진을 없애려면 다음과 같이 해보자.

h1 + p {margin-top: 0;}

이 선택자는 “h1 요소 바로 뒤에 나오고 h1 요소와 동일한 부모를 갖는 p 요소를 선택한다.”라

고 읽으면 된다.

이 선택자가 어떻게 동작하는지를 시각적으로 파악하는 가장 쉬운 방법은 문서 트리 구조의

일부를 다시 한 번 생각해보는 것이다.

div

ol ul

li lili li lili

그림 2-19. 문서 트리 중 또 다른 일부분

그림을 보면 div 요소 밑으로 순서가 있고 없는 두 개의 리스트가 존재하고, 각 리스트 밑에는

세 개씩 리스트 아이템이 놓인다. 두 리스트는 인접한 형제이고 리스트 아이템들 또한 인접한

형제이다. 그러나 첫 번째 리스트의 리스트 아이템은 두 번째 리스트의 리스트 아이템과 부모

요소를 공유하지 않으므로 형제 관계가 아니다(사촌 요소라고 하는게 제일 좋을 것 같다).

2장 선택자 l 61

한 개의 결합자combinator를 사용했을 때 두 개의 인접한 형제 요소 중 두 번째 나오는 요소만 선

택할 수 있다는 점을 기억하자. 따라서 li+li {font-weight: bold;}를 이용하면 리스트의

두 번째와 세 번째 리스트 아이템만 볼드체로 표시된다. 그림 2-20에서처럼 첫 번째 리스트 아

이템은 영향을 받지 않는다.

인접 형제 선택자가 제대로 동작하려면 두 개의 요소가 CSS상에서 ‘소스 순서’대로 위치해야

한다. 위 예제에서는 ol 요소 다음에 ul 요소가 나왔다. 이렇게 배치된 경우 ol + ul 선택자

로 두 번째 요소(ul)을 선택할 수 있지만, 이와 유사한 문법을 사용해서 첫 번째 요소를 선택하

는 것은 불가능하다. ul + ol 선택자를 이용하려면 순서 없는 리스트 바로 다음에 순서 있는

리스트가 위치해야만 한다.

그림 2-20. 인접한 형제 요소를 선택하기

그리고 두 요소 사이에 있는 텍스트는 인접 형제 결합자가 동작하는데 영향을 주지 않는다. 그

림 2-19에서와 똑같은 트리 구조를 갖는 마크업을 예로 들어보자.

<div><ol><li>리스트 아이템 1</li><li>리스트 아이템 1</li><li>리스트 아이템 1</li></ol>'div'요소에 포함된 텍스트.<ul><li>리스트 아이템</li><li>다른 리스트 아이템</li><li>역시 다른 리스트 아이템</li></ul></div>

62 l Selectors

두 리스트 사이에 텍스트가 있더라도 ol+ul 선택자는 여전히 두 번째 리스트를 선택하게 된

다. 중간에 있는 텍스트는 부모인 div 요소의 일부일 뿐 인접 요소에 포함되지 않으므로 이런

식으로 동작하게 되지만 만약 이 텍스트를 p 요소로 감싸주면 ol+ul은 두 번째 리스트를 선택

하지 못하게 되고 이 리스트를 선택하려면 ol+p+ul을 사용해야 한다.

다음 예제에서처럼 인접 형제 결합자는 다른 결합자와 함께 사용할 수 있다.

html > body table + ul{margin-top: 1.5em;}

이 선택자는 “html의 자식인 body 요소의 자손 table 바로 뒤에 위치한 ul”과 같이 해석할

수 있다.

CauTion! 윈도우용 인터넷 익스플로러 6까지는 자식 선택자와 인접 형제 선택자를 제대

로 지원하지 않지만 인터넷 익스플로러 7은 둘 다 지원한다.

가상 class와 가상 요소

가상 class와 가상 요소pseudo element 선택자를 이용하면 매우 흥미로운 일들이 벌어진다. 이 선

택자는 문서 내에 반드시 존재하지 않아도 되는 구조에 스타일을 부여하거나, 특정 요소 또는

문서 자체의 상태를 추정해서 만들어진 유령phantom class에 스타일을 지정할 수 있게 해준다.

다시 말해서 문서 구조를 이용하지 않고 다른 방식으로 문서 일부에 스타일을 적용시킨다는

뜻이고, 어떤 면에서는 문서의 마크업을 살펴보는 것만으로는 이런 스타일을 정확하게 추정할

수 없다는 의미이다.

스타일을 무작위로random 적용시킨다는 말처럼 들릴 수도 있지만 그런 뜻이 아니라 미리 예측

할 수 없는 순간적인 상황에 따라 스타일을 적용시킨다는 의미이다. 하지만 이렇게 스타일이

적용될 상황은 사실 잘 정의되어 있다. 이런 방식을 다음과 같이 생각해보자. 스포츠 경기 중

에 홈 팀이 점수를 내면 관중들이 환호할 것이다. 게임 도중 언제 홈 팀이 점수를 올릴지 정확

히 알 수는 없지만 일단 점수를 올리기만 하면 예측했던 것처럼 관중이 환호를 보낸다. 원인이

되는 시점을 예측할 수 없다는 사실은 기대되는 효과를 추측하는데 아무런 영향을 미치지 않

는다.

2장 선택자 l 63

가상 class 선택자

다른 가상 선택자보다 브라우저가 잘 지원하기 때문에 더 널리 사용되는 가상 class 선택자를

먼저 알아보자.

HTML과 XHTML에서 문서를 서로 연결시켜주는 앵커 요소 (a)를 생각해보자. 당연히 앵커는

변함없이 앵커이지만 일부 앵커는 이전에 방문했던 페이지를 가리키는 반면에 나머지는 아직

방문하지 않은 페이지를 가리킨다. 단순히 HTML 마크업을 살펴봐서는 모든 링크가 똑같이

보이기 때문에 이런 차이를 알 수 없다. 어떤 링크가 이미 방문했던 링크인지 알 수 있는 한 가

지 방법은 문서의 링크를 사용자 브라우저의 방문 기록history과 비교해보는 것이다. 실제로 앵커

에는 방문한 앵커와 방문하지 않은 앵커 두 가지 유형이 있다. 이런 유형을 가상 class라고 부르고,

이 가상 class를 이용하는 선택자를 가상 class 선택자라고 한다.

이 class와 선택자를 더 잘 이해하기 위해서 브라우저가 링크를 어떻게 다루는지를 생각해보

자. 모자이크 브라우저는 방문하지 않은 페이지로 연결되는 링크를 파란색으로, 이미 방문한

페이지 링크는 빨간색(인터넷 익스플로러 브라우저처럼 나중에 등장한 브라우저에서는 보라

색으로 바뀜)으로 표시하는 관례를 만들었다. 그래서 만약 여러분이 앵커에 class를 부여한다

면 이미 방문한 앵커는 “visited” 같은 class를 가질 것이고 그러면 이 앵커만 빨간색으로 표시되

도록 스타일을 작성할 수 있다.

a.visited {color: red;}

<a href="http://www.w3.org/" class="visited">W3C Web site</a>

그러나 이 방법을 사용할 경우 새로운 페이지를 방문할 때마다 앵커의 class가 변경되어야 하

기 때문에 좋은 방법이 아니다. 그 대신 CSS는 방문한 페이지로 연결된 링크를 “visited” class

가 지정된 것처럼 동작하게 만들어주는 가상 class를 정의하고 있다.

a:visited {color: red;}

이제 class 속성을 추가해주지 않고도 방문한 페이지를 가리키는 모든 앵커를 빨간색으로 표

현할 수 있다. 규칙에 콜론(:)이 있는 것을 주의깊게 보기 바란다. a와 visited를 구분해주는

이 콜론은 가상 class, 또는 가상 요소를 나타내는 명함calling card이다. 가상 class와 가상 요소를

지정하는 모든 키워드 앞에는 이 콜론이 붙게 된다.

64 l Selectors

링크에 대한 가상 class

CSS2.1에선 하이퍼링크에만 적용되는 두 가지 가상 class를 제공한다. HTML과 XHTML 1.0,

1.1에서 하이퍼링크는 href 속성을 가진 a 요소를 의미하지만 XML에선 다른 리소스(문서나

기타 파일)로 연결해주는 역할을 하는 모든 요소가 하이퍼링크가 될 수 있다. 이 두 가지 가상

class에 대한 설명은 표 2-2를 참고하자.

표 2-2. 링크에 대한 가상 class

이름 설명

:link 하이퍼링크이면서(다시말해서href속성을가진)아직방문하지않은주소를가리키는앵커를의미한다.일부브라우저에선:link를방문여부와상관없이그저하이퍼링크인경우로잘못해석하기도한다.

:visited 이미방문한주소를가리키는하이퍼링크를의미한다.

표 2-2의 첫 번째 가상 class는 조금 포괄적이라고 생각될 수도 있다. 어쨌든 앵커를 아직 방문

하지 않았다면 가상 class는 unvisited가 되야 하지 않을까? 만약 그렇다면 다음과 같이 작성하

기만 하면 된다.

a {color: blue;}a:visited {color: red;}

이 규칙은 합리적으로 보이지만 실제로는 충분하지가 않다. 위 예제의 첫 번째 규칙은 방문하

지 않은 링크뿐 아니라 다음과 같은 타겟 앵커에도 적용된다.

<a name="section4">4. The Lives of Meerkats</a>

이 예제는 위에 나온 a {color: blue;} 규칙 때문에 파란 색으로 표시된다. 링크 스타일이

타겟 링크에 적용되지 않게하기 위해선 가상 class :link를 사용해야 한다.

a:link {color: blue;} /* 방문하지 않은 링크는 파란색 */a:visited {color: red;} /* 방문한 링크는 빨간색 */

이미 알아차렸을 수도 있지만 :link나 :visited 같은 가상 class 선택자는 body의 link나

vlink 속성과 기능상으로 동일하다. HTML 3.2에서 방문한 적이 없는 모든 앵커를 보라색으

로, 이미 방문한 앵커는 은색으로 표시하고 싶을 경우 다음과 같이 하면 된다.

<body link="purple" vlink="silver">

2장 선택자 l 65

CSS에서는 다음 규칙으로 동일한 효과를 얻을 수 있다.

a:link {color: purple;}a:visited {color: silver;}

물론 CSS 가상 class에는 색 외에 다른 스타일들도 얼마든지 적용할 수 있다. 이미 방문해본 링

크를 그림 2-21처럼 가운데에 선이 그어진 은색의 이탤릭체로 표시하고 싶다고 해보자.

그림 2-21. 이미 방문한 링크에 여러가지 스타일을 적용시키기

다음과 같이 간단하게 스타일 몇 개만 선언하면 된다.

a:visited {color: silver; text-decoration: line-through; font-style: italic;}

class 선택자를 돌아보고 class 선택자와 가상 class가 어떻게 조합될 수 있는지 알아볼 좋은 기

회다. 예를 들어 여러분의 사이트가 아닌 다른 사이트를 가리키는 링크의 색을 바꾸고 싶다고

생각해보자. 여러분이 각각의 앵커에 class를 지정한다면 간단히 처리할 수 있다.

<a href="http://www.mysite.net/">My home page</a><a href="http://www.site.net/" class="external">Another home page</a>

외부 링크에 다른 스타일을 적용시키기 위해 아래와 같은 규칙을 사용했다.

a.external:link, a.external:visited {color: maroon;}

이제 앞 예제에 있던 두 번째 링크는 적갈색으로 표시되지만 첫 번째 링크는 여전히 하이퍼링

크를 위한 기본 색(대개 파랑)으로 표시된다.

id 선택자와 함께 사용할 때에도 동일한 문법이 사용된다.

a#footer-copyright:link {font-weight: bold;}a#footer-copyright:visited {font-weight: normal;}

:link나 :visited는 매우 유용하긴 하지만 한 번 페이지가 그려지고 나면 이런 것들로는 스

66 l Selectors

타일에 변화를 줄 수 없다. CSS2.1에는 이렇게 정적인 가상 class만 있는게 아니므로 이젠 동적

인 가상 class들에 대해서도 알아보자.

동적인 가상 class

CSS2.1에서는 사용자의 행동에 따라 모양이 달라지게 할 수 있는 세 가지 가상 class를 제공하

고 있다. 이런 동적인 가상 class들은 전통적으로 하이퍼링크에 스타일을 적용하기 위해 사용

되어져 왔지만, 훨씬 큰 가능성을 갖고 있다. 동적인 가상 class들에 대해서는 표 2-3에 정리되

어 있다.

표 2-3. 동적인 가상 class들

이름 설명

:focus 현재입력포커스를갖고있는요소에적용된다(예를들어키보드입력을받아들일수있거나기타다른방법으로활성화된상태).

:hover 마우스포인터가위치해있는요소를나타낸다(예를들어하이퍼링크위에마우스가올려져있는경우).

:active 사용자의입력에의해활성화된요소를나타낸다(예를들어마우스버튼을누른채로하이퍼링크를클릭한상태).

동적인 가상 class들은 :link나 :visited처럼 하이퍼링크와 함께 널리 사용되므로 많은 웹페

이지에서 다음과 같은 스타일을 찾아볼 수 있다.

a:link {color: navy;}a:visited {color: gray;}a:hover {color: red;}a:active {color: yellow;}

처음 두 규칙은 정적인 가상 class이고 나머지 두 규칙은 동적인 가상 class를 사용하고 있다.

:active는 HTML 3.2의 alink 속성과 비슷하지만, :active를 이용하면 링크색뿐 아니라 원

하는 모든 스타일을 적용시킬 수 있다.

2장 선택자 l 67

Tip가상 class의 순서는 보기보다 훨씬 중요하다. 요즘에는 ‘link-visited-focus-hover-

active’ 순으로 바뀌는 추세이긴 하지만 일반적으로는 ‘link-visited-hover-active’

순서로 사용하는 것을 권장한다. 다음 장에서 이 순서가 왜 중요한지 설명하고 (상

황에 따라서) 권장하는 순서를 바꾸거나 심지어 무시하는 쪽을 선택해도 되는 몇 가

지 이유를 알아볼 것이다.

동적인 가상 class는 요소의 종류와 상관없이 적용시킬 수 있다는 점에 주목하기 바란다. 이 사

실은 링크 요소가 아닌 다른 요소에 동적으로 스타일을 적용시키는 데 유용할 경우가 많기 때

문에 장점이라 할 수 있다. 예로 아래와 같은 마크업을 작성하면 그림 2-22처럼 키보드 입력을

받을 준비가 되어 있는 폼 요소를 강조해서 보여줄 수 있다.

input:focus {background: silver; font-weight: bold;}

그림 2-22. 포커스를 갖고 있는 폼 요소를 강조해서 보여주기.

임의의 요소에 동적인 가상 class를 적용하면 신기한 것들을 할 수 있다. 예를 들어 다음과 같

이 사용자들에게 ‘강조’ 효과를 보여줄 수 있게 된다.

body *:hover {background: yellow;}

이 규칙은 body 요소 안에 있는 모든 요소의 배경색을 hover(마우스가 머물고 있는) 상태일 때

노란색으로 표현해준다. 제목, 문단, 리스트, 테이블, 이미지, 그리고 body 안에 있는 그 밖의

모든 요소의 배경색이 노란색으로 바뀔 것이다. 폰트를 바꾸거나 마우스가 머무는 요소 주위

에 보더를 넣을 수도 있고, 그 외에 브라우저가 허용하는 모든 것들을 바꿀 수 있다.

CauTion! 윈도우용 인터넷 익스플로러 6에선 동적인 가상 class는 하이퍼링크에만 허용

된다. 인터넷 익스플로러 7에선 모든 요소에 가상 class :hover를 사용할 수 있

지만 form 요소들에서는 여전히 :focus를 사용할 수 없다.

68 l Selectors

동적인 스타일을 사용할 때의 현실적인 문제점

동적인 가상 class에는 몇 가지 작은 문제가 있다. 예를 들어 그림 2-23처럼 방문했거나 방문하

지 않은 링크에 특정한 폰트 크기를 지정하고 hover된 링크에는 조금 더 큰 크기로 폰트를 지

정할 수 있다.

a:link, a:visited {font-size: 13px;}a:hover {font-size: 20px;}

그림 2-23. 동적인 가상 class로 레이아웃이 바뀐 상황

그림에서 볼 수 있는 것처럼 사용자 에이전트는 마우스 포인터가 머무는 동안에 앵커의 폰트

크기를 키우게 된다. 이런 기능을 지원하는 사용자 에이전트는 앵커가 hover 상태에 있을 때

문서를 다시 렌더링해야 하는데, 그러면 hover된 링크 다음에 오는 모든 콘텐츠를 다시 배치해

야 하는 상황이 발생할 수도 있다.

하지만, CSS 명세서는 최초 표현을 위해 문서가 한 번 그려진 다음에는 문서를 다시 그릴 필요

가 없다고 명시하고 있기 때문에 여러분이 의도했던 효과가 적용될 것이라고 완벽하게 신뢰할

수는 없다. 그래서 이런 효과에 의존하는 디자인을 사용하지 말 것을 강력히 권장하는 바이다.

첫 번째 자식 요소 선택하기

또 다른 정적인 가상 class로는 :first-child가 있는데 어떤 요소의 첫 번째 자식 요소를 선택

하는데 사용된다. 이 특수한 가상 class를 잘못 이해하는 경우가 많은데, 예제를 확장시키면서

살펴보겠다. 먼저 다음 마크업을 생각해보자.

<div><p>These are the necessary steps:</p><ul><li>Insert key</li><li>Turn key <strong>clockwise</strong></li><li>Push accelerator</li></ul>

2장 선택자 l 69

<p>Do <em>not</em> push the brake at the same time as the accelerator.</p></div>

위 예제에서 첫 번째 자식 요소는 첫 번째 p, 첫 번째 li, 그리고 strong과 em 요소이다. 여기

에 다음 두 규칙을 적용하면 그림 2-24 같은 결과를 얻는다.

p:first-child {font-weight: bold;}li:first-child {text-transform: uppercase;}

그림 2-24. 첫 번째 자식에 스타일 적용하기

첫 번째 규칙은 어떤 요소의 첫 번째 자식인 모든 p 요소를 볼드체로 만들고, 두 번째 규칙은

어떤 요소(HTML이라면 언제나 ul이나 ol 요소여야 한다)의 첫 번째 자식인 모든 li 요소를

대문자로 표시하게 만든다.

가장 흔히 할 수 있는 착각은 p:first-child 같은 선택자가 p 요소의 첫 번째 자식 요소를 선

택할 것이라고 생각하는 것이다. 하지만 가상 class는 가상 class와 결합하는 요소에 일종의 유

령 class를 추가해주는 특성을 갖는다는 점을 기억해야 한다. 만약 여러분이 마크업에 실제

class를 부여했다면 다음과 같을 것이다.

<div><p class="first-child">These are the necessary steps:</p><ul><li class="first-child">Insert key</li><li>Turn key <strong class="first-child">clockwise</strong></li><li>Push accelerator</li></ul><p>Do <em class="first-child">not</em> push the brake at the same time as theaccelerator.</p></div>

70 l Selectors

따라서 어떤 요소의 첫 번째 자식인 em 요소를 선택하려면 em:first-child 선택자를 사용해

야 한다. :first-child 선택자를 이용하면 리스트의 첫 번째 아이템(li)이나, div의 첫 번째

문단, tr의 첫 번째 td 같은 요소에 스타일을 줄 수 있다.

CauTion! 윈도우용 인터넷 익스플로러 6까지는 :first-child를 지원하지 않지만, 인터

넷 익스플로러 7은 지원한다.

언어를 이용해서 선택하기

사용된 언어를 기반으로 요소를 선택하려면 :lang( ) 가상 class를 사용하면 된다. 이 가상

class가 일치하는 패턴을 찾은 방식은 |= 속성 선택자와 정확히 동일하다. 예를 들어 프랑스어

로 작성된 요소만 이택릭체로 표현하려면 다음과 같이 적성할 것이다.

*:lang(fr) {font-style: italic;}

이 가상 선택자와 속성 선택자의 가장 큰 차이점은 다양한 언어 정보를 이용할 수 있으며 그

중 일부는 요소 외부에 있다는 점이다. 이 점을 CSS2.1은 다음과 같이 명시하고 있다.

HTML에서는 lang 속성과 meta 요소, 그리고 프로토콜에 담긴 정보(HTTP 헤더 같은)를

조합해서 언어를 결정한다. XML은 xml:lang이라는 속성을 사용하고, 다른 문서 언어에서

는 독자적인 다른 언어 결정 방식을 사용할 수도 있다.

따라서 lang 가상 class가 속성 선택자보다 더 유연하기 때문에 언어에 따라 스타일을 적용할

때에는 가상 class를 사용하는 것이 대부분 더 나은 선택이다.

가상 class를 조합해서 사용하기

CSS2.1에서는 하나의 선택자 안에서 여러 개의 가상 class를 조합해서 사용할 수 있다. 예를 들

어 마우스가 아직 방문하지 않은 링크 위에 머물 때에는 빨간색으로, 방문한 링크에 머물 때에

는 적갈색으로 표현할 수 있다.

a:link:hover {color: red;}a:visited:hover {color: maroon;}

순서는 그리 중요하지 않으므로 a:link:hover를 a:hover:link처럼 사용해도 동일한 효과를

낸다. 특정 언어를 사용하는 앵커에 마우스가 올라갔을 때 별도의 스타일이 적용되게 할 수도

2장 선택자 l 71

있다. 독일어를 예로 들어보자.

a:link:hover:lang(de) {color: gray;}a:visited:hover:lang(de) {color: silver;}

서로 배타적인 가상 class들을 조합하지 않도록 주의해야 한다. 예를 들어 링크는 방문했거나

방문하지 않을 수는 있지만 두 조건을 동시에 만족시킬 수는 없다. 그러므로 a:link:visited

는 이치에 맞지 않는다. 사용자 에이전트는 대부분 이런 선택자를 무시하기 때문에 규칙 전체

가 무시되겠지만 브라우저에 따라 이런 오류를 처리하는 방식이 다를 수 있기 때문에 완전히

신뢰할 수는 없다.

CauTion! 윈도우용 인터넷 익스플로러 중 인터넷 익스플로러 6까지는 가상 class를 조합

해서 사용하면 제대로 처리하지 못한다. class 값을 조합했을 때처럼 조합된 가

상 class들 중 제일 뒤에 나온 것을 사용하게 되므로 구 버전의 윈도우용 인터

넷 익스플로러에서 a:link:hover는 :link 여부와 상관없이 :hover만으로 요

소를 선택한다. 하지만 인터넷 익스플로러 7에선 가상 class를 조합해서 사용

해도 정확하게 처리한다.

가상 요소 선택자

가상 class가 앵커에 유령 class를 지정해주는 것처럼 가상 요소는 문서에 어떤 효과를 주기 위

해 가상으로 요소를 삽입해준다. CSS2.1에는 첫 글자, 첫 줄, 이전과 다음 요소 등에 스타일을 지

정하기 위한 가상 요소 네 개를 정의하고 있다(CSS2.1에는 네 개의 가상 요소가 정의되어 있는데

요소의 첫 번째 문자, 첫 번째 줄, 그리고 요소의 앞과 뒤에 스타일을 적용하는 데 사용된다).

첫 번째 글자에 스타일 지정하기

첫 번째 가상 요소인 :first-letter는 블록 레벨 요소의 첫 번째 문자에만 스타일을 부여한다.

p:first-letter {color: red;}

위 규칙을 이용하면 모든 문단의 첫 글자는 빨간색이 된다. 비슷한 방법을 사용하면 h2 요소의

첫 글자만 두 배 크기로 표시할 수도 있다.

h2:first-letter {font-size: 200%;}

72 l Selectors

이를 적용한 결과는 그림 2-25 와 같다.

그림 2-25. 가상 요소 :first-letter 의 적용 예

이 규칙은 앞서 언급했던 것처럼 사용자 에이전트가 h2 요소 각각의 첫 번째 문자를 감싸고 있는

가상적인 요소에 특별한 효과를 줄 수 있게 해준다. 이 가상적인 요소는 다음과 같이 나타낼 수 있

다.

<h2><h2:first-letter>T</h2:first-letter>his is an h2 element</h2>

:first-letter에 지정한 스타일은 예제에 있는 가상 요소 안의 콘텐츠에만 적용된다.

<h2:first-letter> 요소는 문서 소스에는 존재하지 않지만 사용자 에이전트가 문서를 해석

하면서 실시간으로 만들어내고, 이렇게 만들어진 요소 안에 있는 텍스트에 :first-letter 스

타일이 적용된다. 즉, <h2:first-letter>는 가상의 요소이다. 어떤 태그도 새로 삽입할 필요

가 없다는 점을 기억하기 바란다. 사용자 에이전트가 여러분 대신 이 일을 처리해 줄 것이다.

첫 번째 줄에 스타일 적용하기

:first-line은 비슷한 방식으로 요소의 첫 번째 줄에 있는 텍스트에 영향을 준다. 예를 들어

문서의 각 문단 첫 번째 줄을 회색으로 표현할 수 있다.

p:first-line {color: gray;}

그림 2-26을 보면 각 문단의 첫 줄에 이 스타일이 적용되어 있는 걸 확인할 수 있다. 이는 디스

플레이 영역의 너비와는 상관이 없기 때문에 첫 줄이 다섯 개의 단어로 이루어진다면 이 다섯

개의 단어만이 회색으로 표시되고, 30개의 단어로 이뤄지는 경우라면 30개의 단어 모두가 회

색으로 표시된다.

그림 2-26. 가상 요소 :first-line의 적용 예

2장 선택자 l 73

텍스트 중 ‘이 문단’ 에서 ‘스타일시트만’ 까지만 회색으로 표시되게 되므로 사용자 에이전트가

사용하는 가상의 마크업은 다음과 같을 것이다.

<p><p:first-line>이 문단 텍스트에는 오직 하나의 스타일시트만</p:first-line>적용되었다. 스타일이 적용되어서 첫 번째 라인

만 회색으로 표현되고 나머지...

첫 줄에 단어가 5개만 들어가도록 수정을 가하면 가상의 </p:first-line>은 단어 ‘하나의’ 뒤

로 옮겨지게 된다.

:first-letter와 :first-line의 제한 사항

CSS2에선 가상 요소 :first-line과 :first-letter는 제목이나 문단 같은 블록 레벨 요소에

서만 사용할 수 있으므로 하이퍼링크 같은 인라인 요소에선 이런 가상 요소를 사용할 수 없다.

하지만 CSS2.1에선 :first-letter를 어떤 요소에서나 사용할 수 있게 되었다. 또, :first-

line과 :first-letter에는 CSS의 속성들 중 일부밖에는 사용할 수가 없다. 이 때 사용 가능

한 속성들은 표 2-4를 참고하자.

표 2-4. 가상 요소에서 사용가능한 속성들

:first-letter :first-line

모든font속성들 모든font속성들

color color

모든background속성들 모든background속성들

모든margin속성들 word-spacing

모든padding속성들 letter-spacing

모든border속성들 text-decoration

text-decoration vertical-align

vertical-align(float이none으로설정돼있다면) text-transform

text-transform line-height

line-height clear(CSS2에서만가능,CSS2.1에선제거됨)

float text-shadow(CSS2에서만가능)

letter-spacing(CSS2.1에서추가됨)

word-spacing(CSS2.1에서추가됨)

clear(CSS2에서만가능,CSS2.1에선제거됨)

text-shadow(CSS2에서만가능)

74 l Selectors

또한, 모든 가상 요소는 가상 요소가 지정된 선택자의 끝에서만 사용될 수 있다. 그러므로 선

택자의 표적(열거된 요소 중 마지막 요소) 앞에 가상 요소가 사용된 p:first-line em 선택자

는 올바르지 않다. CSS2.1에 정의된 두 개의 나머지 가상 요소에도 동일한 규칙이 적용된다.

요소 앞, 뒤에 스타일 적용하기

인쇄물 같은 효과를 주기 위해서 모든 h2 요소 앞에 은색 꺽쇠 기호(])를 두 개씩 넣는다고 생

각해보자.

h2:before {content: "]]"; color: silver;}

CSS2.1에서는 문서에 생성된 콘텐츠generated content를 넣고 여기에 가상 요소인 :before와

:after를 사용해서 직접 스타일을 적용시킬 수 있다. 그림 2-27에서 이런 효과를 확인할 수

있다.

그림 2-27. 요소 앞에 콘텐츠 끼워넣기

이 가상 요소는 생성된 콘텐츠를 삽입하고 스타일을 부여하는 데 사용된다. 요소 뒤에 콘텐츠

를 넣으려면 :after 가상 요소를 사용하면 된다. 다음 규칙을 이용하면 문서를 특별한 효과로

끝맺을 수 있다.

body:after {content: " The End.";}

생성된 콘텐츠는 별개의 주제이며, :before와 :after에 관한 자세한 설명을 포함한 전체 내

용은 12장에서 상세히 다룰 것이다.

2장 선택자 l 75

요약

문서 언어를 기반으로 하는 선택자를 이용하면 다수의 유사한 요소에 적용되는 CSS 규칙도 제

한적인 범위에만 적용되는 규칙을 작성하는 것처럼 쉽게 작성할 수 있다. 선택자와 규칙을 그

룹화시키면 스타일시트를 작고 유연하게 만들 수 있는데, 파일 크기가 작아지므로 전송 시간

을 줄이는 효과도 얻게 된다.

선택자를 제대로 해석하지 못하면 사용자 에이전트가 CSS를 전혀 이용할 수 없게 되므로 사용

자 에이전트는 선택자를 반드시 정확하게 처리해야 한다. 반대로 잘못된 선택자로 인해서 에

러가 발생하면 사용자 에이전트가 스타일을 의도했던 대로 적용시키지 못하기 때문에 선택자

를 올바르게 작성하는 것은 제작자에게 있어서 매우 중요하다. 선택자와 선택자의 조합 방식

을 정확하게 이해하려면 선택자와 문서 구조가 어떻게 연결되고 요소에 적용될 스타일을 결정

할 때 상속이나 캐스케이딩 같은 방식이 어떻게 작용하는지를 반드시 알아야 한다. 다음 장에

서 이런 주제를 다룬다.