[CSS] 3. 선택자

필요한 내용은 지속 추가 예정

선택자는 어느 요소에 스타일을 적용할지 대상을 뜻하는 패턴을 의미한다. 

 

1. 전체선택자 " * "

---

*(와일드 카드)를 이용하여 스타일을 지정하게 되면, 페이지에 해당하는 모든 요소가 영향을 받게 된다. 이는 브라우저 마다 서로 다른 기본 스타일을 가지는  reset.css 나 normalize.css 에서 동일한 스타일로 통일하기 위해 사용하는 방법이다.

 

2. 타입 선택자

---

HTML 에서 사용되는 요소를 선택자로 사용하는 것이다. 타입 선택자를 사용하면 선택자로 사용한 모든 요소가 영향을 받게 된다. 즉, 요소 이름을 있는 그대로 선택자가 들어가야 하는 위치에 작성한다.

 

3. id 선택자  "하나의 요소(단일 요소)에만 지정하고 싶을 때 사용하는 선택자"

---

id 속성에 지정한 값을 이용해 스타일을 지정한다.  다른 HTML 속성을 지정하는 방식과 동일하게 open tag에서 id속성 값을 넣어 지정한다. id는 페이지당 하나만 가지는 단일값으로 정확하게 일치하는 단일 요소에만 지정하고 싶을 때 사용한다.

id 선택자는 id 앞에 #을 붙여서 작성한다. 예를 들어 다음 예시 처럼 요소 안에 정의된 id 명을 가져와서   #Nat과 같이 작성한다.

 

 

4. Class 선택자 " 여러 요소에 동일한 스타일을 적용하고 싶을 때 사용하는 선택자

---

id 속성과 동일한 방식으로 open tag에  class 속성을 작성한다. class 속성은 id와 다르게 여러 요소에 같은 class 값을 지정해 동일한 스타일을 지정할 수 있다

 

클래스 선택자는 class명 앞에 ' . '을 붙여 .classname의 형태로 작성한다.

 

다음 예시는 클래스명이 같은 여러 요소가 하나의 스타일로 통일되어 적용된 것을 표현한 것이다.

 

5. attribute (속성) 선택자

---

html 속성의 값들을 비교한 결과로 스타일을 지정한다. 선택자는 '요소 이름[속성명(연산자) 값]'의 형태를 갖는다.

연산자	설명
속성명	속성명만 작성하면 해당 속성을 갖는 모든 요소를 선택한다.
=	값이 정확히 일치할 때 선택한다. (단 띄어쓰기 된 것은 인지하지 못한다)  (ex. hel이라는 값과 정확히 일치하는 경우)
~=	값이 정확히 일치할 때 선택한다.( 띄어쓰기로 여러 값이 지정된 요소라도 찾아서 선택한다)
|=	값이 일치하거나 값에 하이폰(-)을 붙인 형태를 가지는 경우 선택(ex. hel 과 일치하거나, hel- 형태인 값을 가지는 경우)
^=	접두사로 값을 가지는 경우 선택
$=	접미사로 값을 가지는 경우 선택
*=	값이 포함된 모든 요소를 선택한다.

 

다음은 연산자를 각각  표현했을 때의 예시이다.

 

6. 앞서 배운 선택자를 동시에 적용하려면

---

' , '를 이용해 구분하고 해당 선택자를 연결하면 동시에 스타일 지정이 가능하다.

---

 

[CSS] 4. 박스모델과 여백 상쇄