1. CSS 선택자(Selector) 정리


 선택자(Selector)

 의미

지원 안함

 전체 선택자

 *

 모든 태그 선택

 -
 태그 선택자

 E

 태그명이 E인 특정 태그 선택

 -
 클래스 선택자

 .className

 class 값이 className으로 지정된 요소 선택

 -
 아이디 선택자

 #idName

 id 값이 idName으로 지정된 요소 선택

 -
 복합 선택자

 E F

 E 요소의 자손인 F 요소 선택

 -

 E > F

 E 요소의 자식인 F 요소 선택

 IE 6

 E + F

 E 요소 바로 다음에 있는 형제요소 F 선택

 (E 와 F 사이에 다른요소가 존재하면 선택하지 않음.)

 IE 6

 E ~ F

 E 요소가 앞에 존재하면 F 선택

 (E 가 F 보다 먼저 등장하지 않으면 선택하지 않음.)

 IE 6 
 속성 선택자 E[attr] 'attr' 속성이 포함된 요소 E 선택

 IE 6 

 E[attr="val"]

 'attr' 속성의 값이 'val'과 일치하는 요소 E 선택

 IE 6 

 E[attr~="val"]

 'attr' 속성의 값에 'val'이 포함되는 요소 E를 선택

 (공백으로 분리된 값이 일치해야함)

 IE 6 

 E[attr^="val"]

 'attr' 속성의 값이 'val'으로 시작하는 요소 E를 선택 

 IE 6 

 E[attr$="val"] 'attr' 속성의 값이 'val'으로 끝나는 요소 E를 선택 

 IE 6

 E[attr*="val"]

 'attr' 속성의 값에 'val'이 포함되는 요소 E를 선택

 IE 6

 E[attr|="val"]

 'attr' 속성의 값이 정확하게 'val' 이거나

 'val-' 으로 시작되는 요소 E 선택

 IE 6

 가상 클래스 선택자 E::link

 방문하지 않은 링크 E를 선택

 -

 E::visited 방문한 링크 E를 선택

 -

 E::active

 E요소에 마우스 클릭 또는 키보드 엔터가 눌린 동안 E를 선택

 -

 E::hover E요소에 마우스가 올라가 있는 동안 E를 선택

 -

 E::focus

 E요소에 포커스가 머물러 있는 동안 E를 선택

 -

 E::root

 문서의 최상위 요소(html)를 선택

 IE 6,7,8

 E::nth-child(n)

 앞으로부터 지정된 순서와 일치하는 요소가 E라면 선택

 (E 아닌 요소의 순서가 계산에 포함)

 IE 6,7,8

 E::nth-last-child(n)

 뒤로부터 지정된 순서와 일치하는 요소가 E라면 선택

 (E 아닌 요소의 순서가 계산에 포함)

 IE 6,7,8

 E::nth-of-type(n)

 E 요소 중 앞으로부터 순서가 일치하는 요소 E 선택

 (E 요소의 순서만 계산에 포함)

 IE 6,7,8

 E::nth-last-of-type(n)

 E 요소 중 끝으로부터 순서가 일치하는 E 요소를 선택

 (E 요소의 순서만 계산에 포함)

 IE 6,7,8

 E::first-child

 첫 번째 등장하는 요소가 E 라면 선택

 (E 아닌 요소의 순서가 계산에 포함)

 IE 6

 E::last-child

 마지막에 등장하는 요소가 E 라면 선택

 (E 아닌 요소의 순서가 계산에 포함)

 IE 6,7,8

 E::first-of-type

 E 요소 중 첫번째 E를 선택

 (E 요소의 순서만 계산에 포함)

 IE 6,7,8

 E::last-of-type

 E 요소 중 마지막 E를 선택
 (E 요소의 순서만 계산에 포함)

 IE 6,7,8

 E::only-child E 요소가 유일한 자식이면 선택
 (E 아닌 요소가 하나라도 포함되면 선택하지 않음)

 IE 6,7,8

 E::only-of-type E 요소가 유일한 타입이면 선택
 (E 아닌 요소가 포함되어도 E 타입이 유일하면 선택)

 IE 6,7,8

 E::empty

 텍스트 및 공백을 포함하여 자식 요소가 없는 E를 선택

 IE 6,7,8

 언어 선택자

 E::lang(ko)

 HTML lang 속성의 값이 'ko'으로 지정된 요소 선택

 IE 6,7

 부정 선택자

 E::not(S)

 S가 아닌 E 요소를 선택

 IE 6,7,8

 목적 선택자 E::target

 E의 url이 요청되면 선택

 (E는 ID가 지정되어 있어야함)

 IE 6,7,8

 상태 선택자

 E::enabled

 사용 가능한 폼 컨트롤 (input, textarea, button) E를 선택

 IE 6,7,8

 E::disabled

 사용 불가능한 폼 컨트롤 (input, textarea,button) E를 선택

 IE 6,7,8

 E::checked

 선택된 폼 컨트롤 (input checked="checked") 을 선택

 IE 6,7,8

 가상 엘리먼트 선택자

 E::first-line

 E 요소의 첫 번째 라인을 선택

 IE 6

 E::first-letter

 E 요소의 첫 번째 문자를 선택

 IE 6

 E::before E 요소의 시작 시점에 생성된 요소를 선택

 IE 6,7

 E::after

 E 요소의 끝 지점에 생성된 요소를 선택

 IE 6,7



2. 선택자(Selector) 우선순위


!important > id [ 100 ] > class [ 10 ] > tag [ 1 ] > * [ 0 ]



출처 : http://www.nextree.co.kr/p8468/

'퍼블리싱 > HTML&CSS' 카테고리의 다른 글

CSS 디바이스별 미디어 쿼리  (0) 2018.03.15
CSS 인쇄화면 설정  (0) 2018.03.14
CSS 간단한 도넛 차트  (0) 2018.02.09
CSS 이미지 흑백처리  (0) 2018.02.09
CSS 초기화  (0) 2017.11.14

초기화(Reset)


익스, 파폭, 오페라, 크롬, 사파리 등 여러 웹브라우저들이 있으며, 그들마다 CSS 기본값이 조금씩 다르다. 각기 다른 브라우저들로 동일한 화면을 보여주기 위해서 작업 전 CSS를 초기화 해야한다.



초기화 도구


1. Eric Meyer's 'Reset CSS' 2.0

http://meyerweb.com/eric/tools/css/reset/


2. normalize.css

https://gist.github.com/demun/4110614


3. HTML5 Doctor

http://html5doctor.com/html-5-reset-stylesheet/



CSS 파일


아래는 내가 자주쓰는 Reset.css

@charset "utf-8";

/*reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin:0; 
	padding:0; 
	border:0; 
	font:inherit; 
	vertical-align:baseline; 
	font-weight:normal;
}
fieldset {
	border:0;
}
address,em {
	font-style:normal; 
	font-weight:normal;
}
strong {
	font-weight:bold;
}
input, button, select {
	font-family:inherit; 
	margin:0; 
	padding:0; 
	vertical-align:middle; 
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
	display:block;
}
ol, ul, li {
	list-style:none;
}
button {
	margin:0; 
	padding:0; 
	border:0; 
	background-color:transparent; 
	-webkit-appearance:button; 
	cursor:pointer;
}
a {
	text-decoration:none; 
	color:#666;
}
img {
	display:block;
	border:none;
}
button:focus,
input:focus,
a:focus {
	outline:thin dotted; 
	outline:none; 
	outline-offset:-2px;
}
[tabindex="-1"]:focus {
	outline:none;
}

'퍼블리싱 > HTML&CSS' 카테고리의 다른 글

CSS 디바이스별 미디어 쿼리  (0) 2018.03.15
CSS 인쇄화면 설정  (0) 2018.03.14
CSS 간단한 도넛 차트  (0) 2018.02.09
CSS 이미지 흑백처리  (0) 2018.02.09
CSS 선택자(Selector) 정리  (0) 2017.11.16

간편하게 웹폰트를 변환해주는 사이트


https://onlinefontconverter.com/



1.  변환을 원하는 폰트 포멧을 체크 -> SELECT FONT(S) Click!

2. 

(1) Choose files 변환할 폰트를 선택

(2) Done Click!



3. SAVE YOUR FONT Click!



4. Download Attachment Click!




끝! 세상간편ㅜㅜ♥

'퍼블리싱 > etc.' 카테고리의 다른 글

ICO 파일 변환  (0) 2018.05.10
유튜브 동영상 퍼오기  (0) 2018.03.20

1. nuli

http://nuli.navercorp.com/sharing/nwagon


차트종류 :

Radar Chart

Cloumn Chart

Line Chart

Area Chart

Donut/Pie Chart

....


2. 구글차트

https://developers.google.com/chart/



3. ChartJS

http://www.chartjs.org/


차트 종류 : 

Bar Chart

Pie & Doughnut Chart

Line Chart

Radar Chart

Polar Area Chart


4. C3.js

http://c3js.org/examples.html


5. Chartist.js

http://gionkunz.github.io/chartist-js/


차트 종류 : 

Bar Chart

Pie & Doughnut Chart

Scatter Plot Chart

Time Series Chart

'퍼블리싱 > javascript&jQuery' 카테고리의 다른 글

swiper.js - 페이징 커스텀  (2) 2024.01.25
모달 팝업 swiper, slick 슬라이더  (0) 2019.03.11
script pc 모바일 분기  (0) 2018.05.10
오픈소스 오디오 플레이어 jPlayer  (0) 2018.02.14
JS 커스텀 스크롤바 플러그인  (0) 2018.02.09

+ Recent posts

티스토리툴바