✍🏻 CSS에서 사용하는 선택자 알아보기

선택자는 웹 문서에서 어느 부분에 스타일을 적용할지 알려 주는 것이다.
📄 선택자를 사용하는 여러 가지 방법 중 많이 사용하는 선택자를 정리

📖 자주 사용하는 선택자

📌 전체 선택자

전체 선택자(universal selector)는 스타일을 문서의 모든 요소에 적용할 때 사용한다.
또한 웹 브라우저의 기본 스타일을 초기화 할 때 사용한다.

* { 
	속성: 속성값;
}

📌 타입 선택자

타입 선택자(type selector)는 특정 태그를 사용한 모든 요소에 스타일을 적용할 때 사용한다.
즉, 해당 태그를 사용하면 그 요소에 스타일이 적용된다.

/* 사용자가 만든 태그도 사용 가능 */
태그명 {
	속성: 속성값;
}

📌 클래스 선택자

클래스 선택자(class selector)는 같은 태그여도 스타일을 다르게 하고 싶을 때 사용하는 선택자이다.
클래스명은 스타일을 바꾸고 싶은 태그에 class 속성을 사용하여 class="클래스명" 으로 지정한다.

<!-- html 부분-->
<p class="title">제목 부분</p>

/* css 부분 */
.title{
	속성: 속성값;
}

📌 id 선택자

id 선택자는 클래스 선택자와 같이 특정 부분을 선택하여 스타일을 적용하고 싶을 때 사용한다. 주로 문서의 레이아웃과 관련된 스타일을 지정할 때 사용한다.
웹 요소에 적용할 때 태그 내에 id 속성을 사용하여 id="아이디명" 으로 지정한다.

#container {
	속성: 속성값;
}

✨ 클래스 선택자는 문서에서 여러 번 적용할 수 있지만 id 선택자는 문서에서 한번만 적용할 수 있다.(id 속성의 속성값은 유일하기 때문이다.)

📌 그룹 선택자

그룹 선택자는 같은 스타일을 사용하는 요소들을 묶어줄 때 사용한다.
같은 스타일을 여러번 작성하는 것보다 소스가 매우 간단해진다.

h1 {
	text-align: center;
}
p {
	text-align: center;
}
/* 그룹 선택자를 사용 */
h1, p {
	text-align: center;
}