http://www.clearboth.org/css3_1_by_isdn386/


연재순서:

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(속성),가상요소/가상클래스,선택자결합(하위,자식,인접) 등으로 구성된다.

PatternMeaningS5C8F3.6O11I9bI8I7I6
#idid로 지정된 요소 선택OOOOOOOO
.classclass로 지정된 요소 선택OOOOOOOO
EE 요소를 선택OOOOOOOO
E:link방문하지 않은 E를 선택OOOOOOOO
E:visited방문한 E를 선택OOOOOOOO
E:hover마우스가 올라가 있는 동안 E를 선택OOOOOOOO
E:active마우스 클릭 또는 키보드(enter)가 눌린 동안 E를 선택OOOOOOOX
E:focusfocus가 머물러 있는 동안 E를 선택OOOOOOXX
E:first-lineE 요소의 첫 번째 라인 선택OOOOOOOX
E:first-letterE 요소의 첫 번째 문자 선택OOOOOOOX
*모든 요소 선택OOOOOOOO
E[foo]‘foo’ 속성이 포함된 E를 선택OOOOOOOX
E[foo="bar"]‘foo’ 속성의 값이 ’bar’와 일치하는 E를 선택OOOOOOOX
E[foo~="bar"]‘foo’ 속성의 값에 ’bar’가 포함되는 E를 선택OOOOOOOX
E[foo|="en"]‘foo’ 속성의 값이 ’en’ 또는 ’en-’ 으로 시작되는  E를 선택OOOOOOOX
E:first-child첫 번째 자식 요소가 E라면 선택OOOOOOOX
E:lang(fr)HTML lang 속성의 값이 ’fr’로 지정된 E를 선택OOOOOOXX
E::beforeE 요소 전에 생성된 요소 선택OOOOOOXX
E::afterE 요소 후에 생성된 요소 선택OOOOOOXX
E>FE 요소의 자식인 F 요소 선택OOOOOOOX
E+FE 요소를 뒤의 F 요소 선택OOOOOOOX
E[foo^="bar"]‘foo’ 속성의 값이 ’bar’로 정확하게 시작하는 요소 선택OOOOOOOX
E[foo$="bar"]‘foo’ 속성의 값이 ’bar’로 정확하게 끝나는 요소 선택OOOOOOOX
E[foo*="bar"]‘foo’ 속성의 값에 ’bar’를 포함하는 요소 선택OOOOOOOX
E:root문서의 최상위 루트 요소 선택OOOOOXXX
E:nth-child(n)그 부모의 n번째 자식이 앞으로부터 지정된 순서와 일치하는 E 라면 선택OOOOOXXX
E:nth-last-child(n)n번째 자식이 뒤로부터 지정된 순서와 일치하는 요소가 E 라면 선택OOOOOXXX
E:nth-of-type(n)E 요소 중 앞으로부터 순서가 일치하는 n번째 E 요소 선택OOOOOXXX
E:nth-last-of-type(n)E 요소 중 끝으로부터 순서가 일치하는 n번째 E 요소 선택OOOOOXXX
E:last-childE 요소 중 마지막 자식이라면 E 선택OOOOOXXX
E:first-of-typeE 요소 중 첫번째 E 선택OOOOOXXX
E:last-of-typeE 요소 중 마지막 E 선택OOOOOXXX
E:only-childE 요소가 유일한 자식이면 선택OOOOOXXX
E:only-of-typeE 요소가 같은 타입이면 선택OOOOOXXX
E:empty텍스트 및 공백을 포함하여 빈 자식을 가진 E를 선택OOOOOXXX
E:targetE의 URI의 대상이 되면 선택OOOOOXXX
E:enabled활성화된 폼 컨트롤 E요소 선택OOOOOXXX
E:disabled비활성화된 폼 컨트롤 E요소 선택OOOOOXXX
E:checked선택된 폼 컨트롤(라디오버튼,체크박스)을 선택OOOOOXXX
E:not(s)s가 아닌 E 요소 선택OOOOOXXX
E~FE 요소가 앞에 존재하면 F를 선택OOOOOOOX

<표 1> CSS 버전에 따른 선택자의 종류와 브라우저별 지원여부 – CSS1 – CSS2 – CSS3

참조:

벤더 별 확장 속성 및 브라우저 엔진

대부분의 브라우저 벤더들은 자신들의 브라우저가 현재 지원하는 속성이 표준과 상이하거나 변경될 수 있다라고 생각하고 벤더확장 속성을 만들었다.
실제로 속성을 지원하지만 100% 표준스펙이 나온 상태가 아니기 때문에 개선점이나 버그발생시 피드백을 쉽게 하기 위해 만든 것으로 보인다.

브라우저 밴더S5C8F3.6O11I9I8I7I6
벤더확장 속성-webkit--webkit--moz--o--ms-/filter-ms-/filter-ms-/filter-ms-/filter
브라우저 엔진WebkitWebkitGeckoPrestoTasman

<표 2> 브라우저 벤더 별 확장 속성

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

CSS3에는 정말 다양한 속성들이 공개 되었는데 CSS의 기존버전과는 다르게 모듈형태로 개발되고 있다.
이것은 각종 브라우저나 다양한 디바이스가 필요에 따라 원하는 CSS 모듈만을 탑재하거나 특정 모듈만을 빠르게 업데이트 할 수 있는 장점이 있다.
CSS3는 현재 Text, Fonts, Color, Backgrounds&Borders, Transforms, Transitions, Animations과 같은 종류의 모듈들을 개발하고 있다.
그 모듈형태의 CSS3 여러 속성 중에서 이번 연재에서 배워볼 CSS3 주요속성은 아래와 같다.

ModuleAttributeEffectS5C8F3.6O11I9I8I7I6
Background &borderborder-image테두리 이미지효과OOOOXXXX
border-radius테두리 라운드효과OOOOOXXX
box-shadow박스 그림자OOOOOXXX
multiple backgrounds배경 여러개 넣기OOOOOXXX
radient그라디언트 효과OOOXXXXX
Colorrgba(R,G,B,A)/HSLA칼라와 투명도효과OOOOOXXX
opacity이미지 투명도효과OOOOXXXX
Texttext-shadow글자 그림자효과OOOOXXXX
text-overflow글자 넘칠 때 자동 개행OOXOOOOO
User-Interfaceresize박스 사이즈 조절효과OOOOXXXX
Other modulesmulti-column layout문단 다중 칼럼효과OOOOXXXX

<표 3> 본 연재에서 배울 CSS3 속성

IE(6~8)에서는 공식적으로 지원하지 않는 부분은 X 표시가 되어 있지만 대부분 필터를 이용해 효과를 낼 수 있으며 다른 브라우저들은 벤더확장 속성을 이용하여 적용 가능하다.

CSS3의 새로운 주요속성을 이용하여 간단한 효과주기

IE(6~8)을 제외한 모든 브라우저가 이미 대부분의 CSS3 속성들을 지원하고 있다. 하지만 아직 표준이 완벽하게 정해진 것도 아니고 각 벤더들 마다 속성들을 표시하는 방법이나 랜더링하는 차이가 있다.

본 장에서는 CSS3의 새로운 주요 속성을 이용하여 간단한 예제와 함께 속성들을 익히는 과정이다.

테스트 환경으로서는 현재까지 웹킷(webkit)계열 브라우저가 CSS3를 가장 잘 지원하기 때문에 필자는 모든 샘플코드 및 예제를 크롬기준으로 작성하고 설명할 것이다. 독자들은 속성들의 기능들을 확인하고 대표되는 여러 브라우저에서 다양하게 테스트 하여 각각의 차이점도 익혀보면 좋을 것이다.

Common Source
    

  1. <!DOCTYPE html>
  2. <html lang="ko">
  3. <head>
  4. <title> 예제 </title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <style type="text/css">
  7.   body{
  8.     font-size:12px;
  9.     line-height:1.5em;
  10.   }
  11.   적용할 DIV CSS 들어가는 곳
  12. </style>
  13. </head>
  14. <body>
  15.   <div>CSS작업그룹은 CSS 규격을 모듈화하기로 결정했습니다.<br>
  16.     이런 모듈화는 다른 부분과 사이의 관계를 명확히 하는데 도움이되며<br>
  17.     완벽하게 문서의 크기를 줄일 수 있습니다.<br>
  18.     그것은 또한 우리가 모듈 단위로 특정 테스트 코드를 만들 수 있고 CSS의 구현에 도움이 …
  19.   </div>
  20. </body>
  21. </html>

위와 같이 공통된 html 마크업을 가지고 css부분만 수정하거나 최소한의 마크업만 변경하여 모든 테스트를 하려고 한다. 각각 예제에 이슈사항이 있으면 미리 명시하고 추가되는 부분은 별도 표기를 하였으니 확인하면 된다.

Background & Borders

border-image

기존엔 border에 색상만 표현하는 게 가능했었지만 CSS3에서는 테두리에 이미지를 넣을 수 있고, 옵션을 통해 측면마다 다른 이미지 및 다양하게 표현할 수 있다.

Source
    

  1. div{
  2.   padding:10px;
  3.   border-width:27px;
  4.   -webkit-border-image:url(img_border_image.png) 27 27 27 27 round;
  5.   border-image:url(img_border_image.png) 27 27 27 27 round;
  6. }
View

속성사용방법
    

  1. 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
    

  1. div{
  2.   padding:10px;
  3.   border:solid 5px #3399CC;
  4.   -webkit-border-radius: 25px;
  5.   border-radius: 25px;
  6. }
View

속성사용방법
    

  1. 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
    

  1. div{
  2. 	padding:10px;
  3.   border:#66ccff 3px solid;
  4.   -webkit-box-shadow:rgba(106,198,247,0.3) -5px -5px 5px, rgba(106,198,247,0.7) 5px 5px 5px ;
  5. }
View

속성사용방법
    

  1. 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
    

  1. div{
  2.   padding:10px;
  3.   border-radius: 25px;
  4.   -webkit-border-radius: 25px;
  5.   border:#cbef38 3px solid;
  6. -webkit-box-shadow:rgba(152,208,138,0.3) -5px -5px 5px, rgba(152,208,138,0.7) 5px 5px 5px ;
  7. }
View

Background-size

배경이미지 크기를 임의적으로 설정할 수 있다. 하나의 요소에 여러 개의 배경이미지를 적용할 수도 있으며 각 배경이미지마다 별도의 크기를 지정해도 된다.

Source
    

  1. div{
  2.   padding:10px;
  3.   background-image:url(images/img_border_image.png)undefined;
  4.   background-repeat: no-repeat;
  5.   background-size: 50px 50px;
  6.   -webkit-background-size: 50px 50px;
  7. }
View

원본이미지 

속성사용방법
    

  1. background-size: ①50px ②50px;

① – 배경이미지 가로사이즈 ② – 배경이미지 세로사이즈

좀 더 디테일하게 적용 할 수 있는 속성들
  • background-image:
  • background-color:
  • background-repeat:
  • background-position:
  • background-attachment:

Multiple background

하나의 element에 여러 개의 배경이미지를 적용할 수 있다.

Source
    

  1. div{
  2.   padding:10px;
  3.   background-image:url(images/img_border_image.png)undefined, url(images/img_border_image2.png)undefined;
  4.   background-repeat: no-repeat;
  5.   background-size: 50px 50px, 100px, 150px;
  6.   -webkit-background-size: 50px 50px, 100px, 150px;
  7. }
속성사용방법
    

  1. background-image: ①url(...) ②url(...)undefined;
  2. 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
    

  1. div{
  2.   padding:10px;
  3.   color: rgba(0,0,0,1);
  4.   color: hsla(180,0%,0%,1);
  5.   background-color: rgba(150,100,80,.5);
  6.   background-color: hsla(220,64%,69%,.5);
  7. }
View

속성사용방법
    

  1. color: ①rgba(0,0,0,1);
  2. color: ②hsla(180,0%,0%,1);
  3. background-color: ①rgba(150,100,80,.5);
  4. background-color: ②hsla(220,64%,69%,.5);

같은 기능을 하지만 두 가지 모두 테스트 해보고 차이점을 파악해 보자.
① – (R,G,B,투명도) ② – (색상각도,채도,명도,투명도)

좀 더 디테일하게 적용 할 수 있는 속성들
  • color:
  • background-color:

gradient

필자도 많이 기다려왔던 기능 중에 하나인 그라데이션 효과 기능이다. 배경에 그라데이션을 적용 할 수 있고 한가지 색상뿐 아니라 여러 색상표현이 가능하다.

Source
    

  1. div{
  2.   padding:10px;
  3.   border:solid 5px #66CCFF;
  4.   border-radius: 20px;
  5.   background:-webkit-gradient(linear, 80% 20%, 10% 20%, from(#ACE8E8), to(#E1F7F7));
  6.   background:gradient(linear, 80% 20%, 10% 20%, from(#ACE8E8), to(#E1F7F7));
  7. }
View

속성사용방법
    

  1. background:gradient(①linear, ②80% 20%, 10% 20%, ③from(#ACE8E8), to(#E1F7F7));

① – 타입(linear,radial) ② – 시작위치, 끝위치
③ – 칼라 시작점, 칼라 끝점

opacity

요소에 투명도 값을 지정하는 속성이며 요소 전체에 효과가 적용된다.

Source
    

  1. div{
  2.   padding:10px;
  3.   opacity:.5;
  4.   background:#<| class="nu0">777|>;
  5. }
View (적용 전)

View (적용 후)

속성사용방법
    

  1. color: ①opacity:.5;

① – 0~1까지 표시된 값으로 투명도를 표시한다.

Text(다음 연재에 타이포그래피 투토리얼을 진행 할 예정이라 간단하게 하고 넘김)

text-shadow

일반 텍스트 컨텐츠에 그림자를 입히는 속성이다.

Source
    

  1. div{
  2.   text-shadow:4px 4px 4px #aaa;
  3.   font-size:5em;
  4.   font-family: arial;
  5. }

마크업에서 텍스트를 “Clear:both;” 라고 변경하고 진행하면 된다.

View
속성사용방법
    

  1. text-shadow: ①4px 4px ②4px ③#aaa;

① – 가로,세로 그림자거리 ② – 그림자 blur 크기
③ – 그림자 색상

text-overflow

텍스트 컨텐츠가 넘칠 때 줄여주거나 숨기거나 하는 속성이다.

Source
    

  1. div{
  2.     padding:10px;
  3.     width:300px;
  4.     text-overflow:ellipsis;
  5.     white-space:nowrap;
  6.     overflow:hidden;
  7.     border:5px solid #ccc;
  8. }
View

속성사용방법
    

  1. text-overflow:①ellipsis;
  2. white-space:②nowrap;
  3. overflow:③hidden;

① – 생략(ellipsis),자르기(clip) ② – 줄 바꿈을 하지 않기.
③ – 텍스트가 감싸고 있는 요소를 넘칠 때 숨김속성

resize

박스크기를 사용자가 임의로 조절할 수 있게 하는 속성이다. 가로,세로,모두 등의 설정이 가능하다.

Source
    

  1. div{
  2.   padding:10px;
  3.   text-overflow:ellipsis;
  4.   white-space:nowrap;
  5.   overflow:hidden;
  6.   resize:horizontal;
  7.   resize:vertical;
  8.   border:5px solid #ccc;
  9. }
View

오른쪽 하단에 마우스를 클릭하여 드래그 할 수 있도록 2개의 사선이 그려져 있다.

속성사용방법
    

  1. resize:①horizontal;
  2. resize:②vertical;

① – 가로방향으로 사이즈 가변 됨 ② – 세로방향으로 사이즈 가변 됨 both는 가로,세로방향 모두로 가변 됨

multi-column layout

다중의 세로 열 레이아웃을 표현 할 수 있는 속성이다.

Source
    

  1. div{
  2.   padding:10px;
  3.   -webkit-column-count: <| class="nu0">3|>;
  4.   -webkit-column-gap: 1.5em;
  5.   -webkit-column-rule: 1px solid #ccc;
  6.   border:5px solid #ccc;
  7. }
View

속성사용방법
    

  1. -webkit-column-count:①<| class="nu0">3|>;
  2. -webkit-column-gap:②1.5em;
  3. -webkit-column-rule:③1px solid #ccc;

① – 칼럼의 개수 ② – 칼럼 사이의 빈 여백 ③ – 칼럼 사이의 세로라인

이 게시물을...