CSS 선택자(Selector)의 종류 및 간단한 효과주기
이 강좌는 월간 w.e.b. HOW TO 2011년 02호에 게재되어 있습니다.
언제부터인가 우리의 웹은 이미지에 의존하는 웹페이지, 또한 당연하다는 듯이 각종 오브젝트 타입의 컨텐츠를 무분별하게 사용하여 무거운 웹사이트를 구축했었고 또, 대부분의 웹사이트들은 웹표준이나 웹접근성 보다는 화려한 그래픽으로 특정브라우저에 맞춰진 Content Design으로 처리해 왔다.
그러나 기존 포토샵 같은 이미지편집 Tool이나 플래시 같은 모션그래픽 툴로 밖에 할 수 없었던 효과들이 CSS3를 사용함으로써 많은 부분 코드 몇 줄 만으로 가능하게 되었다.
같은 조건의 서비스라면 더 가벼워지고 빠른 로딩속도는 덤으로 가질 수 있게 된 건 물론이다.
이번 연재에서는 기본적이지만 매우 중요한 선택자의 종류와 몇 가지 CSS3 주요속성을 가지고 여러 효과를 주는 방법에 대해 살펴보자.
연재순서:
- CSS 선택자(Selector)의 종류 및 간단한 효과주기
- CSS3를 이용해 다양한 타이포그래피 만들기
- CSS3를 이용한 이미지편집/효과주기(2D/3D)
- 플래시보다 쉽게 구조화되고 다이내믹한 메뉴 만들기
- 툴을 이용하여 애니메이션을 만들어보자!
CSS3 배경 및 변화 된 점
시간이 갈수록 시맨틱한 웹, 웹표준과 웹접근성이 점점 강조되는 때인 지금 모든 웹사이트가 HTML(구조)+CSS(표현)+JS(동작) 세가지 계층을 분리하여 웹을 제대로 만드는 것이 중요한 이슈가 되면서 점점 세가지를 분리하고 디자인 컨텐츠를 좀 더 다양하고 모듈화 된 형태로 개발할 필요성을 느꼈기 때문에 CSS3가 그에 발맞추어 개발 진행 중이다.
아직 완전한 형태의 표준은 아니나 CSS3의 대부분의 기능을 지원하는 브라우저가 이미 나온 상태이며 최신 버전의 브라우저 들이 나올 때마다 더 많은 부분을 수용하고 포함할 것이다.
CSS3를 이용해 모바일용 웹 애플리케이션은 만들어지고 있지만, 일반 데스크톱 웹 환경에서는 아직 모바일에 비해 덜 진행된 상태이다. 우리나라의 현재 브라우저 점유율에서 가장 큰 위치를 차지하고 있는 IE계열(6~8)이 CSS3를 거의 지원하지 않는다.
하지만 그렇다고 실망하지는 말자! IE(8이하)도 완전히 사용하지 못하는 것은 아니다. Javascript를 이용한 Filter를 이용하여 여러 속성들의 표현을 흉내 낼 수 있다. 그리고 IE9 Beta 버전에서는 CSS3의 대부분의 속성들을 지원하려고 개발진행 중에 있다.
선택자(Selector)
선택자는 Type(element),Universal(*),class/id,attribute(속성),가상요소/가상클래스,선택자결합(하위,자식,인접) 등으로 구성된다.
| Pattern | Meaning | S5 | C8 | F3.6 | O11 | I9b | I8 | I7 | I6 |
|---|---|---|---|---|---|---|---|---|---|
| #id | id로 지정된 요소 선택 | O | O | O | O | O | O | O | O |
| .class | class로 지정된 요소 선택 | O | O | O | O | O | O | O | O |
| E | E 요소를 선택 | O | O | O | O | O | O | O | O |
| E:link | 방문하지 않은 E를 선택 | O | O | O | O | O | O | O | O |
| E:visited | 방문한 E를 선택 | O | O | O | O | O | O | O | O |
| E:hover | 마우스가 올라가 있는 동안 E를 선택 | O | O | O | O | O | O | O | O |
| E:active | 마우스 클릭 또는 키보드(enter)가 눌린 동안 E를 선택 | O | O | O | O | O | O | O | X |
| E:focus | focus가 머물러 있는 동안 E를 선택 | O | O | O | O | O | O | X | X |
| E:first-line | E 요소의 첫 번째 라인 선택 | O | O | O | O | O | O | O | X |
| E:first-letter | E 요소의 첫 번째 문자 선택 | O | O | O | O | O | O | O | X |
| * | 모든 요소 선택 | O | O | O | O | O | O | O | O |
| E[foo] | ‘foo’ 속성이 포함된 E를 선택 | O | O | O | O | O | O | O | X |
| E[foo=”bar”] | ‘foo’ 속성의 값이 ‘bar’와 일치하는 E를 선택 | O | O | O | O | O | O | O | X |
| E[foo~=”bar”] | ‘foo’ 속성의 값에 ‘bar’가 포함되는 E를 선택 | O | O | O | O | O | O | O | X |
| E[foo|=”en”] | ‘foo’ 속성의 값이 ‘en’ 또는 ‘en-‘ 으로 시작되는 E를 선택 | O | O | O | O | O | O | O | X |
| E:first-child | 첫 번째 자식 요소가 E라면 선택 | O | O | O | O | O | O | O | X |
| E:lang(fr) | HTML lang 속성의 값이 ‘fr’로 지정된 E를 선택 | O | O | O | O | O | O | X | X |
| E::before | E 요소 전에 생성된 요소 선택 | O | O | O | O | O | O | X | X |
| E::after | E 요소 후에 생성된 요소 선택 | O | O | O | O | O | O | X | X |
| E>F | E 요소의 자식인 F 요소 선택 | O | O | O | O | O | O | O | X |
| E+F | E 요소를 뒤의 F 요소 선택 | O | O | O | O | O | O | O | X |
| E[foo^=”bar”] | ‘foo’ 속성의 값이 ‘bar’로 정확하게 시작하는 요소 선택 | O | O | O | O | O | O | O | X |
| E[foo$=”bar”] | ‘foo’ 속성의 값이 ‘bar’로 정확하게 끝나는 요소 선택 | O | O | O | O | O | O | O | X |
| E[foo*=”bar”] | ‘foo’ 속성의 값에 ‘bar’를 포함하는 요소 선택 | O | O | O | O | O | O | O | X |
| E:root | 문서의 최상위 루트 요소 선택 | O | O | O | O | O | X | X | X |
| E:nth-child(n) | 그 부모의 n번째 자식이 앞으로부터 지정된 순서와 일치하는 E 라면 선택 | O | O | O | O | O | X | X | X |
| E:nth-last-child(n) | n번째 자식이 뒤로부터 지정된 순서와 일치하는 요소가 E 라면 선택 | O | O | O | O | O | X | X | X |
| E:nth-of-type(n) | E 요소 중 앞으로부터 순서가 일치하는 n번째 E 요소 선택 | O | O | O | O | O | X | X | X |
| E:nth-last-of-type(n) | E 요소 중 끝으로부터 순서가 일치하는 n번째 E 요소 선택 | O | O | O | O | O | X | X | X |
| E:last-child | E 요소 중 마지막 자식이라면 E 선택 | O | O | O | O | O | X | X | X |
| E:first-of-type | E 요소 중 첫번째 E 선택 | O | O | O | O | O | X | X | X |
| E:last-of-type | E 요소 중 마지막 E 선택 | O | O | O | O | O | X | X | X |
| E:only-child | E 요소가 유일한 자식이면 선택 | O | O | O | O | O | X | X | X |
| E:only-of-type | E 요소가 같은 타입이면 선택 | O | O | O | O | O | X | X | X |
| E:empty | 텍스트 및 공백을 포함하여 빈 자식을 가진 E를 선택 | O | O | O | O | O | X | X | X |
| E:target | E의 URI의 대상이 되면 선택 | O | O | O | O | O | X | X | X |
| E:enabled | 활성화된 폼 컨트롤 E요소 선택 | O | O | O | O | O | X | X | X |
| E:disabled | 비활성화된 폼 컨트롤 E요소 선택 | O | O | O | O | O | X | X | X |
| E:checked | 선택된 폼 컨트롤(라디오버튼,체크박스)을 선택 | O | O | O | O | O | X | X | X |
| E:not(s) | s가 아닌 E 요소 선택 | O | O | O | O | O | X | X | X |
| E~F | E 요소가 앞에 존재하면 F를 선택 | O | O | O | O | O | O | O | X |
<표 1> CSS 버전에 따른 선택자의 종류와 브라우저별 지원여부 – CSS1 – CSS2 – CSS3
참조:
- Selector – W3C
- S5 – Safari 5
- F3.6 – Mozilla FireFox 3.6.x
- O11 – Opera 11
- I9 – Internet Explorer MSDN
벤더 별 확장 속성 및 브라우저 엔진
대부분의 브라우저 벤더들은 자신들의 브라우저가 현재 지원하는 속성이 표준과 상이하거나 변경될 수 있다라고 생각하고 벤더확장 속성을 만들었다.
실제로 속성을 지원하지만 100% 표준스펙이 나온 상태가 아니기 때문에 개선점이나 버그발생시 피드백을 쉽게 하기 위해 만든 것으로 보인다.
| 브라우저 밴더 | S5 | C8 | F3.6 | O11 | I9 | I8 | I7 | I6 |
|---|---|---|---|---|---|---|---|---|
| 벤더확장 속성 | -webkit- | -webkit- | -moz- | -o- | -ms-/filter | -ms-/filter | -ms-/filter | -ms-/filter |
| 브라우저 엔진 | Webkit | Webkit | Gecko | Presto | Tasman | |||
<표 2> 브라우저 벤더 별 확장 속성
이번 연재에서 다룰 CSS3주요속성
CSS3에는 정말 다양한 속성들이 공개 되었는데 CSS의 기존버전과는 다르게 모듈형태로 개발되고 있다.
이것은 각종 브라우저나 다양한 디바이스가 필요에 따라 원하는 CSS 모듈만을 탑재하거나 특정 모듈만을 빠르게 업데이트 할 수 있는 장점이 있다.
CSS3는 현재 Text, Fonts, Color, Backgrounds&Borders, Transforms, Transitions, Animations과 같은 종류의 모듈들을 개발하고 있다.
그 모듈형태의 CSS3 여러 속성 중에서 이번 연재에서 배워볼 CSS3 주요속성은 아래와 같다.
| Module | Attribute | Effect | S5 | C8 | F3.6 | O11 | I9 | I8 | I7 | I6 |
|---|---|---|---|---|---|---|---|---|---|---|
| Background &border | border-image | 테두리 이미지효과 | O | O | O | O | X | X | X | X |
| border-radius | 테두리 라운드효과 | O | O | O | O | O | X | X | X | |
| box-shadow | 박스 그림자 | O | O | O | O | O | X | X | X | |
| multiple backgrounds | 배경 여러개 넣기 | O | O | O | O | O | X | X | X | |
| radient | 그라디언트 효과 | O | O | O | X | X | X | X | X | |
| Color | rgba(R,G,B,A)/HSLA | 칼라와 투명도효과 | O | O | O | O | O | X | X | X |
| opacity | 이미지 투명도효과 | O | O | O | O | X | X | X | X | |
| Text | text-shadow | 글자 그림자효과 | O | O | O | O | X | X | X | X |
| text-overflow | 글자 넘칠 때 자동 개행 | O | O | X | O | O | O | O | O | |
| User-Interface | resize | 박스 사이즈 조절효과 | O | O | O | O | X | X | X | X |
| Other modules | multi-column layout | 문단 다중 칼럼효과 | O | O | O | O | X | X | X | X |
<표 3> 본 연재에서 배울 CSS3 속성
IE(6~8)에서는 공식적으로 지원하지 않는 부분은 X 표시가 되어 있지만 대부분 필터를 이용해 효과를 낼 수 있으며 다른 브라우저들은 벤더확장 속성을 이용하여 적용 가능하다.
CSS3의 새로운 주요속성을 이용하여 간단한 효과주기
IE(6~8)을 제외한 모든 브라우저가 이미 대부분의 CSS3 속성들을 지원하고 있다. 하지만 아직 표준이 완벽하게 정해진 것도 아니고 각 벤더들 마다 속성들을 표시하는 방법이나 랜더링하는 차이가 있다.
본 장에서는 CSS3의 새로운 주요 속성을 이용하여 간단한 예제와 함께 속성들을 익히는 과정이다.
테스트 환경으로서는 현재까지 웹킷(webkit)계열 브라우저가 CSS3를 가장 잘 지원하기 때문에 필자는 모든 샘플코드 및 예제를 크롬기준으로 작성하고 설명할 것이다. 독자들은 속성들의 기능들을 확인하고 대표되는 여러 브라우저에서 다양하게 테스트 하여 각각의 차이점도 익혀보면 좋을 것이다.
Common Source
- <!DOCTYPE html>
- <html lang="ko">
- <head>
- <title> 예제 </title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <style type="text/css">
- body{
- font-size:12px;
- line-height:1.5em;
- }
- 적용할 DIV CSS 들어가는 곳
- </style>
- </head>
- <body>
- <div>CSS작업그룹은 CSS 규격을 모듈화하기로 결정했습니다.<br>
- 이런 모듈화는 다른 부분과 사이의 관계를 명확히 하는데 도움이되며<br>
- 완벽하게 문서의 크기를 줄일 수 있습니다.<br>
- 그것은 또한 우리가 모듈 단위로 특정 테스트 코드를 만들 수 있고 CSS의 구현에 도움이 …
- </div>
- </body>
- </html>
위와 같이 공통된 html 마크업을 가지고 css부분만 수정하거나 최소한의 마크업만 변경하여 모든 테스트를 하려고 한다. 각각 예제에 이슈사항이 있으면 미리 명시하고 추가되는 부분은 별도 표기를 하였으니 확인하면 된다.
Background & Borders
border-image
기존엔 border에 색상만 표현하는 게 가능했었지만 CSS3에서는 테두리에 이미지를 넣을 수 있고, 옵션을 통해 측면마다 다른 이미지 및 다양하게 표현할 수 있다.
Source
- div{
- padding:10px;
- border-width:27px;
- -webkit-border-image:url(img_border_image.png) 27 27 27 27 round;
- border-image:url(img_border_image.png) 27 27 27 27 round;
- }
View
속성사용방법
- border-image:url(①img_border_image.png) ②27 ③27 ④27 ⑤27 ⑥round;
① – 이미지 URL ② – top ③ – right ④ – bottom ⑤ – left ⑥ -이미지 반복 방법 (round:순환, stretch:늘이기, repeat:타일형식 반복, space:타일형식으로 반복되나 마지막 이미지 잘릴 수 있음)
좀 더 디테일하게 적용할 수 있는 속성들:
- border-top-image:
- border-right-image:
- border-bottom-image:
- border-left-image:
- border-corner-image:
- border-top-left-image:
- border-top-right-image:
- border-bottom-left-image:
- border-bottom-right-image:
- border-image-source: url(…);
- border-image-slice:
- border-image-widths:
- border-image-outset:
border-radius
이젠 CSS만으로 테두리 모서리를 둥글게 표현이 가능하다. 파이 값을 조절 함으로써 둥근 모서리 크기를 조절 할 수 있다.
Source
- div{
- padding:10px;
- border:solid 5px #3399CC;
- -webkit-border-radius: 25px;
- border-radius: 25px;
- }