[2015.12.24] Flat UI kit - Freebie PSD (blog)

블로그용으로 제작된 component 및 UI kit 입니다.

깔끔하네요. 모바일에 최적화된 구성이 아닐까 합니다.

오늘은 여러 종류의 CSS 선택자가 사용되었는데 그런의미로다가~

다양하고 편리한 CSS 선택자에 대해서 다시 한번 정리해보겠습니다.

선택자(selector) 분류

인라인 (style=" ") 태그에 직접 style=" "로 스타일을 지정한다. CSS에 따로 스타일을 지정할 필요가 없다. id (id="ex1") 태그에 지정한 id를 선택자로 사용한다. id 앞에 샾-우물정-(#)을 추가한다. 예) #ex1 class (class="ex2") 태그에 지정한 class를 선택자로 사용한다. class 앞에 마침표(.)를 추가한다. 예) .ex2 하위 선택자 (div ul li) 태그 요소 이름을 종속 관계에 따라 순차적으로 사용한다. div ul li { }는 div에 속한 ul 내부의 li에 해당 스타일을 적용한다는 의미다. '>', '+'로 대상을 한정할 수 있다. 타입 선택자 (p, div) 태그 요소 이름 자체를 선택자로 사용한다. 여러 개 나열할 경우 쉼표(,)로 구분한다. 공통 선택자 (*) 모든 요소를 선택한다. 가상 클래스 (p:first-letter) 미리 정해진 가상 클래스를 요소 뒤에 덧붙여 특수한 상황에 적용한다. 특성 (target, title) 태그 요소에 사용하는 특성을 선택자로 사용한다.

선택자	예	예 설명	CSS
.class	.intro	class="intro"인 모든 요소를 선택	1
#id	#firstname	id="firstname"인 모든 요소를 선택	1
*	*	모든 요소를 선택	2
element	p	<p> 요소를 모두 선택	1
element,element	div,p	모든 <div> 요소와 <p> 요소를 선택	1
element element	div p	<div> 요소 안에 있는 모든 <p> 요소를 선택	1
element>element	div>p	부모(상위) 요소가 <div>인 모든 <p> 요소를 선택	2
element+element	div+p	<div> 요소 바로 뒤에 있는 모든 <p> 요소를 선택	2
[attribute]	[target]	target 특성이 포함된 모든 요소를 선택	2
[attribute=value]	[target=_blank]	target="_blank"가 포함된 모든 요소를 선택	2
[attribute~=value]	[title~=flower]	"flower"란 단어가 포함된 title 특성 값을 갖는 모든 요소를 선택	2
[attribute|=language]	[lang|=en]	"en"으로 시작하는 lang 특성 값을 갖는 모든 요소를 선택	2
:link	a:link	방문하지 않은 모든 링크 선택	1
:visited	a:visited	이미 방문한 모든 링크 선택	1
:active	a:active	활성화 된(현재 클릭한 상태의) 모든 링크 선택	1
:hover	a:hover	마우스 커서가 올라가 있는 모든 링크 선택	1
:focus	input:focus	현재 선택된 input 요소 선택	2
:first-letter	p:first-letter	모든 <p> 요소의 첫 번째 문자 선택	1
:first-line	p:first-line	모든 <p> 요소의 첫 번째 줄 선택	1
:first-child	p:first-child	부모 항목의 첫 번째 자식 항목인 모든 <p> 요소 선택	2
:before	p:before	모든 <p> 요소 앞에 내용 삽입	2
:after	p:after	모든 <p> 요소 뒤에 내용 삽입	2
:lang(language)	p:lang(it)	lang 속성 값이 "it"로 시작하는 모든 <p> 요소 선택	2

* 출처 : W3School (http://www.w3schools.com/css/css_reference.asp)

간단한 사용 예제 및 Demo

See the Pen Freebie PSD: Flat UI Kit 2 (Blog) by Javier Latorre López-Villalta (@jlalovi) on CodePen.