해결방법

- 자동 재생시 음소거 옵션을 함께 넣기. (음소거 영상의 경우에만 자동재생이 허용됨.)

- 스크립트로 play 해주기.

 

 

html

<video id="video" preload="auto" autoplay="" loop="" muted>
	<source src="video.mp4" type="video/mp4">
</video>

 

js

var video = document.getElementById("video");
video.play();
setTimeout(function(){video.play()},500);
if(video.paused) video.play();

 

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

HTML5 video 자동재생  (0) 2019.06.05
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

모달팝업 안에 있을때, 반응형처리할때 등등

display: none 에서 block으로 바뀌면 슬라이드를 다시 설정? 해야함.


- swiper

$('.btn').click(function(){

setTimeout(function(){

$(window).resize();

swiper.update();

},100);

});



-slick

$('.btn').click(function(){

target.slick('resize');

});


px값은 브라우저에서 절대값으로 인식해 1px은 항상 정확히 1px로 표시되는 반면 em과 rem은 가변 단위로서, 디자인에 설정된 폰트 크기에 따라 브라우저에 의해 픽셀값으로 변환된다.


ex) .emClass{font-size: 16px; padding-top: 1em;} -> .emClass{font-size: 16px; padding-top: 16px}


1. rem

페이지 최상위(root)요소, 즉 html 요소의 폰트 크기가 기준이 되어, 최상위 요소의 폰트 크기에다 rem 단위로 지정한 숫자를 곱한 값이 px로 변환된 값이다. 

변환된 픽셀 크기는 페이지 최상위(root)요소, html 요소이 폰트 크기가 기준이 된다. 최상위 요소의 폰트 크기에다 rem 단위로 지정한 숫자를 곱한 값이 변환된 값이다.


ex) html{font-size: 16px; padding-top: 1em;} -> html{font-size: 16px; padding-top: 16px;}


2. em

스타일을 지정한 요소가 기준이 되어 지정한 요소의 폰트 크기를 곱한 값이 px로 변환된 값이다.


ex) .emClass{font-size: 16px; padding-top: 1em;} -> .emClass{font-size: 16px; padding-top: 16px;}


*스타일 상속

em 단위가 상위 요소의 폰트 크기와 직접 연관되어 있다고 잘못 알려져 있다. W3 명세서에 의하면, 상위 요소가 아닌 실제 사용된 요소의 폰트 크기와 직접 연관되어 있다. 상위 요소의 폰트 크기가 em값에 영향을 줄 수는 있지만, 그것은 오로지 스타일 상속 때문이다.

모든 요소가 자동으로 상위 요소로부터 폰트 크기를 상속받기 때문에 em 단위로 작업을 할 땐 상속과 관련해서 문제가 있을 수 있다. 상속의 영향을 뒤엎는 방법은 오로지 폰트 크기를 px 혹은 vw와 같이 상속에 영향을 받지 않는 단위를 써서 일일이 지정해 주어야 한다.


ex)

html               -font-size: 16px

   .wrapper       -font-size: 1.25em;           //1.25 X 16 =20 font-size: 20px;

      .box          -padding: 1.5em;             //1.5  X 20 =30 padding: 30px


html               -font-size: 16px

   .wrapper       -font-size: 1.25em;          //1.25 X 16 =20 font-size: 20px;

      .box          -font-size: 1.2em;           //1.2  X 20 =24 font-size: 24px;

                     -padding: 1.5em;            //1.5  X 24 =36 padding: 36px



em 단위는 상위 요소와는 상관없이 실제 사용된 요소의 폰트 크기에 비례 하다.


ex)

html               -font-size: 16px

   .wrapper       -font-size: 1.25em;          //1.25 X 16 =20 font-size: 20px;

      .box          -font-size: 14px;                                              font-size: 14px;

                     -padding: 1.5em;            //1.5  X 14 =21 padding: 21px



3. 브라우저 설정


기본적으로 브라우저의 폰트 크기는 보통 16px로 설정되어 있지만, 사용자에 의해 최소 9px부터 72px까지 변경될 수 있다. html 요소의 폰트 크기는 고정 을 명시적으로 지정하여 덮어씌우지 않으면 브라우저에 설정된 값을 상속받게 된다.

html 요소에 em 기반의 폰트 크기를 지정했다면, 변환된 픽셀값은 브라우저에 지정된 폰트 크기의 배수가 된다. 

html 요소가 font-size: 1.25em 일 경우 최상위 요소의 폰트 크기는 브라우저에 설정된 폰트 크기의 1.25배 이다.

브라우저 폰트 크기 설정이 16px일 경우 최상위 요소의 폰트 크기는 20px이다.

계산 1.25 X 16 = 20.



4. em 과 rem 차이점

* rem

페이지 최상위(root)요소, 즉 html 요소의 폰트 크기에 따라 결정되고 이 폰트 크기는 상속에 영향을 받지 않는 절대 단위를 지정해서 직접 덮어씌우지 않았다면, 브라우저에 설정된 폰트 크기를 그대로 상속 받게 된다.

*em

사용된 요소의 폰트 크기에 따라 결정되고 이 폰트 크기 또한 상속에 영향을 받지 않는 절대 단위를 가지고 명시적으로 덮어 씌우지 않았다면, 상위 요소로부터 상속의 영향을 받는다.


출처 : https://webdesign.tutsplus.com/ko/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984

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

HTML5 video 자동재생  (0) 2019.06.05
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

*페이스북 공유하기


a링크에 ( http://www.facebook.com/sharer/sharer.php?u=공유할링크 ) 넣어주면 됨. 

공유시 들어갈 요약정보는 메타 태그에서 설정할수 있음.


ex)

-html

<meta property="og:type" content="website" />

<meta property="og:title" content="제목" />

<meta property="og:url" content="사이트 url" />

<meta property="og:description" content="내용 설명" />

<meta property="og:image" content="이미지 경로" />


<a href="javascript:shareFB();" class="fb" title="facebook 공유">facebook</a>


-script

function shareFB()

{

   window.open('http://www.facebook.com/sharer/sharer.php?u=사이트 url');

}


*** 메타태그에 설정한 내용이 잘못되어 수정하여도 수정된 내용이 페이스북 공유 기능에서 바로 적용되지 않을 수 있다.

이때 공유 디버거 (https://developers.facebook.com/tools/debug/) 에 접속하여 해당 페이지를 다시 디버깅하면 바로 적용이 된다.

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

HTML5 video 자동재생  (0) 2019.06.05
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

1. 간편하게 변환시켜주는 홈페이지

 (1) 아래 링크로 들어가서 시키는 대로 하면 됨.


https://convertio.co/kr/jpg-ico/



2. 포토샵으로 파일 변환

 (1) 32비트인지 64비트인지 확인하고 아래 파일을 다운로드를 받고,

 (2) C:\Program Files\Adobe\Adobe Photoshop CC 2018\Required\Plug-ins\File Formats 경로에 넣는다.

 (3) 포토샵을 실행하면 ico가 추가되었음을 확인할수있다.


ICOFormat.8bi

ICOFormat64.8bi


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

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

사용할 일이 생길때마다 찾기가 넘나 귀찮음..



var isMobile = false; //initiate as false


      if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) isMobile = true;


if( !isMobile )

{

//pc

}

else

{

//mobile

}

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


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

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>


+ Recent posts