CSS Selectors - 가상(Pseudo) 클래스 2 - Link, form, :root등

 

CSS Pseudo Selectors

 

---

 

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

 

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

 

Welcome to CODING HELL

CSS  Syntax 

CSS 기본 선언 방법

 

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

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

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

 

B.  링크 가상클래스 선택자

- hover는 다른 태그에도 종종 사용될 수 있다.

Selector	사용 예	선택	Description
:link	a:link { color: olive }	링크가 있는 a 태그
:visited	a:visited { color : gray }	한번이상 방문한 링크
:hover	a:hover { color : tomato }	마우스를 올렸을 때
:active	a:active { color: tomato }	클릭하는 순간

 

C. 폼 관련 가상클래스 선택자

- 아래의 목록말고도 disabled에 대한것이라던가 더 여러개가 있다. 더 알아보고 싶으면 위에 적어놓은 w3Schools.com 링크를 참좃하자.

Selector	사용 예	선택	Description
:focus	input:focus { background-color:gray }	input	input필드에 글자를 쓰려고 클릭또는 탭하여 포커싱이 되었을때 user에게 직관적으로 알려주려고 많이 사용한다. 글자를 쓰는 다양한 타입들이 동일하다
:invalid	input:invalid { color : red }	input	input태그에 pattern(Attribute)속성이 적용되었을때, focus-out이 되면 지정한 정규식 패턴에 value값이 맞는지 유효성검사를하고, 맞지 않을 시에 color:red를 적용한다. 반대로는 :valid 가 있다.
::placeholder	input::placeholder { font-style:normal; color:gray }	input	User가 Value값을 입력하기전에 입력해야할 글을 안내하는 용도로 넣는 글자에 대한 스타일이며, 글자입력시 자동으로 사라진다.
:checked	input[type=checkbox]:checked { background-color:red }	input	체크박스에 체크가 되었을때 스타일을 지정한다. 라디오버튼에도 동일하게 사용된다.
:required	input:required	input	필수요소로 지정된 input태그를 선택한다. <input type="" required>
:optional	input:optional	input	:required로 지정되지 않은 input 태그를 선택한다. (required와 반대)
:read-only	input:read-only	input	읽기전용 필드들을 선택한다. <input type="" readonly> 반대로는 :read-write이 있다.

 

 

D. 기타 알아두어야 할 가상클래스 선택자

- 이외에 :target 등 여러가지가 더 있습니다.

Selector	사용 예	선택	Description
:root	:root { --primary : red; font-size: 10px }	html	문서의 최상단 태그를 지칭한다. 변수를 선언하거나,  rem폰트단위의 기준을 지정하고자 할때 사용한다.
::selection	p::selection { backgorund-color:gold }	p	p태그를 마우스로 드래그하여 선택영역으로 잡히는 영역에 대한 스타일을 지정한다.
::marker	::marker { color : tomato; }	ul, ol	목록그룹에 나타나는 순번이나 불릿기호에 대한 스타일을 정의한다.

 

 

---

 

 

 

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

 

 

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

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

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

 

 

 

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

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

감사합니다.