선택자 1


바로 앞 장에서 선택자라는 단어가 나왔었죠? 그럼, 우선 선택자(Selector)가 무엇인지에 대해서 살펴볼까요?

메모장 브라우저
< HTML >
< HEAD >
< STYLE type="text/css" >
H1 {background:green}
P {color:green}
< /STYLE >
< /HEAD >
< BODY >
< H1 >그린색 < /H1 >
< P > 그린색은 시원한 느낌을 줍니다. < /P >
< /BODY >
< /HTML >

그린색

그린색은 시원한 느낌을 줍니다.

위에서 보시는 것처럼, HEAD부분에 Style (H1 { background:blue} , P { color:blue })을 정의해 주었습니다.
여기에서 H1, P 이것이 바로 선택자(Selector)의 한 종류입니다. 즉, 선택자(selector)란 "스타일을 사용할 대상을 지정하는 것입니다" 즉, 스타일을 지정하고자 하는 HTML 태그, 또는 CLASS나 ID 이름 "을 말합니다. 이곳에서는 실무에서 가장 많이 활용하는 네 가지 유형의 선택자 중에서 HTML태그 선택자와 Class선택자를 살펴보도록 하겠습니다.


HTML 태그(HTML Selector)

HTML태그를 선택자로 사용한 경우입니다. 아래처럼 HTML태그를 선택자로 지정해주고 { 와 } 사이에 전달하고자 하는 내용 즉, 선언문을 넣어 줍니다. 선언문은 하나 또는 여러개 적용할 수 있습니다.

<STYLE type= "text/css"> HTML태그{속성1:값1;속성2:값2;} HTML태그{속성1:값1;속성2:값2;} HTML태그{속성1:값1;속성2:값2;} </STYLE>

※ 한번 예를 들어볼까요? ^^*

< HTML>
< HEAD >
< TITLE >HTML 태그를 선택자로 사용하기< /TITLE >
< STYLE type="text/css" >
H3{font-style:italic ; color:green;} ①
H4{font-style:bold ; color:blue;} ②
H6{font-style:normal ; color:red;} ③
< /STYLE >
< /HEAD >
< BODY >

< H3 >스타일시트는 HTML의 문서에 비해 확장성과 기능성이 아주 뛰어납니다.< /H2 >
< H4 >스타일시트는 HTML의 문서에 비해 확장성과 기능성이 아주 뛰어납니다.< /H3 >
< H6 >스타일시트는 HTML의 문서에 비해 확장성과 기능성이 아주 뛰어납니다.< /H5 >

< /BODY >
< /HTML >

HTML 태그를 선택자로 사용하기

스타일시트는 HTML의 문서에 비해 확장성과 기능성이 아주 뛰어납니다.

스타일시트는 HTML의 문서에 비해 확장성과 기능성이 아주 뛰어납니다.

스타일시트는 HTML의 문서에 비해 확장성과 기능성이 아주 뛰어납니다.


위의 메모장에서 쓰여진 소스가 아래 브라우저에서 어떻게 표현되었는지 보셨나요?

①의 H3는 < BODY >내부에 있는 < H3 >에,
②의 H4는 < BODY >내부에 있는 < H4 >에
③의 H5는 < BODY >내부에 있는 < H5 >에 이렇게 각각 영향을 줍니다.


CLASS (CLASS Selector)

이번에는 CLASS를 선택자로 사용하는 경우입니다. 이것은 아주 많이 사용되는 부분이니 당연히 중요하겠죠? 조금 복잡하게 느껴지겠지만 천천히 살펴 보세요.

CLASS선택자는 HTML태그 선택자의 한계를 극복한 확장개념이라고 생각하면 됩니다. 즉, HTML을 선택자로 사용할 경우각각의 태그들은 적용범위가 태그 하나이다보니 활용범위가 상당히 제한적입니다.

P{color:blue;font-size:10pt}

위와 같은 HTML태그가 스타일에 선택자로 사용되었다고 할 때, BODY안에 있는 모든 < P >태그는 글자가 파랑색 10pt로 나타나게 됩니다. 이럴때, < P >태그를 사용하여 붉은색/9pt로 만들수 없는 현상이 발생합니다. 이럴 경우 Class 선택자를 사용하면 됩니다. 즉, CLASS 선택자는 한 태그에 여러 개의 CSS를 정의 할 수 있도록 해줍니다.


< STYLE type= "text/css" >

.키워드{스타일속성:속성값}

< /STYLE >

< BODY >

< 태그 class="키워드" >

< /BODY >

※ 한번 예를 들어볼까요? ^^*

< HTML>
< HEAD>
< TITLE>class를 선택자로 사용하기< /TITLE>
< STYLE type="text/css">

P{color:green ; font-size:10pt}
P.one{color:blue ; font-size:9pt}
P.two{color:red ; font-size:15pt}
.three{color:black ; font-size:9pt}

< /STYLE>
< /HEAD>
< BODY >

< P>그냥 p태그만을 모든 페이지에 적용된 p태그는 이렇게 나옵니다.< /P>
< P class="one">하지만 저는 예외 입니다. 왜냐하면 one이라는 class를 사용했거든요< /P>
< P class="two">저는 second를 사용하다 보니 빨강색으로 되버렸네요.< /P>
< P class="three">저는 자유형식입니다.< /P>
< B class="three">여기서는 이렇게< /B>
< I class="three">여기서는 또 이렇게< /I>

< /BODY >
< /HTML>

class를 선택자로 사용하기

그냥 p태그만을 모든 페이지에 적용된 p태그는 이렇게 나옵니다.

하지만 저는 예외 입니다. 왜냐하면 one이라는 class를 사용했거든요

저는 second를 사용하다 보니 빨강색으로 되버렸네요.

저는 자유형식입니다.

여기서는 이렇게 여기서는 또 이렇게


  1. 위의 그림을 잘 보세요.^^ 공통된 부분은 < P >태그를 사용하고 있습니다. 바로 옆을 보시면 .키워드가 각각 보이십니까? 여기에서는 one, two, three가 키워드로 사용되었네요. 이렇게 작성하면 < P >태그에 각각 다른 세 가지 효과를 줄 수 있습니다. 위의 브라우저에서 표현된 결과들을 유심히 보세요. 같은 < P >태그인데도 각 글자의 색깔과 크기가 키워드에 따라서 다르게 표현되었죠?
    ( 키워드란 말은 임의로 정한 말입니다. 키워드는 사용자가 아무 문자라도 넣어 사용하시면 됩니다.)

  2. 이 각각의 키워드는 각각의 다른 성질의 선언문들을 가지고 있지요?

  3. 이것을 유추해보면 각각의 키워드는 자신이 가진 선언문들을 BODY태그 안에 있는 자신의 키워드에 일치하는 P태그에 각기 다른 자신의 선언문들을 전달합니다.

    P.one은 < P class="one" >으로,

    P.two 은 < P class="two" >으로,

    .three 은 < P class="three" >, < B class="three">, < I class="three">으로

    각각의 똑같은 키워드가 적용되는 부분을 찾아가서 그 키워드에 일치하는 선언문 내용을 전달 하라는 이야기입니다.

  4. 위의 첫번째 " P{color:green ; font-size:10pt}"의 경우는 HTML태그로 선택자를 했을 경우인데 문장 전체내에서 한 태그당 딱 한가지 선언문의 내용만 적용할 수 있었습니다. 하지만 class선택자를 사용하시면 같은 태그에 내용에 따라 서로 다른 스타일을 적용 할 수 있습니다.

  5. 즉, 스타일에 클래스(class)의 키워드를 정해놓고, < P >태그가 적용될 < BODY >안의 위치에 class="키워드"만 붙여 사용하면 됩니다. 이해가 되시나요?

  6. .three는 어떤 용도일까요? 이것은 모든 태그에 적용할 수 있는 "완전 자유형식"입니다. 이것은 HTML의 특정 태그에 제한을 두는것이 아니라 모든 태그에 해당 CSS를 적용할 수 있기때문에 클래스의 사용은 이런 방법이 많이 사용되고 있습니다. 굳이 한 태그 안에서만 적용되는 CLASS를 만들어 사용할 필요가 없기 때문입니다.
  • 여기서 중요하게 생각해야할 부분은 점(.)입니다. class를 적용할 때 점(.)을 생략하면 적용이 되지 않으니 주의하시기 바랍니다.
  • ".키워드"는 웹상의 클래스 중 가장 많이 사용하는 방법으로, HTML문서 안에 사용되는 모든 태그에 붙여 사용할 수 있습니다.