Front-End/HTML, CSS

[CSS] CSS 기초2. Selector

유자맛바나나 2021. 12. 2. 01:22

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 적용됨

...

 

 

 

 

 

 

'Front-End > HTML, CSS' 카테고리의 다른 글

[CSS] Flexbox 개념과 적용  (0) 2021.12.03
[CSS] CSS 기초 3. Layout(display, position)  (0) 2021.12.02
[HTML] 기초(2) Document and website structure  (0) 2021.10.13
[CSS] CSS 기초  (0) 2021.10.12
[HTML] HTML 기초  (0) 2021.10.11