728x90 반응형 분류 전체보기298 [JAVASCRIPT/JQUERY]이미지슬라이드 플러그인 slick 옵션 설정하는 법(사용법) 일단 가장먼저 필요한건 slick의 기본 css 와 js 파일이 필요하고, 또한 jquery 파일도 필요하다. 옵션값 설정하는 방법 $("#slick").slick({ infinite: true , /* 맨끝이미지에서 끝나지 않고 다시 맨앞으로 이동 */ slidesToShow: 1, /* 화면에 보여질 이미지 갯수*/ slidesToScroll: 1, /* 스크롤시 이동할 이미지 갯수 */ autoplay: true, /* 자동으로 다음이미지 보여주기 */ arrows: true, /* 화살표 */ dots:true, /* 아래점 */ autoplaySpeed:10000,/* 다음이미지로 넘어갈 시간 */ speed:1000 , /* 다음이미지로 넘겨질때 걸리는 시간 */ pauseOnHover:tru.. 2019. 4. 8. [HTML5] og태그 (페이스북 카카오톡 등 웹사이트 미리보기/섬네일이미지나오는 부분 설정하기) 페이스북이나 카카오톡 네이버블로그 등에서 링크 미리보기 뜨는 부분 설정하기 /*제목*/ /*url*/ /*이미지 */ /*부가설명*/ 참고 http://ogp.me/ 2019. 4. 8. [CSS3][JAVASCRIPT/JQUERY]유튜브 동영상 반응형으로 삽입하는 두가지 방법 단순히 iframe을 이용해 동영삽을 삽입할 경우 비율이 달라지기 때문에 화면 크기에 따라 동영상 상하 또는 좌우에 까맣게 빈 영역이 생긴다. 이를 없애주기 위해 동영상영역도 반응형으로 넣어줘야 한다. 두가지 방법중 한가지만 적용하면된다. 1. CSS로 적용하는 경우 2. JAVASCRIPT로 적용하는 경우 $(window).resize(function(){resizeYoutube();}); $(function(){resizeYoutube();}); function resizeYoutube(){ $("iframe").each(function(){ if( /^https?:\/\/www.youtube.com\/embed\//g.test($(this).attr("src")) ){ $(this).css("wid.. 2019. 4. 8. [CSS3] select 태그 화살표 이미지 변경하는 법! 먼저 select에 설정되어있는 기본 화살표를 숨겨준다. select{ -moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari and Chrome */ appearance:none; } 이렇게만 하면 인터넷익스플로어에서 화살표가 남아있다. select::-ms-expand { display:none; } //이걸 추가해줘야 ie에서도 없어진다. 그 후 select 에 background 속성을 이용하여 화살표 이미지를 넣어준다. 2019. 4. 8. 이전 1 ··· 69 70 71 72 73 74 75 다음 728x90 반응형