본문 바로가기

Dev.FrontEnd/HTML_CSS

4. Pseudo Class 와 Pseudo Element 활용하기

Chapter 4. Pseudo Class와 Pseudo Element 활용하기

가상 요소만 잘 알고 활용해도, 인터랙티브한 웹 페이지를 구성할 수 있다.
Pseudo Class
Pseudo Class는 단순한 선택자(simple selector)로는 표현할 수 없는 어떤 것을 select하는 선택자이다.
특정한 상태말고 규칙에 따라 상태가 바뀌는 요소를 선택할 때 사용하는 것이다.

종류
Dynamic pseudo-class
:hover
:visited
:link
:active
:focus
위 네 개는 anchor tag(a태그)와 함께 자주 쓰인다.
그리고 focus tag는 input tag와 함께 쓰인다.

UI element states pseudo-class
:enabled
:disabled
:checked

Structural pseudo-class
:first-child
:empty
:empty 는 제목위에 짧은 선으로 꾸미는 용도로 활용할 수 있다.
이런식으로!

Pseudo Element
Pseudo Element는 document tree에 존재하지 않은 것을 생성할 때 사용하는 것이다.

종류
::after
::before
::first-letter
::first-line

Q. :after, :before 도 보았는데, 그것은 무엇인가?
: 과 :: 의 차이는 무엇인가?
The ::before notation (with two colons) was introduced in CSS3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation :before introduced in CSS 2.
::은 CSS3에서 도입된 문법이다.
:은  IE 8 version에서만 지원하는 구식의 문법으로 더이상 쓰이지 않는다.
::before 구문은 Pseudo-class와 Pseudo-elements를 구별하기 위해 만들어진 CSS3 문법이다.

사용하는 곳으로는
Adding quotation marks
Decorative Example
To do List!!!

<style> p::before{ content: “Read this~”; } </style> <body> <p> 이것이 출력되기 전에 </p> <p> 다음에 이것이 출력되기 전에 </p> </body>


라고 되어있으면
Read this~ 이것이 출력되기 전에  
Read this~ 다음에 이것이 출력되기 전에
라고 출력된다.
예제가 조금 좋지 않지만, 

content 말고 다른 요소들도 들어갈 수 있는데,
그 다른 요소들은 content를 꾸며주는 css가 되겠다.
p::before {
    content: "Read this ~";
    background-color: yellow;
    color: red;
    font-weight: bold;
}
content를 제외한 다른 속성들은 Read this~ 의 배경을 노랗게, 색을 빨갛게, 굵게 만든다.

Reference


-..-