디자인 모음 사이트를 찾았당! 아이콘부터 템플릿까지 없는게 없다.

저작권은 컨텐츠마다 각각 다르기 때문에 사용 전 해당 컨텐츠 페이지 또는 해당 사이트에서 확인해야한다.



소스트리 : http://sourcetree.kr


1. 우측 메뉴에서 찾는 종류를 선택하고 원하는 리스트를 Click



2. 팝업에서 빨간박스를 누르고 들어간 페이지에서 다운로드 받으면 된다.

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

ICO 파일 변환  (0) 2018.05.10
유튜브 동영상 퍼오기  (0) 2018.03.20
소스트리 무료 디자인 모음 사이트  (0) 2018.02.13
간단한 웹 폰트 변환 사이트  (0) 2017.11.14

커스텀 스크롤바를 만들어주는 플러그인


배포사이트 : http://manos.malihu.gr/jquery-custom-content-scroller/

데모 : http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html




웹에서 그래프를 표현하는 것은 엄청 귀찮고 싫어하는 작업인데..

css로 원형 그래프를 표현할 수 있는 라이브러리를 찾았다!

거기다 무지 간편함!!!! 완전 사랑스럽ㅠㅠ



Pure CSS Circular Percentage Bar

https://www.cssscript.com/pure-css-circular-percentage-bar/


위 링크를 타고 들어가서 아래 다운로드 버튼 누르면 끝! 

사용법은 다운로드 옆 Demo 버튼을 누르고 들어가면 예시로 만들어진 차트들이 있으니 참고해서 작업하면 됨.



' > 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
CSS 초기화  (0) 2017.11.14
a img{

-webkit-filter: grayscale(100%);
filter: gray;

}

 

a:hover img{

-webkit-filter: grayscale(0%);
filter: 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
CSS 초기화  (0) 2017.11.14

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 선택자(Selector) 정리  (0) 2017.11.16
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
CSS 초기화  (0) 2017.11.14

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


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
소스트리 무료 디자인 모음 사이트  (0) 2018.02.13
간단한 웹 폰트 변환 사이트  (0) 2017.11.14

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

+ Recent posts