CSS Selectors - before, after

 

CSS Pseudo Selectors

 

---

 

• CSS는 브라우저가 해석한 HTML DOM 트리구조를 기준으로 HTML tag를 스타일링 합니다.
• 이때에 어떠한 태그를 선택하여 스타일링 할지 선택해야하는데요, 이것을 우리는 셀렉터(선택자)라고 부릅니다.
• 가상클래스(Pseudo Class)는 독립적으로 사용하기 보다, 특정한 태그 뒤에 붙어서 보통 사용하게 됩니다.
• CSS는 참 많은 셀렉터와 방식이 있는데요, 한번 알아봅시다~!

 

저는 자주쓰이는 것 위주로만 정리를 해놓을거라, 전체적으로 Selector를 보시려면 w3schools.com 에 잘 정리되어있는 CSS Selector 표를 링크 걸어둘게요~
https://www.w3schools.com/cssref/css_selectors.php

 

빨랑빨랑 코딩해~~~애~

CSS  Syntax 

CSS 기본 선언 방법

 

A. Pseudo Class(수도클래스, 가상클래스)

수도클래스는 콜론으로 시작하며, 원래의 문법은 콜론 두개 '::'로 시작하는 것이지만, 한개 ':'로 많이 사용됩니다.

하지만 꼭 '::' 두개를 적어야 하는 클래스도 간혹 있으니 알아두세요~

 

B.  :before 가상 선택자

- 선택한셀렉터의 첫번째 가상 child 요소를 만들어 텍스트를 넣어준다.

- content 속성(Property)은 필수 속성이며, 이 속성을 적지 않으면 적용이 되지 않는다.

- 텍스트를 붙이는 용도 또는 배경이미지, 웹폰트, 웹아이콘등을 넣을 때 많이 사용된다.

 

// HTML 코드
<h1>Hello</h1>

// CSS 코드
h1:before { content:'--'; color:tomato; }

// 브라우저 출력결과
--Hello

 

C.  :after 가상 선택자

- 선택한셀렉터의 마지막 가상 child 요소를 만들어 텍스트를 넣어준다.

- content 속성(Property)은 필수 속성이며, 이 속성을 적지 않으면 적용이 되지 않는다.

- 텍스트를 붙이는 용도 또는 배경이미지, 웹폰트, 웹아이콘등을 넣을 때 많이 사용된다.

// HTML 코드
<h1>Hello</h1>

// CSS 코드
h1:after { content:' 하하하'; color:tomato; }

// 브라우저 출력결과
Hello 하하하

 

---

 

자, 어렵지 않아요~ 우리 영혼 챙겨가며 계속 공부해봅시다잉~~~!

 

 

본 문서는 제가 오랫동안 일해왔던 내용을 강의와 책편집을 위해 정리해둔 내용입니다.

힘들게 만든 만큼 공부하시는 분들께 도움이 되면 좋겠습니다.

제 피드를 공유하거나 링크를 해주시는것은 감사합니다~

 

 

 

본 블로그에 사용된 기본 스티커 외의 이미지들 또한 직접 제작한 것들입니다.

하여 출처없이 이미지나 내용만을 카피해서
포스트를 쓰신다거나 하는것은 하지말아주세요 ^^

감사합니다.