미디어쿼리는 반응형 웹을 제작할때 사용하는 매우 유용한 구문이다.

1. 사용법

- 속성으로 구분

@media only screen and (max-width:768px)
{
.className{color:#000;}
}

- 파일로 구분

<link reel="stylesheet" href="mobile.css" media="screen and (max-width:768px)" />

2. 미디어 특징

- width : 화면 너비

@media only screen and (min-width:768px) and (max-width:1024px) {} // 너비가 768px 이상이고 1024px이하일때 적용

- height : 화면 높이

- aspect-ratio : 화면 가로세로 비율

@media only screen and (aspect-ratio: 3/4) {} //  가로세로 비율이 3 : 4 일때 적용

- device-width : 출력장치 너비

- device-height : 출력장치 높이

- device-aspect-ratio : 출력장치 가로세로 비율

- orientation : 화면이 가로모드인지 세로모드인지

 @media only screen and (orientation : landscape) {} // 화면이 가로모드 일때 적용

 @media only screen and (orientation : portrait) {} // 화면이 세로모드 일때 적용

예) 아이패드 전용 css

@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (device-aspect-ratio:3/4) 
{
css 구문..
}

3. 모바일 기기별 해상도 참고 사이트

http://screensiz.es/phone

http://iosres.com/

1. 인쇄화면 전용 css 적용

화면에 표시되는 불필요한 영역을 숨긴 뒤에 인쇄하고 싶을 때, 인쇄 전용 css를 사용해야 할 때 아래와 같은 방법을 쓰면 된다.

(1) print.css 프린트 전용 css 파일을 사용할 때

(2) 미디어 쿼리 사용

2. background(color/image)

브라우저 인쇄 디폴트 설정은 배경이미지를 포함하지 않고 인쇄된다.

출력옵션으로 배경이미지 포함하여 인쇄 할 수 있지만 css로 배경이미지를 표시되게 하려면 아래와 같은 방법을 쓰면 된다.

body{-webkit-print-color-adjust:exact;}

3. 인쇄 페이지 영역 분할

원하는 영역을 선택하여 인쇄 할 페이지를 나누고 싶을때 아래와 같은 방법을 쓰면 된다.

(1) 나눌 영역을 div던, section이던, acrticle이던... 태그로 나누어 영역을 잡고,

<div class="classname">1 페이지</div>
<div class="classname">2 페이지</div>
<div class="classname">3 페이지</div>
.....

(2) print.css 에 css 구문 추가

.classname{page-break-before:always;}

http://hugoware.net/snippets/jquery-dual-scroll

html

css

.div01{width:200px;height:200px;overflow-y:auto;background:#000;color:#fff;}
.div02{width:200px;height:200px;overflow-y:auto;background:#000;color:#fff;}

jQuery

var tbox1 = $('.tlans-box .txt-box .txtarea-view.tbox1');
var tbox2 = $('.tlans-box .txt-box .txtarea-view.tbox2');

var height = parseInt(tbox2.css('height'));

var hold = false;
var window_scroll = true;
tbox1.add(tbox2)
   .mouseenter(function() { window_scroll = false; })
   .mouseleave(function() { window_scroll = true; });

var locked = false;
var sync_to = function(source, target) {
   if (locked) { return locked = false, true; }
   locked = true;

   var percent = source.scrollTop() / (source[0].scrollHeight - height);
   var top = (target[0].scrollHeight - height) * percent;
   target[0].scrollTop = top;
}

tbox1.scroll(function(e) { sync_to.call(e, tbox1, tbox2); });
tbox2.scroll(function(e) { sync_to.call(e, tbox2, tbox1); });

jQuery HTML5 Audio / Video Library

jPlayer는 커스터마이징이 가능한 오디오 플레이어

배포사이트 : http://jplayer.org/

script

$("#jquery_jplayer_1").jPlayer({
   ready: function () {
      $(this).jPlayer("setMedia", {
         m4a: "/resource/tts_10.mp3"    //음원 경로
      });
   },
   play: function() { // To avoid multiple jPlayers playing together.
      $(this).jPlayer("pauseOthers");
   },
   swfPath: "/resource/script/jplayer",    //jplayer 경로
   supplied: "m4a",
   cssSelectorAncestor: "#jp_container_1",
   wmode: "window",
   globalVolume: true,
   useStateClassSkin: true,
   autoBlur: false,
   smoothPlayBar: true,
   keyEnabled: true,
   defaultPlaybackRate : .5     //배속. 디폴트 1
});

html

<div class="player">

   <div id="jquery_jplayer_1" class="jp-jplayer"></div>

   <div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">

      <div class="jp-controls">
         <button class="jp-play" role="button" tabindex="0">play</button>
         <button class="jp-pause" role="button">Pause</button>
         <button class="jp-stop" role="button">Stop</button>
      </div>

   </div>

</div>

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

배포사이트 : 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 버튼을 누르고 들어가면 예시로 만들어진 차트들이 있으니 참고해서 작업하면 됨.

a img{

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

}

 

a:hover img{

-webkit-filter: grayscale(0%);
filter: none;

}

1. CSS 선택자(Selector) 정리

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

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

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

초기화(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;
}

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

https://onlinefontconverter.com/

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

2. 

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

(2) Done Click!

3. SAVE YOUR FONT Click!

4. Download Attachment Click!

끝! 세상간편ㅜㅜ♥