CSS_Selector(1)

Selectors
:선택자는 웹 문서에서 어느 부분에 스타일을 저용할 지 알려주는 기능

 

전체 선택자 

스타일을 문서의 모든 요소에 적용할 떼 시영

주로 모든 하위 요소에 스타일을 한꺼번에 적용 할떼 사용

 

타입 선택자(type selector)

>>특정 부분에 스타일 적용

• 태그 선택자(tag selector) = 요소 선택자(element selector)
• 타입 선택자를 사용해 스타일을 지정하면 해당 태그를 사용한 모든 요소에 적용

클래스 선택자(class selector)

• 클래스 이름을 사용하여 다른 선택자와 구별
  >> 클래스 이름 앞에 마침표(.)를 반드시 붙여서야한다.
• 클래스 스타일: 클래스 선택자를 사용해 만든 스타일
• 클래스 스타일 적용
  >> 태그 안에 class="클래스명" : class속성을 사용하여 지정

id 선택자(id selector)
: 특정 부분에 스타일을 한 번만 적용

• 아이디 이름을 사용하여 다른 선택자와 구별
  >> id 이름 앞에 #기호를 반드시 붙여야 한다.
• 클래스 선택자는 문서에 여러번 적용
  >> id 선택자는 문서에서 한 번만 적용할 수 있다.
• 주로 문서의 레이아웃과 관련된 스타일을 지정
  혹은 웹요소에 자바스크립트 프로그램을 사용하면서 요소를 구별할 때 사용

 

그룹 선택자
: 같은 스타일 구칙을 사용하는 요소르 묶어서 적용

• 여러 선택자에서 같은 스타일을 사용하는 경우
  >> 쉼표(,)로 구분해 여러 선택자를 나열한 후 스타일 규틱을 한 번만 정의

 

 

전체예시

결과