chapter 6-3

스타일 규칙의 선택자는, 스타일을 어떤 요소에 적용할지를 가리킵니다.

전체 선택자

전체 선택자는 스타일을 문서의 모든 요소에 적용할 때 사용합니다. 기본 형태는 다음과 같습니다:

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

별표(*)를 사용합니다. 주로 웹 브라우저의 기본 스타일을 초기화 할 때 사용합니다.

타입 선택자

특정 요소에 스타일을 적용할 때 사용합니다.

• 요소(element)란? <p>내용</p>에서, <p>는 태그 자체를 의미하고, 태그를 적용한 내용까지 포괄하는 개념을 요소라고 합니다. 기본 형태는 다음과 같습니다:

태그명 { 스타일 규칙 }

이 선택자를 적용하면, 문서 내의 해당하는 모든 태그에 스타일이 적용됩니다.

클래스 선택자

만약 같은 태그여도 서로 다른 스타일을 적용하고 싶을 수 있습니다. 이럴 때, 클래스 선택자를 사용합니다. 몇 개의 요소를 클래스로 묶어서, 해당 클래스에 스타일을 적용하는 개념입니다. 원하는 태그에 class="클래스명" 속성을 넣어서 클래스를 지정할 수 있습니다. 기본 형태는 다음과 같습니다:

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

클래스 이름 앞에 .을 찍어서 다른 선택자와 구별해야 합니다.

아이디(id) 선택자

클래스와 비슷하게 특정 요소에 적용하고 싶을 때 사용합니다. 하지만, 여러 개의 요소를 클래스로 묶는 것이 아니라 하나의 요소에 고유한 id를 부여한다는 점에서 차이가 있습니다.

• id 선택자와 클래스 선택자의 차이 동일한 id는 문서 내에서 한번만 사용해야 합니다. 즉, 여러 개의 요소를 같은 아이디를 부여하여 묶어서 사용하는 방식은 권장되지 않습니다. 단, 문법 상으로 금지된 것은 아니기 때문에

   <h1 id="user">id 선택자1</h1>
   <p id="user">id 선택자2</p>

  이런 식으로 사용해도 에러가 발생하지는 않습니다. 하지만 id는 나중에 js와 연동하여 동적화면을 구현할 때, 하나의 요소에 대한 고유값으로 해석해야 하기 때문에, 일반적으로 저런 상황에서는 id 대신 class를 쓰는 것이 좋습니다.

id 선택자의 기본 형태는 다음과 같습니다:

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

아이디명 앞에 #을 넣어서 다른 선택자와 구분합니다.

그룹 선택자

만약 사용하는 스타일이 중복되는 경우, 위에서 나온 선택자들을 묶어서 사용할 수도 있습니다. 이렇게 묶어서 사용하는 선택자를 그룹 선택자라고 합니다.

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

선택자1과 선택자2의 종류가 달라도 적용할 수 있습니다. 예를 들어

.클래스1, .클래스2, <p> { 스타일 규칙 }

같이 사용하는 경우 클래스1과 클래스2에 포함되는 모든 요소 + 모든 <p>에 대하여 스타일이 적용됩니다.