CSS3 - CSS 선택자 - 클래스 선택자, 의사 선택자, 속성 선택자 (3)

CSS3 - CSS 선택자 

클레스 선택자, 의사 선택자, 속성 선택자 (3)

오늘은 어제 설명하지 못한 선택자에 대해서 

이어 설명 하도록 하겠습니다. 

CSS도 HTML처럼 기초부터 알아보기 전에  

압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.

(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)

(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다.)

4. 클래스 선택자

네번째 클래스 선택자 입니다.

클레스 선택자란 앞서 배운 아이디 선택자와 비슷하게 

똑같은 태그중 특정한 위치에 있는 태그를 선택할 수 있음과 비슷합니다.

그런데 이러한 클레스 선택자와 아이디 선택자가 다른 것을 이야기 하자면

클래스 선택자는 몇개의 태그를 하나의 클래스로 묶어서 스타일을 지정하려 할 때

주로 사용이 되고 아이디 선택자는 하나의 태그를 선택 할 수 있는 반면 

클래스는 선택자는 여러 개의 태그를 한꺼번에 선택할 수 있다는 점이 있습니다.

    

<클래스 선택자 사용예>

위 클래스 선택자를 사용하기 위해서는 이전 포스팅의 아이디 선택자와 똑같이 

html 태그를 작성할때 해당 선택자를 사용할 곳에 클래스 속성을 

부여 해야 하는데 위 이미지 부분에 p태그를 4개 작성하고 

3번째 p태그에 class 속성 임의 이름인 blue라는 값을 지정 하였습니다.

그 다음 스타일 부분에 p태그를 작성후 p태그 들만 공통으로 

글자색을 적섹으로 지정 한 다음 그 아래 class속성을 별도로 선택해 

class 속성이 적용된 p태그의 글자색만 파란색으로 지정 하였습니다.

여기서 중요한건 css에서는 태그의 class 속성을 선택할 때 앞에 " . " 을 붙이고

class 속성의 값(임의 이름)을 적어주면 선택이 됩니다. 

5. 의사 선택자

다섯번째 의사 선택자 입니다.

먼저 의사 선택자란 콜론을 "의사 클래스"라고도 하는 콜론(:)을 사용항 표기 합니다.

의사 클래스는 용어 그대로 클래스가 정의된 것처럼

간주 한다는 의미가 있는데요 예를 들어 "a:link" 라고 한다면 a태그의 

클래스인 link (링크)가 선언 된 것 처럼 생각하고 선택자를 만드는 것입니다. ^^

<의사 선택자 사용예>

위 의사 선택자를 사용하는 방법은 위와 같습니다.

각 태그 선택후 콜론으로 어떠한 행동을 취할때 속성의 값을 정의 한다는 뜻인데

이러한 의사 선택자는 위와 같이 사용한다는 것만 알고 있고  추후 제이쿼리 에서

 더욱 자세하게 다루도록 하겠습니다.

6. 속성 선택자

이번 선택자는 속성 선택자 입니다.

속성 선택자는 특정한 속성을 가지고 있는 태그를 선택하는 것인데

예를 들어 아래와 같습니다.

<속성 선택자 사용예>

첫번쨰 h1 : 선택자는 title라는 속성을 가지고 있는 h1태그를 선택 합니다.

두번째 p : 선택자는 class라는 속성이 test라는 p태그를 선택 합니다.

등 위와 같은 방식을 속성 선택자라고 합니다.

여기까지 이전 포스팅에서 이야기했던 선택자에 대해서 알아 보았으며 여기서 부터는

추가적으로 선택자를 활용하는 방법에 대해서 간략하게 알아 보겠습니다.

7. 선택자 그룹

이번 내용은 선택자를 그룹하는 내용입니다.

선택자 그룹이란 선택자를 콤마 (,)로 분리 하여 나열해서

각 선택자에 의해서 선택된 태그의 합치는 것을 의미 하며 이 내용은 아래와 같습니다.

에를 들어 위는 똑같은 스타일을 

일일이 태그마다 적용한 방식 

이번에는 똑같은 스타일을 위와 같이 그룹화 하여 

똑같이 적용한 방식

이렇게 위와 같은 두가지의 선언 방법은

둘다 동일한 방법입니다. ^^

8. 자손, 자식, 형제 결합자

이번 마지막 내용은 자손, 자식, 형제 결합자 내용입니다.

먼저 자손, 자식, 형제 결합자란 모두 선택자를 결합해서 특정한 태그를 선택하며

특정한 태그의 후손 (예 : ul 태그의 li , "ul  li" 이런 식으로) 선택할 수 있습니다.

선택자	설명
s1  s2	ul 태그에 포함된 li 태그를 선택 (후손)
s1 > s2	ul 태그의 직계 자식 요소인 s2를 선택 (자식)

<사용법>

위 내용은 임의 사용법 입니다. 

여기서 후손과 지식이 혼동이 될 수 있는데 HTML에서 모든 태그를

가계 형태로 그린다면 후손이란 손자, 손녀도 포함도는 관계이고

자식이란 아들과 딸만 포함이 된다고 생각 하시면 됩니다. ^^

다시말해 예시로 위 그림 body 태그의 후손은 em태그 li 태그 같이 태그안에 태그를 뜻하고

자식 태그는 body의 바로 아래 하위에 속한 p태그와 ul태그 같은 태그를 뜻 합니다.

이상 CSS3 - CSS 선택자 - 클래스 선택자, 의사 선택자, 속성 선택자 (3)에 

관련된 포스팅을 마치도록 하겠습니다.