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::beforenotation (with two colons) was introduced in CSS3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation:beforeintroduced in CSS 2.
::은 CSS3에서 도입된 문법이다.
:은 IE 8 version에서만 지원하는 구식의 문법으로 더이상 쓰이지 않는다.
::before 구문은 Pseudo-class와 Pseudo-elements를 구별하기 위해 만들어진 CSS3 문법이다.
사용하는 곳으로는
Adding quotation marksDecorative ExampleTo 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
-..-
'Dev.FrontEnd > HTML_CSS' 카테고리의 다른 글
| 6. hover와 transition을 활용하자 (0) | 2016.07.06 |
|---|---|
| 5. background 속성을 알아보자 / 그럴듯한 웹페이지 만들기 (0) | 2016.07.05 |
| [Tip] Font Awesome 활용하기! (3) | 2016.07.04 |
| [HTML/CSS] 2. Responsive Web Design / 반응형 웹이란? (0) | 2016.06.29 |
| [HTML/CSS] 3. Bootstrap Framework CSS 프레임워크 부트스트랩 사용해보기! (0) | 2016.06.29 |
