7-4. CSS 선택자 : CLASS & ID 선택자

2021. 8. 24. 18:12카테고리 없음

7-4. CSS 선택자 : CLASS & ID 선택자

 

 가. CLASS 선택자

 

  1) 정의

 

   - 요소(태그) 선택자의 경우, 해당 문서 내 동일한 해당 요소에 전부 같은 스타일이 적용됨

   - 그래서 개별 요소에 각기 다른 스타일 규칙을 적용 하려면, class선택자를 활용하면 하면 됨

   - class 선택자는 요소에 구애받지 않고, 각 요소에 개별적 스타일 규칙을 적용할 수 있는 방식 

   - class는 글로벌 속성으로 어느 태그에서도 사용 가능함

 

  2) 작성방법

 

  - HTML 요소의 class 속성에 속성 값을 임의대로 입력하고, CSS 코드에서 그 임의로 입력한 class 속성

    값을 선택자로 하면, 해당 HTML 요소와 그 class 속성 값으로 선언된 다른 HTML 요소는 해당 CSS 코드

    에 입력된 스타일 규칙이 적용되고, 이것이 class 선택자의 장점임 

  - 이때, CSS 코드의 스타일 규칙의 선택자 맨 앞에 마침표( . )를 넣어주어야 함

 

  3) 다중 CLASS 값

 

  - class 속성 값은 공백(띄어쓰기 1칸)으로 구분하여 여러 개의 값을 넣을 수 있음

  - 이 방법을 이용하여 여러 개의 스타일 규칙을 한 번에 적용할 수 있음

 

  4) 코드예시

   

    [CSS]

    1  .임의속성값A{color: purple;}

    2  .임의속성값B{text-decoration: underline;}

    3  .임의속성값C{color: red;}

 

    [HTML]

    1  <dl>

    2      <dt class="임의속성값A">강남</dt>

    3      <dt class="임의속성값B 임의속성값C">강북</dt>

    4  </dl>

                             ↓

    [화면출력]

    강남 강북

 

나. ID 선택자 

 

  1) 정의

 

   - id 선택자는 class 선택자와 비슷함

   

  2) CLASS 선택자와의 차이점

 

   - 선택자 맨 앞에 마침표( . )가 아닌, 해시( # ) 기호를 넣어야 함 

   - HTML 태그의 속성을 class가 아닌, id 속성으로 작성할 것

   - id 속성값은 문서 내 유일해야 하므로, id 선택자로 규칙을 적용할 수 있는 HTML 요소는 단 하나

   - 구체성의 값이 다름

 

  3) 작성방법

 

  - HTML 요소의 id 속성에 속성 값을 임의대로 입력하고, CSS 코드에서 그 임의로 입력한 id 속성

    값을 선택자로 하면, 해당 HTML 요소만 해당 CSS 코드에 입력된 스타일 규칙이 적용됨 

  - 이때, CSS 코드의 스타일 규칙의 선택자 맨 앞에 해시( # )를 넣어주어야 함

 

  4) 코드예시

   

    [CSS]

    1  #임의속성값A{color: purple;}

 

    [HTML]

    1  <dl>

    2      <dt id="임의속성값A">강남</dt>

    3  </dl>

                             ↓

    [화면출력]

    강남