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>
↓
[화면출력]
강남