'분류 전체보기' 카테고리의 글 목록 (3 Page)

« 2025/03 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

'분류 전체보기'에 해당되는 글 22건

2010.12.16 가상 클래스와 가상 요소
2010.12.16 선택자 (Selector)

가상 클래스와 가상 요소

Develop/CLIENT SIDE | 2010. 12. 16. 22:25

:active

요소가 활성화된 경우에 적용된다. 가장 일반적인 경우는 HTML문서에서 텍스트의 링크를 클릭하는 경우인데, 링크를 클릭하여 마우스 버튼을 누르고 있는 동안이 활성화된 상태이다. 다른 요소들도 이론적으로는 활성화가 가능하지만 실제로 CSS에서는 정의하고 있지 않다.

형식 : 가상 클래스
적용대상 : 활성화된 요소
예제 :

a:active {color: red;}
*:active {background: blue;}

:after

요소의 컨텐츠 끝부분에 생성된 컨텐츠를 추가한다. 가상 요소는 기본적으로는 인라인이지만 display 속성을 사용하여 바꿀 수 있다.

형식 : 가상 클래스
생성결과 : 요소의 컨텐츠 끝부분에 생성된 컨텐츠를 포함하는 가상 요소가 추가된다.
예제 :

a:external:after {content: " " url(/icons/globe.gif);}
p:after {content: " | ";}

:before

요소의 컨텐츠 시작부분에 생성된 컨텐츠를 추가한다. 가상 요소는 기본적으로는 인라인이지만 display 속성을 사용하여 바꿀 수 있다.

형식 : 가상 클래스
생성결과 : 요소의 컨텐츠 시작부분에 생성된 컨텐츠를 포함하는 가상 요소가 추가된다.
예제 :

a[href]:before {content: "[LINK]";}
p:before {content: attr(class);}

:first-child

특정 요소의 첫 번째 자식 요소만 선택해주는 가상 클래스이다. 예를 들어 p:first-child를 사용하면 특정 요소의 첫 번째 자식 요소인 p 요소를 선택한다. 일반적인 예상과 달리 문서요소에 있는 첫 번째 요소를 선택하는 것이 아니다. 이런 경우에는 p > *:first-child를 사용한다.

형식 : 가상 클래스
적용대상 : 특정 요소의 첫 번째 자식인 요소
예제 :

body *:first-child {font-weight: bold;}
p:first-child {font-size: 125%;}

:first-letter

요소의 첫 번째 글자에 스타일을 적용한다. 첫 번째 글자 앞에 나오는 구두점도 같이 스타일이 적용된다. 일부 언어에서는 하나의 문자로 다루어져야 되는 문자조합이 있기 때문에 사용자 에이전트는 :first-letter를 전부 적용해야 한다. CSS2.1 이전에는 :first-letter가 블록 레벨 요소에만 사용이 가능했었는데 CSS2.1에서 모든 요소에 적용이 가능하도록 확장했다. 적용 가능한 속성에는 한정이 있다.

형식 : 가상 클래스
적용대상 : 요소의 첫 번째 글자를 가지고 있는 가상 요소
예제 :

h1:first-letter {font-size: 125%;}
a:first-letter {text-decoration: line-through;}

:first-line

요소의 텍스트에서 단어의 숫자에는 관계없이 첫 줄에 스타일을 적용한다. :first-line은 블록 레벨 요소에만 사용이 가능하다. 적용 가능한 속성에는 한정이 있다.

형식 : 가상 클래스
적용대상 : 요소의 첫 줄을 가지고 있는 가상 요소
예제 :

p.lead:first-line {font-weight: bold;}

:focus

특정 요소가 포커스를 가지고 있는 동안 적용된다. HTML에서 텍스트 입력상자에 입력 커서가 생겨있는 경우, 즉 사용자가 글자를 입력하기 시작할 때를 의미한다. 링크 요소와 같은 다른 요소에도 포커스가 생길 수 있지만 CSS에서 정의하고 있지 않다.

형식 : 가상 클래스
적용대상 : 포커스를 가진 요소
예제 :

a:focus {outline: 1px dotted red;}
input:focus {background: yellow;}

:hover

요소가 머무르는 상태인 경우, 즉 사용자가 요소를 활성화하지 않은 상태로 지정하는 경우에 적용된다. 일반적인 예로는 HTML에서 링크위로 마우스를 이동시키는 경우이다. 다른 요소에도 머무르는 상태가 가능하지만 CSS에서 정의하고 있지 않다.

형식 : 가상 클래스
적용대상 : 머무르는 상태인 요소
예제 :

a[href]:hover {text-decoration: underline;}
p:hover {background: yellow;}

:lang

언어의 인코딩을 선택한다. 언어 정보는 CSS에서 지정되지 못하고, 문서 내에 지정되거나 문서와 연관되어 있어야 한다. :lang는 언어 속성 선택자와 같다.

형식 : 가상 클래스
적용대상 : 언어 인코딩 정보와 연관된 요소
예제 :

html:lang(en) {background: silver;}
*:lang(fr) {quotes: '<< ' ' >>';}

:link

아직 방문하지 않은, 즉 사용자 에이전트의 히스토리에 있지 않은 URI를 가진 링크에 적용된다. :visited 상태와 서로 반대가 된다.

형식 : 가상 클래스
적용대상 : 아직 방문하지 않은 링크
예제 :

a:link {color: blue;}
*:link {text-decoration: underline;}

:visited

이미 방문한, 즉 사용자 에이전트의 히스토리에 있는 URI를 가진 링크에 적용된다. :link 상태와 서로 반대가 된다.

형식 : 가상 클래스
적용대상 : 이미 방문한 링크
예제 :

a:visited {color: purple;}
*:visited {color: gray;}

'Develop > CLIENT SIDE' 카테고리의 다른 글

Aptana ExtJs + JQuery Code assist 방법 (0)	2011.10.19
CSS3 Transform & Matrix Filter (개체 회전) (0)	2010.12.16
자바스크립트의 나쁜 점들 (더글라스 클락포드) (0)	2010.12.16
정규 표현식 (Regular Expression) (0)	2010.12.16
선택자 (Selector) (0)	2010.12.16

Posted by Rurony

선택자 (Selector)

Develop/CLIENT SIDE | 2010. 12. 16. 22:23

전체 선택자

이 선택자는 문서내의 모든 요소명을 선택한다. 규칙적인 선택자가 없을 경우에는 전체 선택자가 영향을 준다.

형식 : *
예제 :

* {color: red;}
div * p {color: blue;}

타입 선택자

이 선택자는 문서에서 요소의 이름을 선택한다. 해당하는 요소의 모든 경우가 선택된다. (CSS1에서는 요소 선택자라고 부른다.)

형식 : 요소1
예제 :

body {background: #fff;}
p {font-size: 1em;}

자손 선택자

특정 요소의 자손관계를 이용해서 요소를 선택할 수 있다. 조상 요소의 자식 요소나 자식의 자식 등을 선택할 수 있다. (CSS1에서는 문맥 선택자라고 부른다.)

형식 : 요소1 요소2
예제 :

body h1 {font-size: 200%;}
table tr td div ul li {color: purple;}

자식 선택자

특정 요소의 자식에 해당하는 요소를 선택할 수 있다. 이 선택자는 하나의 자식 요소만 선택이 가능하기 때문에 자손 요소보다 더 제한적이다.

형식 : 요소1 > 요소2
예제 :

div > p {color: cyan;}
ul > li {font-weight: bold;}

인접 형제요소 선택자

특정 요소의 인접한 형제 요소를 선택할 수 있다. 요소와 문서 구조상의 위치만 고려되고, 두 요소 사이의 텍스트는 무시된다.

형식 : 요소1 + 요소2
예제 :

table + p {margin-top: 2.5em;}
h1 + * {margin-top: 0;}

클래스 선택자

HTML이나 SVG, MathML같은 언어에서는 '점 표기법'을 사용하여 특정 클래스를 가지고 있는 요소를 하나이상 선택할 수 있다. 클래스명은 마침표에 바로 붙여서 사용해야 하고, 여러 개의 클래스도 함께 연결해서 사용할 수 있다. 마침표 앞에 요소명이 오지 않는 경우에는 그 클래스를 가진 모든 요소가 선택된다.

형식 : 요소1.classname 요소1.classname1.classname2
예제 :

p.urgent {color: red;}
a.external {font-style: italic;}
.example {background: olive;}

id 선택자

HTML같은 언어에서는 특정 id를 가지고 있는 요소를 선택할 수 있다. id는 '#' 기호 표시에 바로 붙여서 사용해야 한다. '#' 기호 표시 앞에 요소명이 오지 않는 경우에는 그 id를 가진 모든 요소가 선택된다.

형식 : 요소1#idname
예제 :

h1#page-title {font-size: 250%;}
body#home {background: silver;}
#example {background: lime;}

단순 속성 선택자

특정 속성을 가진 요소를 선택할 수 있다.

형식 : 요소1[attr]
예제 :

a[rel] {border-bottom: 3px double gray;}
p[class] {border: 1px dotted silver;}

정확한 속성값 선택자

특정 속성에 특정한 값이 있는 요소를 선택할 수 있다.

형식 : 요소1[attr="value"]
예제 :

a[rel="Home"] {font-weight: bold;}
p[class="urgent"] {color: red;}

부분 속성값 선택자

공백으로 속성이 나누어진 속성값에서 일부를 가진 요소를 선택할 수 있다. [class~="value"]는 .value와 같다.

형식 : 요소1[attr~="value"]
예제 :

a[rel~="friend"] {text-transform: uppercase;}
p[class~="warning"] {background: yellow;}

시작하는 속성값 선택자

속성값이 특정 값으로 시작하는 요소를 선택할 수 있다.

형식 : 요소1[attr^="substring"]
예제 :

a[href^="/blog"] {text-transform: uppercase;}
p[class^="test-"] {background: yellow;}

끝나는 속성값 선택자

속성값이 특정 값으로 끝나는 요소를 선택할 수 있다.

형식 : 요소1[attr$="substring"]
예제 :

a[href$=".pdf"] {font-style: italic;}

임의 속성값 포함 선택자

속성값이 임의의 값을 포함하는 요소를 선택할 수 있다.

형식 : 요소1[attr*="substring"]
예제 :

a[href*="oreilly.com"] {font-weight: bold;}
div[class*="port"] {border: 1px solid red;}

언어 속성 선택자

하이픈(-)으로 조합된 일련의 값이 있는 lang 속성에 특정 값을 포함하는 요소를 선택할 수 있다.

형식 : 요소1[lang|="lc"]
예제 :

html[lang|="en"] {color: gray;}

'Develop > CLIENT SIDE' 카테고리의 다른 글

Aptana ExtJs + JQuery Code assist 방법 (0)	2011.10.19
CSS3 Transform & Matrix Filter (개체 회전) (0)	2010.12.16
자바스크립트의 나쁜 점들 (더글라스 클락포드) (0)	2010.12.16
정규 표현식 (Regular Expression) (0)	2010.12.16
가상 클래스와 가상 요소 (0)	2010.12.16