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


1. 유튜브 동영상 퍼오기

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


2. rel=0 (기본값 1)

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

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


3. autoplay=1 (기본값 0)

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

<iframe src="https://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="https://www.youtube.com/embed/동영상ID?rel=0&loop=1&playlist=동영상ID" frameborder="0" allowfullscreen></iframe>


5. start=204 (단위 초)

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

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


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

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

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


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

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

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

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

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



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/



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

CSS 단위 em과 rem  (0) 2018.06.11
페이스북 공유하기  (0) 2018.05.24
CSS 디바이스별 미디어 쿼리  (0) 2018.03.15
CSS 인쇄화면 설정  (0) 2018.03.14
CSS 간단한 도넛 차트  (0) 2018.02.09
CSS 이미지 흑백처리  (0) 2018.02.09


1. 인쇄화면 전용 css 적용


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


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

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

(2) 미디어 쿼리 사용

<style>

      @media print {

         /* 내용입력 */

   .print-area .classname{display:none;}

      }

</style>


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


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

페이스북 공유하기  (0) 2018.05.24
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

+ Recent posts