선택기는 CSS 스타일이 HTML 요소에 할당되는 방식을 결정합니다. 해당 정의의 경우 먼저 선택기가 액세스할 요소의 이름을 지정합니다. 그런 다음 실제 선언은 중괄호 안에 이루어집니다. 선언 내에 하나 이상의 속성을 지정할 수 있습니다. 따라서 일반적인 구문은 다음과 같습니다:
선택자 { property1: 값; property2: 값; property3: 값; }이전 튜토리얼에서 이미 해당 정의를 보셨을 것입니다.
h1 { font-family: "Courier New", Courier, monospace; font-size: 200%; }
각 선언은 세미콜론으로 끝내야 합니다.
사용 가능한 선택자 살펴보기
CSS에는 실제로 꽤 많은 선택자가 있는데, 그 중 가장 중요한 선택자를 소개하겠습니다. 한 가지 분명한 것은 선택자를 사용하는 방법을 알아야만 CSS 속성을 제대로 정의할 수 있다는 것입니다.
HTML 문서 내에서 스타일을 할당하는 가장 쉬운 방법은 요소 선택기를 사용하는 것입니다.
다음 구문은 모든 p 요소에 검정색을 할당합니다.
p { color: #009966; }
여러 요소에 동일한 스타일을 할당하려는 경우에도 가능합니다.
이 경우 관련 요소를 쉼표로 구분하여 하나씩 차례로 지정하면 됩니다.
p, h1, li { color: #000; }
요소에 여러 스타일을 할당할 수도 있습니다. 이 경우 스타일은 세미콜론으로 서로 구분됩니다.
p { 색상: #000; 배경색: 빨간색; }
위의 변형을 조합할 수도 있습니다.
p, h1, li { 색상: #009966; 배경색: 빨간색; }
결과는 다음과 같이 보일 수 있습니다:
여러 요소가 있는 영역
여러 HTML 요소로 구성된 영역의 서식을 지정해야 하는 경우가 종종 있습니다. 이러한 경우 HTML에는 스팬과 div라는 두 가지 특수 요소가 있습니다. 이 시리즈에서 이러한 요소를 계속해서 만나게 될 것입니다.
예를 들어 보겠습니다:
<div class="article"> <h1>색상 폭발</h1> <p class="topic"><span class="author">MarkusMelzer</span>의 색상 폭발 생성에 대한 튜토리얼입니다.</p> </div>
div와 span의 유일한 차이점은 div 요소는 텍스트 흐름에 새 줄을 강제 생성한다는 것입니다. 반면에 span은 새 줄을 생성하지 않습니다. 표시된 예시에서는 제목과 텍스트 단락을 포함하는 div 영역이 정의되어 있습니다. 차례로 텍스트 단락 내에 스팬 영역이 있습니다.
ID 및 클래스 선택기
지금까지 요소 선택기를 사용했습니다. 다음 예제에서는 모든 h1 제목이 이러한 선택기를 사용하여 서식이 지정됩니다.
h1 {색: #000; 배경색: 빨간색; }
물론 이 형식이 항상 바람직한 것은 아닙니다. 예를 들어 모든 h1 머리글이 아닌 하나 또는 일부에만 특정 속성을 할당하려는 경우에는 어떻게 해야 할까요? CSS는 이러한 경우를 위한 두 가지 옵션, 즉 클래스 선택자와 ID 선택자를 제공합니다.
클래스 선택기는 클래스 속성이 있는 HTML 요소를 구체적으로 선택하는 데 사용할 수 있습니다. 클래스 속성은 해당 HTML 요소에 지정되어야 합니다. 클래스 정의는 점으로 시작합니다.
예시
.red {색: 빨간색; }빨간색 클래스가 여기에 정의되었습니다. 빨간색에 할당된 속성을 HTML 요소에 추가하려면 class 뒤에 클래스 이름을 입력합니다.
<p class="rot">PSD-Tutorials.de</p>
ID 선택기도 마찬가지로 사용하기 쉽습니다. ID 선택기는 이중 십자 표시로 인식할 수 있습니다.
#topnavi {색: 파란색; };이 예제에서는 topnavi라는 ID가 정의되어 있습니다. 하지만 주의: 문서 내에서 ID는 한 번만 할당할 수 있습니다. 정의된 ID 속성에 대한 액세스는 다음과 같습니다:
<div id="topnavi">여기는 탐색입니다</div>
ID 이름은 ID 속성에 할당됩니다. 여기에 이중 십자가가 표시되지 않았는지 확인하세요.
표시된 정보는 서로 결합할 수도 있습니다. 예를 들어 HTML 요소에 여러 클래스를 할당할 수 있습니다.
<p class="red large">PSD-Tutorials.de</p>
이 예에서는 빨간색과 큰 두 클래스가 텍스트 단락에 할당되어 있습니다. 클래스와 ID를 지정하려는 경우 다음과 같이 표시됩니다:
<p class="rot" id="navi">PSD-Tutorials.de</p>
요소와 ID를 결합할 수도 있습니다. 다음은 다른 예시입니다:
div.navi { color: blue; }
이 구문은 navi 클래스가 있는 div 요소에만 적용됩니다. navi 클래스가 있는 p 요소는 영향을 받지 않습니다.
CSS에서 선택기를 결합하는 또 다른 방법이 있습니다. 다음 구문을 살펴보세요:
h1 {색상: 빨간색; } em {색상: 파란색; }
여기서 첫 번째 순서의 모든 제목에는 빨간색이 할당됩니다. 반면에 em 요소에는 파란색이 할당됩니다.
그러나 두 지침을 결합하면 이제 h1 요소 내에 있는 em 요소만 파란색으로 지정할 수 있습니다.
h1 em { color: blue; };
여기서 요소 이름은 쉼표 없이 구분됩니다.
덧붙여서, 이것은 CSS 초보자도 자주 빠지는 오류 함정입니다. 다음은 동일한 구문이지만 쉼표가 있는 예시입니다:
h1, em { color: blue; }
이 구문은 무엇을 의미할까요? 모든 h1과 모든 em 요소가 주소가 지정됩니다. 따라서 쉼표가 없는 구문과는 완전히 다릅니다!
또 다른 중요한 선택기는 범용 선택기입니다. 이를 통해 모든 요소를 선택할 수 있습니다. 이 선택기는 별표를 통해 정의됩니다.
* { color: red; }
이 구문은 모든 요소의 색을 빨간색으로 지정합니다. 이 선택기에는 고려해야 할 몇 가지 구문 특성이 있습니다.
#메인내비 * { 색상: 빨간색; }
이 예제에서는 ID가 mainnavi인 요소 내의 모든 요소의 전경색이 빨간색으로 설정됩니다. 그러나 이는 요소 자체에는 적용되지 않습니다.
유니버설 선택기가 선언의 시작 부분에 있다면 주목할 필요가 없습니다. 따라서 이와 같은 것은 불필요합니다:
* p { color: red; }
이 구문은 다음과 같습니다:
p { color: red; }
다음 튜토리얼에서 더 많은 선택자에 대해 알아볼 것입니다.
