[CSS] CSS 기초2. Selector

Selector: HTML의 어떤 tag를 고를 것인지 규정하는 문법

 

Selector의 종류

Selector	기호	역할 및 설명
Universal	*	모든 tag에 적용하는 기호
Type	tag명	특정 tag에만 적용
State	:	콜론 기호는 CSS에서 State라 부르며 마우스 hover와 같은 상태에 따라 스타일링 한다. tag 명 옆에 붙여서 작성한다.
Attribute	[속성명]	Attribute라 부르며 속성을 갖는 tag를 스타일링 한다. tag 명 옆에 붙여서 작성한다.
ID	#id	해당 id를 갖는 곳에만 적용
Class	.class	해당 class를 지정한 곳에 적용

 

[참고] ID와 Class의 차이

• ID
  문서 내 유일한 요소에 스타일을 적용할 때 사용한다. 주로 <header>, <footer> 와 같이 문서 내 유일한 요소로 등장하는 것에 사용하고, 문서 내에서 해당 ID가 한번만 사용되면 일반적인 div 태그에도 사용해도 된다.
• Class
  복수의 요소에 스타일을 적용할 때 사용한다. 예를 들어 문서 내 <section>, <article>과 같이 여러번 등장하는, 동일한 스타일을 가진 요소들에 대해 스타일을 적용할 때 사용한다.
• 우선 순위: ID > Class

 

Selector 사용하기

기본 구조

selector {
  property: value;
}

 

Universal

1) 기본 예시

* {
  color: green; /* 모든 tag에 green 적용 */
}

 

Type

1) 기본 예시

div {
  color: green; /* div tag에 green 적용 */
}

 

State

1) 기본 예시

button:hover {
  color: green; /* button tag에 마우스 hover 시 green 적용 */
}

 

Attribute

1) 기본 예시

• .css 파일

a[href] {
  color: green; /* a 태그 중 href 속성을 가진 태그만 green 적용 */
}

• .html 파일

...

  <a href="naver.com" > Naver </div> // green 적용됨
  <a href="google.com" > Google </div> // green 적용됨

...

 

2) 속성에 특정값 조건 지정

• .css 파일

a[href="naver.com"] {
  color: green; /* a 태그 중 href 속성값이 naver.com인 태그만 green 적용 */
}

• .html 파일

...

  <a href="naver.com" > Naver </div> // green 적용됨
  <a href="google.com" > Google </div> // 미적용!

...

 

ID

1) 기본 예시

• .css 파일

#test_id {
  color: green; /* test_id라는 id를 지정한 tag에 green 적용 */
}

• .html 파일

...

  <div id="test_id" > id 사용 test </div> // green 적용됨

...

 

2) 특정 태그에 대한 ID 적용

• .css 파일

h1#test_id {
  color: green; /* h1 태그 중 test_id라는 id를 지정한 tag에 green 적용 */
}

• .html 파일

...

  <h1 id="test_id"> h1에서 id 사용 test </h1> // green 적용됨
  <div id="test_id"> div에서 id 사용 test </div> // 미적용!

...

 

Class

1) 기본 예시

• .css 파일

.test_class {
  color: green; /* test_class라는 class를 지정한 tag에 green 적용 */
}

• .html 파일

...

  <div class="test_class" > class 사용 test </div> // green 적용됨

...