1.2.5.1 CSS 구성 요소 - 선택자(selector)
CSS 스타일은 선택자와 스타일 속성, 그리고 속성에 대한 값으로 이루어진다. 이중 선택자는 스타일 속성의 묶음이다. 선택자 하나에 여러 스타일 속성-글자크기, 여백, 색, 테두리 등-을 지정할 수 있으며 문서에서는 이 선택자를 이용해 글자나 문단에 스타일을 적용할 수 있다. (CSS 기본 구조 참고) 선택자는 태그, 클래스, ID, 그룹 등 여러 방식으로 지정할 수 있다.
1. 태그 선택자
- 태그를 선택자로 사용하면 HTML 태그 스타일을 변경할 수 있다. 예를 들어 <h1>태그의 기본 글자 크기와 줄간격은 뷰어에 따라 정해져 있다. 그런데 CSS 파일에서 <h1>태그에 스타일을 적용하면 본문에서 <h1> 태그에 아무런 스타일을 지정하지 않아도 CSS에서 지정한 스타일이 적용된다.
CSS 스타일 시트를 만들때 h, p 태그 등 많이 사용하는 태그는 태그 선택자로 스타일을 적용해 두면 태그별로 스타일을 지정할 필요가 없기 때문에 편집하는데 시간을 절약할 수 있다. 모든 태그에 스타일을 지정할 수 있으며 동일한 스타일이 반복되는 텍스트 관련 태그(p, hx, cite, strong 등)에 스타일을 지정하면 편하게 사용할 수 있다.
style.css
=======
h1 {
font-size:1.5em;
}
h2 {
font-size:1.2em;
}
h3 {
font-size:1em;
}
=======
style.html
<h1>(h1)책 제목</h1>
<h2>(h2)부 제목</h2>
<h3>(h3)장 제목</h3>
<p>(p)본문</p>
h 태그에 스타일을 적용했을 때
h 태그에 스타일을 적용하지 않았을 때
2. 클래스 선택자
- CSS에서 가장 많이 사용하는 선택자이다. 태그 선택자는 지정된 태그 명을 사용해야 하지만 클래스 선택자는 클래스의 이름을 성격에 맞게 정할 수 있다.(단, 영문과 숫자를 권장한다) 예를 들어 이미지와 관련된 클래스라면 앞에 img를, 텍스트와 관련된 클래스라면 txt를 붙이는 식이다. 이미지 편집을 위해 왼쪽정렬, 오른쪽 정렬, 가운데 정렬을 많이 사용한다면 img_left, img_right, img_center 처럼 클래스의 쓰임에 따라 이름을 지정하면 된다.
클래스를 지정하려면 .(점dot)을 찍고 클래스 이름을 쓴 후 스타일을 지정하면 된다. 클래스 이름은 사용자가 해당 클래스의 쓰임을 쉽게 파악할 수 있게 지정하는게 좋다.
.class_name { 스타일 }
클래스를 태그에 사용하기 위해서는 class라는 속성을 사용한다.
<p class="class_name">내용</p>
style.css
=========
.img_center {
text-align=center;
}
.img_left{
text-align : left;
}
.img_right{
text-align : right;
}
=========
style.html
=========
<img class="img_center" src="sample.png" alt"샘플" />
3. 태그에 종속된 클래스
- 클래스는 특정 태그에 종속된 형태로 사용할 수도 있다. <p> 태그와 <h1> 태그에 가운데 정렬을 적용하고 싶은데 <p> 태그는 글자 색을 빨간색으로, <h1>태그는 글자 색을 파란색으로 하고 싶다고 하자. 이럴때 클래스 명을 center로 지정하면서 <p>태그와 <h1>태그에 서로 다른 스타일이 적용되도록 할 수 있다.
태그.class_name { 스타일 }
style.css
==========
h1.center {
text-align:center;
color:blue;
}
p.center {
text-align:center;
color:red;
}
==========
style.html
==========
<h1 class="center">(h1)책 제목</h1>
<p class="center">(p)본문</p>
h1 태그와 p 태그에 center 클래스를 지정했지만
태그에 종속된 클래스로 인해 서로 다른 스타일이 적용된다.
4. 그룹 선택자
- 태그나 클래스에 동일한 스타일을 적용할 경우 그룹으로 묶을 수 있다. 만약 h1, h2, h3에 동일한 스타일을 적용하고 싶다면 각 태그에 스타일을 적용할 수도 있지만 그룹으로 지정해서 한번에 스타일을 적용할 수 있다. 그룹으로 선택자를 지정하려면 선택자를 ,(콤마)로 구분해서 나열한 후 스타일을 지정한다.
h1, h2, h3 { 공통 스타일 }
style.css
==========
h1, h2, h3 {
text-align:center;
color:blue;
}
==========
style.html
==========
<h1>(h1)책 제목</h1>
<h2>(h2)책 제목</h2>
<h3>(h3)책 제목</h3>
그룹으로 선택자를 지정하면
개별 속성은 유지하면서 그룹으로 지정한 속성은 공통으로 적용된다.
5. ID 선택자
- ID 선택자는 클래스 선택자와 유사하지만 스타일을 적용할 때 class 대신 ID를 사용한다. 하나의 ID는 문서 내에서 반드시 한번만 사용할 수 있다. ID는 특정 위치로 이동하거나 특정 단어의 주석을 연결해 주는 역할을 하기 때문에 동일한 ID가 한 문서에 하나 이상 사용될 수 없다. 그래서 ID 선택자는 많이 사용하지 않는다. ID 선택자는 선택자 이름 앞에 #을 붙이고, 반드시 영문으로 시작해야 한다.
#selector_name { 스타일 }
<p ID="selector_name"> 내용 </p>
style.css
==========
#commant_01 {
font-size:0.8em;
color:blue;
}
#commant_02 {
font-size:0.8em;
color:red;
}
style.html
==========
<p id="commant_01">첫번째 주석</p>
<p id="commant_02">두번째 주석</p>
**
ID는 문서 내에 특정 위치나 특정 내용을 연결할 때 사용한다. 그렇기 때문에 하나의 단락에는 하나의 ID만 사용할 수 있다. 다만 해당 내용을 참고하거나 그 위치로 이동하는 링크에는 여러번 사용 가능하다.