Table of contents
- 1. 정보: 선별자(Selectors)
- 2. 액션: 클래스 와 아이디 선별자 사용하기
- 2.1. 그럼 다음은?
이 페이지는 어떻게 스타일을 선별적으로 적용할 수 있는 지, 그리고 다른 종류의 선별자들이 어떻게 다른 우선권을 갖는지를 설명합니다.
샘플 문서안의 택에 몇몇 속성들을(attributes) 첨가하고, 이 속성들을 샘플 스타일시트안에서 사용합니다.
정보: 선별자(Selectors)
CSS는 CSS를 기술하는 자신만의 용어들을 갖고 있습니다. 먼저 번 이 튜토리얼에서, 스타일 시트안에 아래와 같은 라인을 만들어 넣었습니다:
strong {color: red;}
CSS 용어로 이 전체 라인은 규칙(rule)입니다. 이 규칙은 strong 이라는 선별자로 시작합니다. 이 선별자는 DOM안의 어떤 엘리먼트에 이 규칙이 적용될 지를 선별합니다.
| 휘어진 괄호안에 있는 부분은 선언부 입니다.
키워드 속성-값 쌍 사이의 세미콜론은 이 쌍을 같은 서술내에 있는 다른 속성-값 쌍들과 분리합니다. 이 튜토리얼에서 |
튜토리얼의 이 페이지는 CSS 규칙들에서 사용할 수 있는 선별자들에 대해서 좀 더 설명합니다.
택 이름들에 더해서, 선별자들 안에서 속성 값들을 사용할 수 있습니다. 이것은 규칙들을 보다 상세하게 만들어 줍니다.
두개의 특성이 CSS에서 특별한 위치를 차지하며, 이들은 class 그리고 id입니다.
어떤 택을 이름이 주어진 클래스에 할당하려면 class속성을 사용하세요. 그 클래스의 이름은 마음대로 정할 수 있습니다.
스타일 시트에서, 클래스 이름을 선별자안에서 사용하려고 하면 클래스 이름 앞에 마침표를 타이핑하세요.
어떤 택에 아이디(id)를 할당하려면 id를 사용하세요. 아이디도 여러분 마음대로 정할 수 있습니다. 아이디 이름은 문서 내에서 고유한 것이어야만 합니다.
스타일 시트안에서, 선별자 안에 아이디를 사용하려면 숫자기호(해쉬)를 아이디 앞에 타이핑하세요.
이 HTML택은 class속성과 id속성을 둘다 갖고 있습니다.
<P class="key" id="principal"> 아이디, CSS 스타일 시트에서, 다음 규칙은
.key {color: green;}
이 규칙은 아이디
#principal {font-weight: bolder;}
|
만일 하나 이상의 규칙이 한 엘리먼트에 적용되고 동일한 속성을 지정하게 되면, CSS는 더 상세한 선별자를 가진 규칙에 우선권을 줍니다. 아이디 선별자는 클래스 선별자보다 더 상세하며, 클래스 선별자는 택 선별자보다 더 상세합니다.
| 선별자들을 결합하여, 더 상세한 선별자를 만들수도 있습니다.
예를 들면, 선별자 이 두 특별한 속성 이 튜토리얼의 뒤 페이지에 (Tables) 관계성에 기반을 둔 복잡한 선별자들에 관한 정보가 있습니다. 선별자들에 대한 완전한 정보를 원하시면, CSS 규정안에 있는 Selectors를 보세요. |
만일 스타일 시트가 상충하는 규칙들을 가지고 있으며, 이들이 동등하게 상세할 경우, CSS는 스타일 시트 뒤쪽에 오는 규칙에 우선권을 줍니다.
서로 상충하는 규칙들로 문제가 생긴다면, 규칙들중 하나를 더 상세하게 해서 우선권을 가지게 함으로써 문제를 해결하세요. 이렇게 할 수 없을 경우, 규칙들중 하나를 스타일 시트의 거의 끝부분으로 옮겨 놓음으로써 우선권을 가지게 해보세요.
액션: 클래스 와 아이디 선별자 사용하기
HTML 파일을 편집하는 데, 단락을 복사및 붙여넣기로 복사하세요. 첫번째의 복사본에 아이디와 클래스 특성을 그리고 두번째에는 아이디 특성을 아래처럼 더하세요. 아니면, 전체 파일을 복사해서 붙여 넣으세요.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Sample document</TITLE>
<LINK rel="stylesheet" type="text/css" href="style1.css">
</HEAD>
<BODY>
<P id="first">
<STRONG class="carrot">C</STRONG>ascading
<STRONG class="spinach">S</STRONG>tyle
<STRONG class="spinach">S</STRONG>heets
</P>
<P id="second">
<STRONG>C</STRONG>ascading
<STRONG>S</STRONG>tyle
<STRONG>S</STRONG>heets
</P>
</BODY>
</HTML>
이제 CSS 파일을 편집하세요. 전체 내용물을 다음의 내용으로 교체하세요:
strong {color: red;}
.carrot {color: orange;}
.spinach {color: green;}
#first {font-style: italic;}
결과를 볼 수 있게 브라우저를 리프레쉬하세요:
| Cascading Style Sheets |
| Cascading Style Sheets |
순서가 아무 영향을 미치지 않는다는 것을 보기위해서 CSS 파일의 라인들을 다시 배열해 볼 수도 있습니다.
클래스 선별자 .carrot 그리고 .spinach는 택 선별자strong에 대해서 우선권을 갖습니다.
아이디 선별자 #first는 클래스와 택 선별자들에 대해서 우선권을 갖습니다.
HTML 파일의 수정없이 CSS 파일에 하나의 규칙을 더해서 모든 첫 문자들이 지금 자신들이 가지고 있는 것과 동일한 색을 유지하되, 두번째 단락의 모든 다른 텍스트는 푸른색이 되게 하세요:
이제 방금 더한 규칙을 변경해서 (다른 것은 변경없이) 첫번째 단락도 푸른색으로 만드세요:
|
그럼 다음은?
If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.
샘플 스타일 시트가 꽤 무겁고 복잡해 보이기 시작합니다. 다음 페이지에서는 CSS를 보다 읽기 쉽게 만드는 방법들을 기술합니다: Readable CSS
Page last modified 10:00, 24 Aug 2006 by Ioseph?