두부찌개

머리가 붕어인지 매번 쓰면서 까먹음ㅜㅜ 다음엔 안찾아보려고 정리해두었음.

1. 유튜브 동영상 퍼오기

<iframe src="http://www.youtube.com/embed/동영상ID" frameborder="0" allowfullscreen></iframe>

2. rel=0 (기본값 1)

재생이 끝나고 관련 동영상 노출 여부 (노출 1, 비노출 0)

<iframe src="http://www.youtube.com/embed/동영상ID?rel=0" frameborder="0" allowfullscreen></iframe>

3. autoplay=1 (기본값 0)

동영상 자동재생 여부 (자동재생 1, 수동재생 0)

<iframe src="http://www.youtube.com/embed/동영상ID?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>

4. loop=1 (기본값 0)

동영상 반복재생 여부 (반복재생 1, 1번재생 0)

* loop는 playlist 매개변수와 같이 사용해야 동작함 (1개의 동영상을 반복재생할때 같은 동영상id를 넣어주면 됨.)

<iframe src="http://www.youtube.com/embed/동영상ID?rel=0&loop=1&playlist=동영상ID" frameborder="0" allowfullscreen></iframe>

5. start=204 (단위 초)

동영상 시작부분에서 특정 시간 이후에 동영상 재생을 시작

<iframe src="http://www.youtube.com/embed/동영상ID?rel=0&start=204" frameborder="0" allowfullscreen></iframe>

* 여러개의 매개변수를 사용할 때

http://www.youtube.com/embed/동영상ID?첫번째변수=값&변수=값&변수=값

첫번째 변수를 붙일때는 ?를 앞에 붙이고 그 뒤에 변수 사이는 &로 구분함.

* 더 자세한 내용은 아래 링크로

https://developers.google.com/youtube/player_parameters?hl=ko

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

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;}