가상요소



가상(Pseudo)라는 말은 실제로 존재하지 않는 것을 일컬을 때 사용하는 말입니다. HTML에는 분명 존재하지 않는 것이지만 CSS에서 가상으로 선택자로 삼아 사용한다고 하여 가상(Pseudo)이라는 이름을 붙이게 되었습니다. 이들은 브라우저에 의해서 특정 조건 하에서 삽입되므로'가상'이라는 접두어가 붙은 것입니다.

Pseudo Porperties (가상의 속성들) (→참고)
조건, 이름 설명과 예
link 방문하지 않은 링크(link), 방문한적이 있는 링크(visited), 현재 열린 링크(active), 마우스를 갖다대는 순간의 링크(hover)
lang 사용자의 국가설정을 인식해서 해당문자에 한해 다른 문자로 치환하도록 하는 것입니다.
이러한 조건이 필요한 이유는 특히 문장부호들, 스페인에서는 물음표(?)를 ¿를 쓰고 프랑스에서는 따옴표를 각각 <<와 >> 를 쓰고, 일본과 중국에서는 아예 자체특수기호를 쓰기 때문입니다.
Quote:lang(스페인국가코드) {quest:'¿'}.....
저것은 무엇입니까 ? - 한국에서 볼때
저것은 무엇입니까 ¿ - 스페인에서 볼때
first-child 지정된 태그에 처음 오는 해당태그에만 적용이 되게 합니다.
DIV B {color:#FF0000}
DIV B:first-child {color:#FF0000;text-decoration:underline}
나는 자랑스러운 태극기 앞에
조국과 민족의 무궁한 영광을 위하여
몸과 마음을 바쳐 충성을 다할 것을
굳게 맹세합니다.
first-line 첫줄의 스타일을 적용하는 것입니다.
DIV:first-line {text-decoration:underline;}
나는 자랑스러운 태극기 앞에
조국과 민족의 무궁한 영광을 위하여
몸과 마음을 바쳐 충성을 다할 것을
굳게 맹세합니다.
first-letter 첫글자에만 적용하는 것입니다.
DIV:first-letter {color:#FF0000;font-size:13pt;}
나는 자랑스러운 태극기 앞에 조국과 민족의 무궁한 영광을 위하여 몸과 마음을 바쳐 충성을 다할 것을 굳게 맹세합니다.
before, after 앞뒤에 어떠한 문자나 공백을 무조건 삽입하라는 것입니다.
FAQ_question:before {content:질문;font-weight:bolder}
FAQ_answer:before {content:답변;font-weight:bolder}
FAQ_answer:after {content:-----도움이 되셨기를 바랍니다.;font-style:italic}
질문 : 가상클래스가 뭔가요?
답변 : 조건에 맞는 경우에만 적용되는 스타일입니다.
도움이 되셨기를 바랍니다.
before, after는 현재 웹브라우저에서 지원되고 있지 않습니다.


가상클래스(Pseudo -classes)

일반적으로 자주 사용되는 예는 마우스 오버와 아웃시 클릭시에 색이나 모양이 변하는 anchor 가상클래스입니다. 주의할 점은 가상클래스는 태그에 직접 스타일을 정의할 수 없으며 style이나 css문서에 정의되어 있어야 합니다. 사용방법은 selector이후에 colon ( : )를 붙인후 조건을 붙이면 됩니다.


앵커 가상 클래스

앵커 가상-클래스는 HTML 태그로 < A >에 해당하는 부분에 붙여지는 클래스입니다. 브라우저의 기본값은 클릭하지 않은 링크(link)는 파랑색, 한 번 방문했던 곳(visited)은 보라색, 그리고 클릭을 했을 때(active)의 색상은 빨강색으로 표시됩니다. 스타일 부분을 정리해 보면 링크되었을 때(link), 방문했을 때(visited), 하이퍼 링크에 마우스를 올렸을 때(hover), 클릭했을 때(active)를 기준으로 속성은 color, text-decoration, font-family가 적용됩니다.

< STYLE type= "text/css" >
A:link{color:값;textdecoration:값;font-family:값;}
A:visited{color:값;textdecoration:값;font-family:값;}
A:hover{color:값;textdecoration:값;font-family:값;}
A:active{color:값;textdecoration:값;font-family:값;}
< /STYLE >

가상클래스의 속성
color HTML에서 배운 것처럼 만드는 사람이 원하는 대로 바꿀 수 있습니다.
text-decoration 텍스트 장식을 의미하는데, 밑줄을 그을 것인가 긋지 않을 것인가를 결정합니다. 속성값으로는 underline과 none이 많이 사용됩니다. 이 외에 몇 가지가 더 있습니다.
font-family
  1. 적용하고자 하는 폰트를 적어주면 됩니다. 일종의 폰트를 군으로 만들어서 순차적으로 적용할 수 있게 해놓은 것입니다.
  2. 굴림, 궁서, 돋움이라고 font-family를 만들어 놓으면 웹 페이지를 보는 사용자의 시스테에 굴림체가 없을 경우에는 궁서체를 불러오고, 궁서체가 없을 경우에는 돋움체를 불러오게 하는 것입니다.
  3. CSS에서 폰트를 이렇게 다양하게 적어두는 것은 사용자마다 컴퓨터에 담겨진 폰트들이 다르기때문입니다.
  4. 애써 만든 홈페이지가 다른 사람들의 컴퓨터에서는 다른 글자로 표시되어 홈페이지의 원래 분위기가 달라질 수 있습니다. 따라서 윈도우 기본서체를 활용하면 전혀 문제가 발생하지 않습니다.

※ 예제를 들어볼까요?

< HTML >
< HEAD >
< TITLE >가상클래스 적용예제< /TITLE >
< STYLE type="text/css" >
A:link {color:blue ; text-decoration:underline ; font-family : 굴림, 궁서, 돋움;}
A:visited {color:red ; text-decoration:none ; font-family : 굴림, 궁서, 돋움;}
A:hover {color:green ; text-decoration:underline ; font-family : 굴림, 궁서, 돋움;}
A:active {color:yellow ; text-decoration:underline ; font-family : 굴림, 궁서, 돋움;}
< /STYLE >
< /HEAD >
< BODY >
< A href="http://truesky.net/">truesky.net으로 바로가기< /a >< p >
< A href="http://user.chollian.net/~fxdosa/">Fxdosa로 바로가기< /a >< p >
< A href="http://daum.net/">Daum으로 바로가기< /a >< p >
가상클래스 적용예제 truesky.net으로 바로가기

Fxdosa로 바로가기

Daum으로 바로가기
  • 현재 링크되어 있는 곳의 텍스트들이 모두 파랑색이고 밑줄이 그어져 있습니다.
  • 그런데, 현재 보이는 텍스트들 중 빨강색으로 보이는것이 있다구요? 그건 바로 한번 방문한 적이 있는 경우에는 visited 속성에 따라 빨강색으로 보여질 수 있습니다.(만일 모두 다 빨강색으로 보이시면.. 도구 인터넷 옵션에서 history '목록지우기'를 하신 후, 다시 열어보세요.)
  • 한 군데씩 마우스를 올려보고, 또 꾸~~욱 눌러 보세요. active효과를 확인할 수 있습니다.



가상요소(Pseudo -Elements)
가상요소 중에는 위에서 보시는 바와 같이 first-line, first-letter, before, after가 있습니다. 하지만, 현재 first-line과 first-letter를 제외하고는 적용되지 않으므로 이곳에서는 first-line과 first-letter만을 다루도록 하겠습니다. (first-line과 first-letter는 Exploer5.5에서 표현되어집니다.)
※Pseudo -Elements ☞ 참고하세요

First - line

first - line이 적용된 첫 번째 라인에만 영향을 주며, 둘째 라인부터는 속성값이 무시됩니다.

< HTML >
< HEAD >
< TITLE >가상요소 적용예제< /TITLE >
< STYLE type="text/css" >
< !--
P:first-line {font-size : 15pt ; color:blue ; text-decoration : underline ;}
P {font-size : 9pt ; color : red}
-- >
< /STYLE >
< /HEAD >
< BODY bgcolor="#FFFFFF" text="#000000" >
< P >첫 째 라인의 텍스트는 폰트 색상이 파랑색이고, 폰트 크기는 15pt 입니다.
하지만, 둘 째 라인 부터는 폰트 색상은 빨강색 , 폰트 크기는 9pt가 적용 되었습니다.
< /BODY >
< /HTML>

가상요소 적용예제

첫 째 라인의 텍스트는 폰트 색상이 파랑색이고, 폰트 크기는 15pt 입니다.
하지만, 둘 째 라인 부터는 폰트 색상은 빨강색 , 폰트 크기는 9pt가 적용 되었습니다.



First - letter

first-letter가 적용된 첫 번째 첫 글자에만 영향을 주며, 나머지 글자에는 적용되지 않습니다.

< HTML >
< HEAD >
< TITLE >가상요소 적용예제< /TITLE >
< STYLE type="text/css">
< !--
P:First-letter {font-size : 15pt ; color:blue ; text-decoration : underline ;}
P {font-size : 10pt ; color : red}
-- >
< /STYLE >
< /HEAD >
< BODY bgcolor="#FFFFFF" text="#000000" >
< P >First-letter가 적용된 첫 번째 첫 글자에만 영향을 주며, 나머지 글자에는 적용되지 않습니다.
< /BODY >
< /HTML >

가상요소 적용예제

First-letter가 적용된 첫 번째 첫 글자에만 영향을 주며, 나머지 글자에는 적용되지 않습니다.




hover에 색상이 적용되지 않을 때

  1. A:hover는 A:link와 A:visit 명령 다음에 위치시켜야 합니다.
  2. 그렇지 않으면 Cascading 명령들이 A:hover의 색상 특성을 감추어 버리는 경우가 발생합니다.
  3. 따라서, 작업순서는 되도록 다음과 같은 순서대로 하는것이 좋겠습니다.
    ① A:link > ② A:visit > ③ A:hover > ④ A:active


마우스를 올렸 때 밑줄과 윗줄 긋기

어떤 사이트를 방문했는데, 링크된 곳에 마우스를 올리니 아래 위로 줄이 그어져 나옵니다. 그런 효과는 어떻게 만들까요? 앞서 배운 것처럼 마우스를 올렸을 때 밑줄이 그어지는 방법은 알고 있죠?

A :hover{text-decoration:underline;}


  • hover는 마우스를 올렸을 때 보여주는 효과이며, text-decoration은 링크된 문자를 어떻게 장식할지를 결정지어 줍니다.
    1. text-decoration : underline → "밑줄을 그어주라"
    2. text-decoration : none → "밑줄을 긋지말라"
    3. text-decoration : overline→ "윗줄을 그어라"

  • 보통 A:hover는 일반적으로 하나만 적어주는데 굳이 윗 줄을 긋고 싶다면 아래의 예제처럼 A:hover를 2개 정의하면 링크된 곳에 마우스를 올릴때 아래위로 밑줄이 그어지는 효과를 만들 수 있습니다.

    < HTML >
    < HEAD >
    < TITLE >이중 줄긋기 예제 < /TITLE >
    < STYLE type="text/css" >
    A:hover {text-decoration:underline}
    A:hover {text-decoration:overline}
    < /STYLE >
    < /HEAD >
    < BODY >
    < A href="http://www.google.co.kr/" >Google로 바로가기< /a >
    < /BODY >
    < /HTML >
    가상클래스 적용예제
    Google로 바로가기



한 화면에 두 가지 형태의 링크를 줄 때

한 화면에서 두 가지 형태의 링크를 주는 방법입니다. 별로 크게 쓰이지는 않겠지만 이런 경우도 있다는 것을 알아두시면 좋겠죠? 이곳에서는 class선택자와 가상클래스를 적절히 사용하면 간단히 해결됩니다. 한번 예제를 통해서 살펴볼까요?

< HTML >
< HEAD >
< TITLE>한 화면에 두 가지 형태의 링크를 줄 때< /TITLE >
< STYLE type="text/css" >
A:link {color: blue}
A:hover{color: green;font-size:20pt;}
A.yellow:link{ color:blue;font-size:9pt;}
A.red:link {color: red ; font-size:15pt;}
< /STYLE >
< /HEAD >
< BODY bgcolor="#FFFFFF" text="#000000">
< A class="yellow" href="http://www.naver.com" >바로가기< /A >< p >
< A class="red" href="http://www.empas.com" >바로가기< /A >

한 화면에 두 가지 형태의 링크를 줄 때 바로가기

바로가기

  • < HEAD >...< /HEAD >사이에 있는 < STYLE >은 다른 곳과는 달리 link가 2개로 잡혀 있습니다.
  • 기존의 방식은 A:형식이지만, 이것은 앞서 배운 class 선택자를 이용하여 A.blue:link 또는 A.red:link 형식으로 되어 있습니다.
  • 본문에도 정의 되어 있는데 이처럼 class 선택자를 이용하여 style의 yellow와 red를 불러온 것입니다.