CSS 선택자(Selector)의 종류 및 간단한 효과주기

Posted on 

이 강좌는 월간 w.e.b. HOW TO 2011년 02호에 게재되어 있습니다.

언제부터인가 우리의 웹은 이미지에 의존하는 웹페이지, 또한 당연하다는 듯이 각종 오브젝트 타입의 컨텐츠를 무분별하게 사용하여 무거운 웹사이트를 구축했었고 또, 대부분의 웹사이트들은 웹표준이나 웹접근성 보다는 화려한 그래픽으로 특정브라우저에 맞춰진 Content Design으로 처리해 왔다.

그러나 기존 포토샵 같은 이미지편집 Tool이나 플래시 같은 모션그래픽 툴로 밖에 할 수 없었던 효과들이 CSS3를 사용함으로써 많은 부분 코드 몇 줄 만으로 가능하게 되었다.

같은 조건의 서비스라면 더 가벼워지고 빠른 로딩속도는 덤으로 가질 수 있게 된 건 물론이다.

이번 연재에서는 기본적이지만 매우 중요한 선택자의 종류와 몇 가지 CSS3 주요속성을 가지고 여러 효과를 주는 방법에 대해 살펴보자.

연재순서:

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(…);
  • 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);
  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), url(images/img_border_image2.png);
  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(...);
  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;

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

마치며

지금까지 선택자의 종류 및 벤더별 확장속성 그리고 간단한 CSS3 속성들을 다루어 보았다. 연재 첫 페이지에도 언급했지만 CSS3는 아직 완성되어 스펙이 100% 정해진 것이 아니다. 그렇기 때문에 포괄적인 CSS3의 명세를 읽어보고 일단은 표현이 되는 브라우저에서 테스트 및 학습을 하는 게 좋을 것이다.

다음 연재에서는 “CSS3를 이용해 이쁜 타이포그래피 만들기”라는 주제를 가지고 폰트지정, 웹폰트 쓰는법, 텍스트를 표현하는 전반적인 부분에 대하여 다루고 그것들을 이용해 이미지 못지 않은 샘플 타이포그래피를 구성해보자.

끝으로 2011년 새해 첫 스타트를 해 튜토리얼 중심의 본 CSS3 연재를 시작하여 열정을 가지고 한다면 모두 자신이 이루고자 하는 성과보다 많은 것을 얻을 수 있을 것이다.

다음 글도 한번 읽어보세요:

  1. CSS 속성 우선순위
  2. 4: 웹 표준 모델 – HTML, CSS and JavaScript
  3. CSS 의 도움이 필요할 때를 위한 10가지 자원
  4. CSS : Link vs. @import
  5. CSS 코딩 방법론, 4개의 거품 모델
  6. 9가지 일반적인 IE버그를 해결하는 방법 (9 Most Common IE Bugs and How to Fix Them)
  7. 조건부 스타일시트와 CSS 핵을 피하는 5가지 이유


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

저작자표시 비영리 변경금지

'공부 > HTML|CSS' 카테고리의 다른 글

순수 HTML/CSS Carousel  (0) 2019.04.11
티스토리 애드센스 넣기  (0) 2018.03.18
Float된 요소 가운데정렬 시키기  (0) 2013.05.21
모바일에서 웹페이지 접속시, 모바일 전용 페이지로 이동하기  (0) 2013.01.14
웹페이지에서 항상 따라다니는 이미지, position fixed  (0) 2012.10.25

+ Recent posts

티스토리툴바