[CSS] 선택자(selector)-class,id 선택자

 

위 코드에서 소문자 css에는 빨간색

아래의 대문자 CSS에는 밑줄을 선언하고 싶다면 어떤 선택자를 사용해야할까?

요소 선택자와 전체 선택자로는 원하는 요소를 선택해서 규칙을 적용하기가 불가능하다.

왜냐하면 dt태그가 동일하기 때문이다.

그래서 이번에는 class 선택자와 id 선택자를 배움으로써 해결 가능하다.

 

class 선택자

class선택자는 요소에 구애받지 않고 스타일 규칙을 적용할 수 있는 가장 일반적인 방법이다.

우선 html에 글로벌 속성 class와 class 속성에 값을 넣게 되면 우리는 class 선택자를 이용해서

해당 요소에 스타일 규칙을 적용할 수가 있다

 

css 입력창을 보면 주의할 점이 있다.

바로 foo 라는 속성값 앞에 "마침표( . )"를 꼭 넣어줘야 한다.

 

ID 선택자

ID 선택자는 class 선택자와 유사하다.

class 속성 대신에 id 속성을 써주고 앞에 "콤마" 대신 " # " 해시 기호를 써주면 된다.

 

차이점

 

• " . " 기호가 아닌 " # " 기호 사용
• 태그의 class 속성이 아닌 id 속성을 참조
• 문서내에 유일한 요소에 사용 - id는 문서 내에서 '유일'해야한다.즉, 단 한 번만 사용되어야 한다.
• 구체성 - 구체성의 값이 다른데 이건 다음 학습때 다룰 예정.