file 인풋에 이미지 파일 첨부시 첨부한 이미지의 썸네일을 보여주는 예제이다. 첨부한 이미지의 Blob 정보를 생성하여 임시 이미지를 생성해 준다. javascript blobimg = { 'init' : function(){ }, 'action' : function(){ changeIMG = function(obj){ var $this = obj; if($this.files && $this.files[0]){ var reader = new FileReader(); reader.readAsDataURL($this.files[0]); reader.onload = function(e){ var fileName = e.target.result; $($this).parents('.filebox').find('..

IT&DEV 2021. 8. 9. 11:53

radio나 checkbox 인풋 디자인은 여간 까다로운게 아니다. 아래 예제는 radio, checkbox 를 감싸고 있는 label에 Class를 부여하여 보다 간단한 방법으로 인풋 디자인이 가능하게 해준다. javascript //checkbox labelDesign = { 'init' : function(){ this.action(); }, 'action' : function(){ var $ele = { 'inp' : $('label.chk :checkbox, label.chk :radio'), } var is_checked = function($this){ var chked = $this.is(':checked'); var rdo_name = $this.attr('name'); var this_..

IT&DEV 2021. 8. 9. 11:51

bxslider 플러그인을 사용하여 반응형 사이트를 구축하는 경우 PC 와 모바일에서 갯수가 다르게 보이도록 하는 예제. 아래 예제는 PC 에서는 4개의 이미지가, 모바일에서는 2개의 이미지가 노출되로록 한다. Javascript bxrolling = { 'init' : function(){ this.action(); }, 'action' : function(){ var $ele = { 'roll' : $('.roll'), } var opts = function(){ var vis = $('#_device_mo').is(':visible'); //PC인 경우 if(!vis){ var vars = { 'auto' : true, 'useCSS' : false, 'pager' : false, 'minSlide..

IT&DEV 2021. 8. 9. 11:49

웹사이트를 인터넷 브라우저에서 접속하는 경우 브라우저 타이틀바(탭 바)에 웹사이트 파비콘 아이콘을 노출시킬 수 있다. HTML 사이에 위 두 줄 추가한 뒤 favixon.ico 파일을 생성하여 웹사이트 계정 최상위 루트에 위치 시키면 된다. 두 줄을 함께 삽입해 줘야 IE, 크롬, 사파리, 파이어폭스에 모두 적용된다.

IT&DEV 2021. 8. 9. 10:50

반응형웹인 경우 iframe 방식의 유투브 동영상을 삽입하는 했을 때 디바이스 폭(width)에 따라 높이(height)가 계산되어 출력해주는 소스코드 예제. 부모 엘리먼트를 하나 만들고 그 내부에 유투브 iframe 을 넣는 방식인데, 부모의 높이를 padding-bottom '%'로 계산하여 비율을 맞춰주게 된다. 예제는 아래와 같다. CSS .respondFrame { position: relative; padding-bottom: 56.25%; /* 16:9 비율인 경우. 4:3 비율인 경우 75%로 설정합니다 */ overflow: hidden; } .respondFrame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 1..

IT&DEV 2021. 8. 9. 10:49

아이폰, 아이패드 등 ios에서 특정 엘리먼트에 overflow:scroll 을 주게 되는 경우 스크롤바가 부드럽지 않게 끊겨 작동되는 것을 확인할 수 있다. 엘리먼트에 생성된 스크롤바를 부드럽게 작동 시키려면 ios 브라우저에 대한(webkit) 속성을 아래와 같이 변경해 줘야 한다. *{ -webkit-overflow-scrolling: touch; -webkit-border-radius: 0; } 그럼 부드럽게 작동하는 스크롤바를 확인할 수 있다.

IT&DEV 2021. 8. 9. 10:47

IE에서 background의 attachment 속성이 fixed인 경우 스크롤을 움직일 때 덜덜거리며 떨리는 현상이 발생한다. 이를 임시방편으로 해결하는 방법은 아래와 같이 html, body 에 속성을 주는 것인데, 주의할 점은 아래와 같이 속성을 주는 경우 javascript 에서 window scrolling 을 제대로 인식하지 못한다. body에 스크롤을 달아주는 방식이기 때문. html{overflow: hidden;height: 100%;} body {overflow-y: scroll;height: 100%;}

IT&DEV 2021. 8. 9. 10:45