본문 바로가기

분류 전체보기

파이어폭스에서 button에 생기는 아웃패딩 제거, Firefox button padding CSS fix 파이어폭스브라우저에서는 button에 엑스트라 이너패딩이 기본으로 생긴다. 이럴경우 제거를 위해 다음을 써준다. button::-moz-focus-inner { padding: 0; border: 0; } 더보기
탭메뉴, tabmenu, img src replace $(function(){ $('.tab_navi a').on('click',function(){ var idx = $(this).parent().index(); imgToggle($(this)); $('.tab_cont[data-cont=cont0'+ (idx+1) +']').show().siblings('.tab_cont').hide(); return false; }); function imgToggle(obj){ obj.parent().addClass('on').siblings().removeClass('on'); obj.find('img').attr('src',function(){ var src = $(this).attr('src'); return src.replace('off.jpg','on.jp.. 더보기
iframe에서 부모창 document에 접근하기 $('body', window.parent.document); iframe에서 부모창의 DOM Tree를 접근하려면 위처럼 셀럭터 다음에 window.parent.document를 작성해주면 된다.여기서 셀럭터 'body' 다음에 오는 것, 즉, second parameter는 selector를 찾는 위치를 말해준다.$( 'selector' , location ); 반대로 부모창에서 iframe Dom Tree에 접근하려면 다음처럼 하면 된다. $('#iframe').contents().find('.elementInIframe').html(); 더보기
Grid CSS : display:flex, display:box 특정 영역안의 여러 박스들을 세로 또는 가로 정렬을 해주는 속성으로, 일종의 float, 또는 table, table-cell과 비슷하다고 생각하면 될 것같다. display: box - is a version of 2009display: flexbox - is a version of 2011display: flex - is the actual version 현재 최신버전은 display:flex이지만, 버전이 낮을 경우 안먹히기때문에 다음처럼 써주는 것이 좋다.(안드로이드 4.4.2버전에서 먹히지 않았다.) div{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } 참고.. 더보기
border-radius, box-shadow 를 IE8이하버전에 적용시키기 css3에서 가장 많이 사용하는 속성 중 하나가 바로 border-radius이다. 기존에는 이미지로 처리했던 방식을 css로 처리할 수 있으니 퍼블리셔입장에선 매우 간편한 속성이라고 할 수 있다. 하지만 이 속성은 IE 8 이하버전에서는 적용이 되지 않는다.그럴 때 사용하는 것이 바로, PIE라는 것인데,특정 파일을 업로드시키고 border-radius 속성쓰는 부분에 다음코드를 추가작성해주면 된다.behavior: url( "PIE.htc" );주의사항!1. position후에 작성할 경우 무시가 되기때문에, 해당속성을 가장 앞에 작성해줘야만 한다.2. url()의 PIE의 경로를 css파일이 아니라 html파일에 상대적인 주소여야한다. 파일 및 자세한 내용은 http://css3pie.com/ 에서.. 더보기

티스토리툴바