[html/CSS] 선택자 사용법 ( 종류들 ) 1편

CSS를 사용하려면 반드시 짚고 넘어 가야 할 부분이죠 ㅎㅎ

 

선택자란 무엇일까요??

이름에서 나와있듯이 특정한 요소를 선택 ( 지칭 ) 해주는 것입니다.

특정 요소를 선택하여 스타일을 바꾸는 것이지요 ( 색, 크기.. 지정 )

 

다음에 나오는 선택자의 종류는 CSS에서 사용하는 코드입니다.

html과 헷갈리지 마세요~~

 

 

** 반드시 css 선택자 사용법 (종류들) 2편 하고 동시에 보셔야 됩니다. **

선택자 (Selector) 종류 

 

 

A) 전체 선택자

*  { padding: 0; margin: 0 }

이렇게 '*' 기호를 넣으면 요소 모두를 선택하게 됩니다.

( 모든 요소를 padding, margin  0 으로 하라는 뜻입니다. )

 

 

B) 태그 선택자

p { font-size: 24sp; }
div { background: green; }

<p> , <div> 태그를 선택하는 것 입니다.

 

C) 클래스 선택자

.yourClass  { color: dark; }

'.yourClass'라고 하면 이름이 yourClass 라는 클래스를 선택하게 됩니다.

 

 

D) ID 선택자

#id1 { font-size: 24sp; }
#id2 { color: green; }

#을 붙이면 id 선택자가 되는 것입니다.

 

* 여기서 ID 선택자와 클래스 선택자를 구분하고 갑시다.

ID 선택자와 클래스 선택자가 같은 것 같지만, 사실 다르게 사용이 됩니다.

클래스가 더 큰 범위에서 사용이 됩니다. 즉, 반복적인 스타일은 클래스로 지정하고

반복적인 것 중에서 한~ 두 부분만 추가적으로 특별한 스타일 지정시에 ID 선택자를

사용하게 됩니다.

 

 

 

E) 복합 선택자

p ul  { text-decoraion: none; }    // 하위 선택자
div>p { font-size: 24sp; }        // 자식 선택자
p+ul  { color:dark;      }        //  인접 선택자
P~ul  { background: dark; }       // 일반 형제 선택자

  E-1) 하위 선택자

         부모가 p 태그이면 모두 적용이 됩니다. 

 

  E-2) 자식 선택자

         부모가 div 태그이여도 바로 자식 즉, 바로 <div> 태그 바로 밑

         <p> 태그만 적용이 됩니다.

 

* 인접과 일반 형제 선택자를 이해하기 위해서 다음을 알아야 합니다.

    1) html에서 먼저 나오는 요소가 '형 요소'

        나중에 나오는 요소는 '동생 요소' 라고 부릅니다. 

    2) 부모가 같은 요소를 형제 요소라고 합니다.

 

  E-3) 인접 형제 선택자

         위 코드를 해석하면 <p>와 부모가 같은 <ul>요소를

         선택한다는 의미입니다.  ( 단, 형 요소가 아닌

          맨 처음 동생 요소만(형 다음 요소만) 적용됨)

 

  E-4) 일반 형제 선택자

          위 코드를 해석하면 <p>와 부모가 같은

          모든 <ul> 요소를 선택한다는 의미입니다.

         ( 인접 형제 선택자와 다르게 형 요소 제외 모든 동생 요소를 선택함 )

 

 

F) 속성 선택자

input[type="text"] { padding: 0; margin: 0;  }

  속성 선택자는 [] 대괄호안에 사용하는게 특징입니다.

 

 

 

G) 가상 클래스 선택자 (pseudo class)

  저번 포스팅을 참고 하시면 도움이 될 것입니다.

 

1) a:link          : 방문 하기 전의 링크의 상태

2) a:visited      : 방문 한 후에 링크의 상태

3) a:hover       : 마우스가 덮었을때 (마우스 위치가 링크 위에 있을때)

4) a:active       :  마우스로 한 번 클릭 했을 때

5) p:nth-child(2n)        : 2의 배수 자식
6) p:nth-last-child(3n)  : 뒤에서 3의 배수 자식
7) p:first-of-type         : 첫 번째 자식

... 등 이 있습니다.

 

 

 

선택자가 어떤 종류가 있는 알아야 css 코드를 올바로 이해 할 수 있습니다.

또한, 필요시에는 사용할 수 도 있죠 ㅎㅎ

 

** 반드시 css 선택자 사용법 (종류들) 2편 하고 동시에 보셔야 됩니다. **