http://www.clearboth.org/css3_1_by_isdn386/
연재순서:
- CSS 선택자(Selector)의 종류 및 간단한 효과주기
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
벤더 별 확장 속성 및 브라우저 엔진
대부분의 브라우저 벤더들은 자신들의 브라우저가 현재 지원하는 속성이 표준과 상이하거나 변경될 수 있다라고 생각하고 벤더확장 속성을 만들었다.
실제로 속성을 지원하지만 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 예제
- 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 들어가는 곳
- body
- <div>CSS작업그룹은 CSS 규격을 모듈화하기로 결정했습니다.<br>
- 이런 모듈화는 다른 부분과 사이의 관계를 명확히 하는데 도움이되며<br>
- 완벽하게 문서의 크기를 줄일 수 있습니다.<br>
- 그것은 또한 우리가 모듈 단위로 특정 테스트 코드를 만들 수 있고 CSS의 구현에 도움이 …
- </div>
위와 같이 공통된 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(…)undefined;
- 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;
- }
View
속성사용방법
- border-radius:①25px;
① – 파이 크기
좀 더 디테일하게 적용할 수 있는 속성들
- border-top-radius:
- border-right-radius:
- border-bottom-radius:
- border-left-radius:
- border-top-left-radius:
- border-top-right-radius:
- border-bottom-left-radius:
- border-bottom-right-radius:
Box-shadow
CSS만으로도 포토샵 같은 이미지편집툴 없이도 멋진 그라데이션이 들어가 있는 테두리 그림자를 설정 할 수 있다. 테두리 바깥쪽, 안쪽 모두 그림자를 생성할 수 있으며 그림자의 크기, 색상, 투명도를 조절할 수 있다.
Source
- div{
- padding:10px;
- border:#66ccff 3px solid;
- -webkit-box-shadow:rgba(106,198,247,0.3) -5px -5px 5px, rgba(106,198,247,0.7) 5px 5px 5px ;
- }
View
속성사용방법
- box-shadow:①rgba(106,198,247,0.3) ②-5px -5px 5px, ③rgba(106,198,247,0.7) ④5px 5px 5px ;
- Left ① – RGB색상,투명도 ② – 가로,세로,blur 오프셋 크기
- Right ③ – RGB색상,투명도 ④ – 가로,세로,blur 오프셋 크기
추가 옵션 inset – 안쪽으로 그림자 생김
Border-radius 와 Box-shadow 사용
두 속성을 같이 사용하여 둥근 모서리에 테두리 그림자 주는것도 간단한 CSS3 코드 몇 줄로 가능하다.
Source
- div{
- padding:10px;
- border-radius: 25px;
- -webkit-border-radius: 25px;
- border:#cbef38 3px solid;
- -webkit-box-shadow:rgba(152,208,138,0.3) -5px -5px 5px, rgba(152,208,138,0.7) 5px 5px 5px ;
- }
View
Background-size
배경이미지 크기를 임의적으로 설정할 수 있다. 하나의 요소에 여러 개의 배경이미지를 적용할 수도 있으며 각 배경이미지마다 별도의 크기를 지정해도 된다.
Source
- div{
- padding:10px;
- background-image:url(images/img_border_image.png)undefined;
- background-repeat: no-repeat;
- background-size: 50px 50px;
- -webkit-background-size: 50px 50px;
- }
View
원본이미지
속성사용방법
- background-size: ①50px ②50px;
① – 배경이미지 가로사이즈 ② – 배경이미지 세로사이즈
좀 더 디테일하게 적용 할 수 있는 속성들
- background-image:
- background-color:
- background-repeat:
- background-position:
- background-attachment:
Multiple background
하나의 element에 여러 개의 배경이미지를 적용할 수 있다.
Source
- div{
- padding:10px;
- background-image:url(images/img_border_image.png)undefined, url(images/img_border_image2.png)undefined;
- background-repeat: no-repeat;
- background-size: 50px 50px, 100px, 150px;
- -webkit-background-size: 50px 50px, 100px, 150px;
- }
속성사용방법
- background-image: ①url(...) ②url(...)undefined;
- background-size: ③50px ④50px ⑤100px ⑥150px;
① – 1번 배경이미지 URI ② – 2번 배경이미지 URI ③ – 2번 배경이미지 가로사이즈 ④ – 2번 배경이미지 세로사이즈
⑤ – 2번 배경이미지 가로사이즈 ⑥ – 2번 배경이미지 세로사이즈
rgba(R,G,B,A) / hsla(H,S,L,A)
기존 방식은 16진수 6자리를 이용하여 두자리씩 #00/00/00 나누어 표기하는 방식을 사용했었는데, CSS3에서는 rgba(R,G,B,A) 형식의 10진수(0~255)를 통한 RGB표현 그리고 A(투명도)를 표시하거나 HSLA(색상각도,채도,명도,투명도)로 표기할 수 있다.
Source
- div{
- padding:10px;
- color: rgba(0,0,0,1);
- color: hsla(180,0%,0%,1);
- background-color: rgba(150,100,80,.5);
- background-color: hsla(220,64%,69%,.5);
- }
View
속성사용방법
- color: ①rgba(0,0,0,1);
- color: ②hsla(180,0%,0%,1);
- background-color: ①rgba(150,100,80,.5);
- background-color: ②hsla(220,64%,69%,.5);
같은 기능을 하지만 두 가지 모두 테스트 해보고 차이점을 파악해 보자.
① – (R,G,B,투명도) ② – (색상각도,채도,명도,투명도)
좀 더 디테일하게 적용 할 수 있는 속성들
- color:
- background-color:
gradient
필자도 많이 기다려왔던 기능 중에 하나인 그라데이션 효과 기능이다. 배경에 그라데이션을 적용 할 수 있고 한가지 색상뿐 아니라 여러 색상표현이 가능하다.
Source
- div{
- padding:10px;
- border:solid 5px #66CCFF;
- border-radius: 20px;
- background:-webkit-gradient(linear, 80% 20%, 10% 20%, from(#ACE8E8), to(#E1F7F7));
- background:gradient(linear, 80% 20%, 10% 20%, from(#ACE8E8), to(#E1F7F7));
- }
View
속성사용방법
- background:gradient(①linear, ②80% 20%, 10% 20%, ③from(#ACE8E8), to(#E1F7F7));
① – 타입(linear,radial) ② – 시작위치, 끝위치
③ – 칼라 시작점, 칼라 끝점
opacity
요소에 투명도 값을 지정하는 속성이며 요소 전체에 효과가 적용된다.
Source
- div{
- padding:10px;
- opacity:.5;
- background:#<| class="nu0">777|>;
- }
View (적용 전)
View (적용 후)
속성사용방법
- color: ①opacity:.5;
① – 0~1까지 표시된 값으로 투명도를 표시한다.
Text(다음 연재에 타이포그래피 투토리얼을 진행 할 예정이라 간단하게 하고 넘김)
text-shadow
일반 텍스트 컨텐츠에 그림자를 입히는 속성이다.
Source
- div{
- text-shadow:4px 4px 4px #aaa;
- font-size:5em;
- font-family: arial;
- }
마크업에서 텍스트를 “Clear:both;” 라고 변경하고 진행하면 된다.
View
속성사용방법
- text-shadow: ①4px 4px ②4px ③#aaa;
① – 가로,세로 그림자거리 ② – 그림자 blur 크기
③ – 그림자 색상
text-overflow
텍스트 컨텐츠가 넘칠 때 줄여주거나 숨기거나 하는 속성이다.
Source
- div{
- padding:10px;
- width:300px;
- text-overflow:ellipsis;
- white-space:nowrap;
- overflow:hidden;
- border:5px solid #ccc;
- }
View
속성사용방법
- text-overflow:①ellipsis;
- white-space:②nowrap;
- overflow:③hidden;
① – 생략(ellipsis),자르기(clip) ② – 줄 바꿈을 하지 않기.
③ – 텍스트가 감싸고 있는 요소를 넘칠 때 숨김속성
resize
박스크기를 사용자가 임의로 조절할 수 있게 하는 속성이다. 가로,세로,모두 등의 설정이 가능하다.
Source
- div{
- padding:10px;
- text-overflow:ellipsis;
- white-space:nowrap;
- overflow:hidden;
- resize:horizontal;
- resize:vertical;
- border:5px solid #ccc;
- }
View
오른쪽 하단에 마우스를 클릭하여 드래그 할 수 있도록 2개의 사선이 그려져 있다.
속성사용방법
- resize:①horizontal;
- resize:②vertical;
① – 가로방향으로 사이즈 가변 됨 ② – 세로방향으로 사이즈 가변 됨 both는 가로,세로방향 모두로 가변 됨
multi-column layout
다중의 세로 열 레이아웃을 표현 할 수 있는 속성이다.
Source
- div{
- padding:10px;
- -webkit-column-count: <| class="nu0">3|>;
- -webkit-column-gap: 1.5em;
- -webkit-column-rule: 1px solid #ccc;
- border:5px solid #ccc;
- }
View
속성사용방법
- -webkit-column-count:①<| class="nu0">3|>;
- -webkit-column-gap:②1.5em;
- -webkit-column-rule:③1px solid #ccc;
① – 칼럼의 개수 ② – 칼럼 사이의 빈 여백 ③ – 칼럼 사이의 세로라인