CSS 기본 선택자

23.03.07 ver

1. 참고 도서 & 자료

• 웹 표준의 정석 http://aladin.kr/p/Fyssu

Do it! HTML + CSS + 자바스크립트 웹 표준의 정석

---

2. 전체 선택자(universal selector)

스타일을 문서의 모든 요소에 적용할 때 사용한다.

웹 브라우저의 기본 스타일을 초기화할 때 자주 사용한다.

* { 속성: 값; ...... }

 

타입 선택자(type selector)

특정 태그를 사용한 모든 요소에 스타일을 적용한다.

태그명 { 스타일 규칙 }

 

클래스 선택자(class selector)

특정 부분만 선택해서 스타일을 적용한다.

클래스 이름을 사용해서 다른 선택자와 구별한다. 이때 클래스 이름 앞에 마침표(.)를 반드시 붙여야 한다.

.클래스명 { 스타일 규칙 }

클래스 스타일 : 클래스 선택자를 사용해 만든 스타일

이미 만들어 둔 클래스 스타일을 적용할 때는 태그 안에 class="클래스명"처럼 class 속성을 사용해서 지정한다.

 

id 선택자(id selector)

웹 문서의 특정 부분을 선택해서 스타일을 지정한다. # 기호를 사용한다는 점만 제외하면 클래스 선택자와 사용방식은 같다.

#아이디명 { 스타일 규칙 }

id 선택자는 중복해서 적용할 수 없으므로 주로 문서의 레이아웃과 관련된 스타일을 지정하거나 웹 요소에 자바스크립트 프로그램을 사용하면서 요소를 구별할 때 사용한다.

 

그룹 선택자

여러 선택자에서 같은 스타일 규칙을 사용하는 경우 쉼표(,)로 구분한다.

선택자1, 선택자2 { 스타일 규칙 }

---

3. 질문

Q. 태그와 요소는 어떻게 다른가?

HTML을 사용하다 보면 태그(tag)와 요소(element)라는 용어를 자주 만난다. 비슷해 보이지만 다르다.

태그(tag) : 말 그대로 태그 자체를 가리킨다.

요소(element) : 태그를 적용한 것을 가리킨다.

<p>p태그에 둘러싸인 내용을 요소(element)라고 한다.</p>

 

Q. 타입 선택자와 태그 선택자의 차이점은?

타입 선택자는 태그 이름을 선택자로 사용하므로 태그 선택자(tag selector)라고도 하고, 스타일을 적용하는 대상이 요소(element)이므로 요소 선택자(element selector)라고도 한다.

 

Q. 클래스 선택자와 id 선택자의 차이점은?

클래스 선택자는 문서에서 여러 번 적용할 수 있지만, id 선택자는 문서에서 한 번만 작용할 수 있다.