입문자를 위한 기초 css (3) - css 선택자

CSS 선택자 1편

선택자 : 어떤 요소에 스타일을 적용 할 것인지에 대한 정보

선택자 {
	속성명: 속성값;
}

선택자의 종류 :

• 기본 선택자
• 그룹 선택자
• 특성 선택자
• 결합 선택자
• 의사 클래스
• 의사 요소

기본 선택자 1. 전체 선택자

• 모든 요소를 선택한다.
  "*" 기호는 문서 내의 모든 요소를 의미하는 기호이다.

  *{
  	color: blue;
  }

=> 문서 내 모든 요소의 글자 색을 파란색으로 지정한다!

기본 선택자 2. 태그 선택자

• 주어진 이름을 가진 요소를 선택한다. "유형 선택자" 라고도 한다.
• 주어진 이름을 가진 요소가 다수일 경우, 해당 요소들을 모두 선택한다.

p{
	color: blue;
}

=> 문서 내 모든 p 채그 요소의 글자 색을 파란색으로 지정한다!

기본 선택자 3. 클래스 선택자

• 주어진 class 속성값을 가진 요소를 선택한다.
• 주어진 class 속성값을 가진 요소가 다수일 경우, 해당 요소들을 모두 선택한다.

.text{
	color : blue;
}

=> 문서 내 class가 "text"인 모든 요소의 글자 색을 파란색으로 지정한다!

기본 선택자 4. 아이디 선택자

• 주어진 id 속성값을 가진 요소를 선택한다.
• id는 고유한 식별자 역할을 하는 전역 속성이다.

#topic{
	color : blue;
}

=> 문서 내 id가 "topic"인 요소의 글자 색을 파란색으로 지정한다!

그룹 선택자

• 다양한 유형의 요소를 한꺼번에 선택하고자 할 때 사용한다.
• 쉼표 ( , )를 이용해 선택자를 그룹화한다.

h1, p, div{
	color : blue;
}

=> 문서 내 모든 h1 , p , div 태그 요소의 글자 색을 파란색으로 지정한다!

선택자가 겹치는 경우

• 선택자가 겹치는 경우, 기본적으로 나중에 작성된 스타일이 적용된다.
• 선택자가 다르지만 요소가 겹치는 경우, 선택자 우선순위에 의해 적용될 스타일이 결정된다.

선택자 우선순위 ?

• 아이디 선택자 > 클래스 선택자 > 태그 선택자

"*" 기호를 사용하여 전체 선택자를 이용한 결과 , 전체 글자 색이 파란색으로 설정됨을 볼 수 있다.

class가 " text" 인 것에 해당하는 글자를 파란색으로 바꾼 결과이다.
class를 선택하기 위해서 " . " 기호를 사용한다.

id가 "gagaga" 인 요소의 글자 색을 빨간색으로 바꾼 결과이다.

그룹 선택자를 사용하여 h1과 p 태그에 해당하는 글자 색을 바꾼 결과이다.

h1 선택자가 두번 설정 되었을 때 가장 나중에 설정된 것이 적용된다.

클래스 선택자와 태그 선택지 둘 다 적용됐을 경우 , 클래스 선택자의 우선순위가 높기 때문에 글자의 색상이 빨간색으로 바뀐 것을 볼 수 있다.