선택자는 웹 문서에서 어느 부분에 스타일을 적용할지 알려 주는 것이다.
📄 선택자를 사용하는 여러 가지 방법 중 많이 사용하는 선택자를 정리
전체 선택자(universal selector)는 스타일을 문서의 모든 요소에 적용할 때 사용한다.
또한 웹 브라우저의 기본 스타일을 초기화 할 때 사용한다.* { 속성: 속성값; }
타입 선택자(type selector)는 특정 태그를 사용한 모든 요소에 스타일을 적용할 때 사용한다.
즉, 해당 태그를 사용하면 그 요소에 스타일이 적용된다./* 사용자가 만든 태그도 사용 가능 */ 태그명 { 속성: 속성값; }
클래스 선택자(class selector)는 같은 태그여도 스타일을 다르게 하고 싶을 때 사용하는 선택자이다.
클래스명은 스타일을 바꾸고 싶은 태그에 class 속성을 사용하여 class="클래스명" 으로 지정한다.<!-- html 부분--> <p class="title">제목 부분</p>
/* css 부분 */ .title{ 속성: 속성값; }
id 선택자는 클래스 선택자와 같이 특정 부분을 선택하여 스타일을 적용하고 싶을 때 사용한다. 주로 문서의 레이아웃과 관련된 스타일을 지정할 때 사용한다.
웹 요소에 적용할 때 태그 내에 id 속성을 사용하여 id="아이디명" 으로 지정한다.#container { 속성: 속성값; }
그룹 선택자는 같은 스타일을 사용하는 요소들을 묶어줄 때 사용한다.
같은 스타일을 여러번 작성하는 것보다 소스가 매우 간단해진다.h1 { text-align: center; } p { text-align: center; } /* 그룹 선택자를 사용 */ h1, p { text-align: center; }