최근 글 목록
-
- 포토샵33-sharpen필터(1)
- 진보호스팅
- 2004
-
- 포토샵32-Render필터
- 진보호스팅
- 2004
-
- 포토샵32-Pixelate필터
- 진보호스팅
- 2004
-
- 포토샵31-Noise필터
- 진보호스팅
- 2004
-
- 포토샵30-Distort필터
- 진보호스팅
- 2004
2. 셀렉터(Selector)
2.1. Type Selector
2.2. Group Selector
2.3. Class attribute selector
2.4. ID Attribute Selector
2.5. Contextual selectors
2.6. Pseudo-Elements and Pseudo-Classes
2.6.1. Anchor Pseudo-Classes : :link, :visited, :active
2.1. Type Selector
Type selector는 HTML 요소를 selector로 사용하는 것이다. HTML에서는 selector를 쓸 때 대소문자를 구분하지 않는다.
H1 { font-family: Helvetica } |
2.2. Group Selector
여러 개의 selector가 같은 속성을 사용할 때는 하나로 묶어서 쓸 수 있다. 아래의 두 예는 같은 뜻이다.
H1 { font-family: Helvetica } H2 { font-family: Helvetica } H3 { font-family: Helvetica } |
H1, H2, H3 { font-family: Helvetica } |
하나의 selector가 여러 개의 속성을 사용할 때는 속성들 사이에 세미콜론(;)을 써서 쓸 수 있다. 아래의 두 예는 같은 뜻이다.
H1 { font-weight: bold } H1 { font-size: 12pt } H1 { line-height: 14pt } H1 { font-family: Helvetica } H1 { font-variant: normal } H1 { font-style: normal } |
H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: Helvetica; font-variant: normal; font-style: normal; } |
어떤 속성은 shorthand property라고 부르는 대표속성을 가지고 있어서, 위의 H1에 대한 예는 아래와 같이 더 간단하게 만들 수 있다.
H1 { font : bold 12pt/14pt Helvetica } |
2.3. Class attribute selector
Class 속성을 이용하면 여러 개의 요소를 그룹으로 묶어서 같은 스타일을 적용할 수 있다. Class attribute selector를 쓸 때는 아래의 예와 같이 마침표(.)를 사용한다.
.pastoral { color : green } /* class=pastoral 속성이 들어간 모든 요소에 적용 */ H1.red { color : red } /* class=red 속성이 들어간 H1 요소에 적용*/ ... ... 녹색으로 나오겠지... 여기도 녹색으로 나오겠지... 여기는 빨간색으로 나오겠지...여기는 검은색일꺼야. | |
2.4. ID Attribute Selector
Id 속성은 class와 비슷하지만, 한 문서에서 같은 id는 하나만 존재해야 한다는 것이 다르다. Id attribute selector를 쓸 때는 #표시를 사용한다. Id 속성을 쓰면 하이퍼링크의 대상이 될 수 있다는 점을 기억하자.
H1#z98y { letter-spacing: 0.5em } ... ... Wide text | |
2.5. Contextual selectors
"H1 안에 들어있는 EM 요소에만 파란색 글자를 주고 싶다"와 같이 특정 요소에 포함된 요소에만 스타일을 적용시키고자 할 때 contextual selector를 사용한다. 요소와 요소 사이읏?빈칸을 주고 나란히 써 주면 된다. Class나 id와 함께 사용할 수도 있다.
H1 EM { color : blue } ... ... 여기는 검은색여기도 검은색 여기는 검다가 여기는 푸른색 다시 검은색 | |
2.6. Pseudo-Elements and Pseudo-Classes
거짓 요소와 class는 보다 다양하게 스타일을 적용시키기 위해서 HTML 4.0에 존재하지 않는 요소를 만들어 낸 것을 말한다. First-line pseudo-요소와 First-letter pseudo-요소 역시 제공된다고 하나 실제로 는 제대로 구현되지 않으므로 우리는 Anchor pseudo-classes에 대해서만 알아보도록 하자.
2.6.1. Anchor Pseudo-Classes : :link, :visited, :active
링크의 색이나 밑줄 등을 바꿀 때 사용한다. :link는 한 번도 클릭하지 않은 링크, :visited는 가본 적이 있는 링크, :active는 클릭하는 순간의 링크를 말한다.
진보네트워크 | |
A.external:link(class=external인 A의 링크)와 같이 클래스와 같이 쓸 수도 있고, a.link나 a#link와 같이 link, active, visited를 클래스나 id로 사용할 수도 있다.
최근 댓글 목록