<<" ">>" "<" ">"; } </style>

μ΄λ²ˆμ—λŠ” CSS의 μŠˆλ„ν΄λž˜μŠ€μ— λŒ€ν•΄μ„œ μ•Œμ•„λ³΄λ„λ‘ ν•˜κ² μŠ΅λ‹ˆλ‹€.  

μŠˆλ„ν΄λž˜μŠ€λŠ” νŠΉμ • 셀렉터에 νŠΉλ³„ν•œ 효과λ₯Ό λΆ€μ—¬ν•˜κΈ° μœ„ν•΄μ„œ μ‚¬μš©λ©λ‹ˆλ‹€. Javascript λ‚˜ μ–΄λ– ν•œ λ‹€λ₯Έ script λ₯Ό μ‚¬μš©ν•  ν•„μš”κ°€ μ—†μŠ΅λ‹ˆλ‹€.

 

μŠˆλ„ν΄λž˜μŠ€λ₯Ό μ‚¬μš©ν•˜λŠ” 기본적인 문법은 λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€. 

selector:pseudo-class {property: value}

 

CSS 클래슀λ₯Ό μ‚¬μš©ν•  μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€. 

selector.class:pseudo-class {property: value}

 

λ‹€μŒμ€ κ°€μž₯ 많이 μ‚¬μš©λ˜λŠ” μŠˆλ„ ν΄λž˜μŠ€λ“€ λͺ©λ‘ 및 μ„€λͺ…μž…λ‹ˆλ‹€.

ValueDescription
:linkUse this class to add special style to an unvisited link.
:visitedUse this class to add special style to a visited link.
:hoverUse this class to add special style to an element when you mouse over it.
:active Use this class to add special style to an active element.
:focusUse this class to add special style to an element while the element has focus.
:first-childUse this class to add special style to an element that is the first child of some other element.
:langUse this class to specify a language to use in a specified element.

<style>...</style> 블락 내에 μŠˆλ„ 클래슀λ₯Ό μ΄μš©ν•˜κ²Œ 될 λ•Œμ—λŠ” λ‹€μŒκ³Ό 같은 사항을 μ£Όμ˜ν•΄μ•Όν•©λ‹ˆλ‹€. 

  • a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.

  • a:active MUST come after a:hover in the CSS definition in order to be effective.

  • Pseudo-class names are not case-sensitive.

  • Pseudo-class are different from CSS classes but they can be combined.


The :link pseudo-class

λ‹€μŒμ€ λ‹¨μˆœνžˆ 링크의 색상을 λ³€κ²½ν•˜λŠ” μ˜ˆμ œμž…λ‹ˆλ‹€. 

<style type="text/css">
a:link {color:#000000}
</style>
<a href="/html/index.htm">Black Link</a>


The :visited pseudo-class

λ‹€μŒμ€ ν•œλ²ˆ 이상 λ°©λ¬Έν•œ 링크의 색상을 λ³€κ²½ν•˜λŠ” μ˜ˆμ œμž…λ‹ˆλ‹€. 

<style type="text/css">
a:visited {color: #006600}
</style>
<a href="/html/index.htm">Click this link</a>

 

 

 

 

 

The :hover pseudo-class

λ‹€μŒμ€ 마우슀 μ»€μ„œκ°€ 링크 μœ„μ— μ˜¬λΌκ°”μ„ λ•Œ 색깔을 λ³€κ²½ν•˜λ„λ‘ ν•˜λŠ” μ˜ˆμ œμž…λ‹ˆλ‹€.

<style type="text/css">
a:hover {color: #FFCC00}
</style>
<a href="/html/index.htm">Bring Mouse Here</a>



The :active pseudo-class

 :active μŠˆλ„ ν΄λž˜μŠ€λŠ” ν™œμ„±ν™”λœ μš”μ†Œμ— λŒ€ν•œ 속성을 μ§€μ •ν•©λ‹ˆλ‹€.  

λ‹€μŒμ€ ν™œμ„±ν™”λœ 링크의 색상을 λ³€κ²½ν•˜λŠ” μ˜ˆμ œμž…λ‹ˆλ‹€. 

<style type="text/css">
a:active {color: #FF00CC}
</style>
<a href="/html/index.htm">Click This Link</a>



The :focus pseudo-class

이 ν΄λž˜μŠ€λŠ” 포컀슀λ₯Ό 받은 μš”μ†Œμ— λŒ€ν•œ μ†μ„±μ˜ 속성값을 지정할 λ•Œ μ‚¬μš©ν•©λ‹ˆλ‹€. 

λ‹€μŒμ€ 포컀슀된 링크의 색상을 λ³€κ²½ν•˜λŠ” μ˜ˆμ œμž…λ‹ˆλ‹€. 

<style type="text/css">
a:focus {color: #0000FF}
</style>
<a href="/html/index.htm">Click this Link</a>

 

 

 


The :first-child pseudo-class

 :first-child μŠˆλ„ ν΄λž˜μŠ€λŠ” μ΄λ¦„λ§Œ 봐도 첫번째 μžμ‹μ— λŒ€ν•œ 속성을 μ„€μ •ν•˜λŠ”κ±°λΌκ³  λ³΄μ΄λ„€μš”.

이 μŠˆλ„ν΄λž˜μŠ€λ₯Ό μ‚¬μš©ν•˜μ‹œλ €λ©΄ IE μ—μ„œλŠ” λ¬Έμ„œ κ°€μž₯ μœ—λΆ€λΆ„μ— <!DOCTYPE> λ₯Ό λ„£μ–΄μ£Όμ…”μ•Ό ν•©λ‹ˆλ‹€.

 

그럼 예제λ₯Ό ν•œλ²ˆ λ³΄μ‹œμ£ . λͺ¨λ“  divνƒœκ·Έμ˜ 첫번째 문단을 μΈλ΄νŠΈν•˜μ—¬ 화면에 λΏŒλ €μ£ΌλŠ” μ˜ˆμ œμž…λ‹ˆλ‹€. 

<style type="text/css">
div > p:first-child
{
text-indent: 25px;
}
</style>
<div>
<p>
First paragraph in div. This paragraph will be indented
</p>
<p>
Second paragraph in div. This paragraph will not be  indented
</p>
</div>

But it will not match the paragraph in this HTML:

<div>
<h3>Heading</h3>
<p>
The first paragraph inside the div.
This paragraph will not be effected.
</p>
</div>

 

κ²°κ³ΌλŠ” μ•„λž˜μ™€ κ°™μŠ΅λ‹ˆλ‹€. 

       First paragraph in div. This paragraph will be indented

Second paragraph in div. This paragraph will not be indented

But it will not match the paragraph in this HTML:

Heading

The first paragraph inside the div.
This paragraph will not be effected.

 


The :lang pseudo-class

 :lang μŠˆλ„ ν΄λž˜μŠ€λŠ” νŠΉμ • μš”μ†Œμ˜ lang속성에 λ”°λΌμ„œ λ‹€λ₯Έ 값을 쀄 λ•Œ μ‚¬μš©ν•©λ‹ˆλ‹€.

λ‹€κ΅­μ–΄ 처리λ₯Ό ν•„μš”λ‘œν•˜λŠ” μ›ΉνŽ˜μ΄μ§€λ₯Ό λ§Œλ“€λ•Œ μœ μš©ν•˜κ²Œ μ‚¬μš©ν•˜μ‹€ 수 μžˆμŠ΅λ‹ˆλ‹€. 예λ₯Ό λ“€λ©΄ 인용문ꡬ 같은 κ²½μš°μ— λΆˆμ–΄μ—μ„œλŠ” κΊ½μ‡  λ‘κ°œλ‘œ 인용문ꡬλ₯Ό ν‘œν˜„ν•˜μ§€λ§Œ μ˜μ–΄μ—μ„œλŠ” κ·Έλƒ₯ ν™‘λ”°μ˜΄ν‘œλ‚˜ μŒλ”°μ˜΄ν‘œλ₯Ό μ΄μš©ν•©λ‹ˆλ‹€. μ΄λŸ΄λ•Œ 이 :lang μŠˆλ„ 클래슀λ₯Ό μ΄μš©ν•˜μ‹œλ©΄ μ’‹μŠ΅λ‹ˆλ‹€.

그럼 예제λ₯Ό ν†΅ν•΄μ„œ 쒀더 μ•Œμ•„λ³΄λ„λ‘ ν•˜μ£ .  

 

λ‹€μŒ μ˜ˆμ œλŠ” <blockquote> νƒœκ·Έλ₯Ό ν˜„μž¬ μ‚¬μš©μ€‘μΈ 언어에 맞게 λ³€κ²½ν•΄μ€λ‹ˆλ‹€.

<style type="text/css">
/* Two levels of quotes for two languages*/
:lang(en) { quotes: '"' '"'  "'"  "'"; }
:lang(fr) { quotes: "<<" ">>" "<" ">"; }
</style>
<p>...<q lang="fr">A quote in a paragraph</q>...</p>

μœ„ μ˜ˆμ œμ—μ„œ :lang μ…€λ ‰ν„°λŠ” λ¬Έμ„œ 전체 μš”μ†Œμ— μ μš©λ©λ‹ˆλ‹€.   

 

κ²°κ³ΌλŠ” μ•„λž˜μ™€ κ°™μŠ΅λ‹ˆλ‹€. 

 

...<<A quote in a paragraph>>...

 

 

 

 

 


 

 

Reference : http://www.tutorialspoint.com/css/css_pseudo_classes.htm