본문 바로가기

분류 전체보기140

쿼크모드 (호환성보기) 발생 원인 코딩 2016. 4. 8. 간혹 익스플로러에서 사이트를 들어갔을때 오래전에 만들어진 사이트인 경우 쿼크모드 (호환성보기) 가 자동으로 발생되는 경우가 있다. DOCTYPE의 선언이 존재하지 않거나, 잘못 적혀 있을 경우, 또는 URL이 생략된 경우 웹브라우저는 문서를 쿼크모드로 해석한다고 한다. 자세한 부분은 https://ko.wikipedia.org/wiki/%EC%BF%BC%ED%81%AC_%EB%AA%A8%EB%93%9C 이곳 참조. 내가 작업하던 사이트는 자꾸 접속하면 IE5 모드로 바뀌거나, 쿼크 모드가 되어 찾아봤더니 이렇게 URL이 빠져 있어서 그런것으로 확인됐다. 휴 속시원하네.
페이스북 타임라인 css 코딩 2016. 2. 26. 페이스북처럼 양쪽 타임라인 이었다가, 좁은화면에서는 한쪽으로 정렬되는 css 원본 사이트 : https://github.com/andriussev/timelinedDemo : http://timelined.andriaus.lt/
[제이쿼리] Monthpicker 코딩/제이쿼리 2016. 2. 11. Datepicker는 다들 많이 써서 잘 알고있겠지만 가끔 Monthpicker를 써야 할 때가 있다. 월만 선택해서 그 달의 매출량을 표시해야 할 때 유용하다. 괜찮은 Monthpicker를 찾음. Bootstrap datepicker를 변형한 Monthpicker https://github.com/wenzhixin/bootstrap-monthpicker 중국어로 되어있으므로 js파일을 열어서 수정해줘야함.var months = [ '1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월' ]; 이부분은 환경에 맞게 변형시킬 때 쓰는 코드.//실제 보여지는 날짜 정의 $('#month_text').val(new Date().getFullYear() ..
[제이쿼리] 현재 스크롤값 가져오기(scroll) 코딩/제이쿼리 2016. 2. 5. 코딩을 하다가 현재 스크롤 값을 가져오려고 스크립트를 짰는데 실시간이 아닌, 처음에 로딩했을때의 스크롤 값만 가져오고 변화가 없었다. (아래 코드를 사용함) $(document).scrollTop(); 그래서 찾고 찾다가, 실시간으로 가져오려면 .scroll() 함수가 필요하단 것을 알았다. $(window).scroll(function () { var scrollValue = $(document).scrollTop(); console.log(scrollValue); }); 이렇게하면, 실시간으로 현재 스크롤값이 log에 찍힘.
파일 다운로드 코드 코딩 2016. 1. 12. PDF파일을 a태그로 href 경로에 링크시켰더니, 웹브라우저에서 자동으로 뷰가 되고, 아이패드에서는 링크를 찾을 수 없다는 오류가 났다. 자동으로 파일이 다운로드 되는 줄 알았는데, 확장자에 따라 브라우저가 처리하는 방법이 다른가보다. 그래서 찾아보니 다운로드 하면 크롬에서 파일이 다운로드 됨. 하지만 파이어폭스는 안됨 ㅜㅜ 그래서 찾은 방법은 다운로드 로 파일 다운시 "파일 다운로드"창이 뜨지 않음. 바로 pdf reader가 실행되어 pdf가 보여짐. a 태그를 이용하여 pdf 파일 다운 시 "파일 다운로드창" 뜨도록 하려면 아래와 같이 작성 다운로드 download.jsp 파일
아이폰 iframe 이슈 코딩 2015. 12. 28. 아이폰/아이패드 iOS7버전에서 iframe 스크롤이 안되는 현상이 발생한다. 편법으로 스크롤을 생성하는 방법을 소개한다. iframe을 div로 감싸주고, 감싸준 div에 스타일을 적용. 이때 iframe의 height값이 div보다 작으면 스크롤이 안되므로, 좀 더 크게 잡는다.
애니메이션 소스들 웹디자인 2015. 12. 9. 디자인은 심플하지만 동적인 효과로 재미를 주는 것이 요즘 트랜드다. 그래서 여러가지 재미있는 오픈소스들을 찾아보았다. 1. 먼저 제이쿼리는 아니지만 css로 간단한 애니메이션을 주는 사이트 http://daneden.github.io/animate.css/ 2. Pricing Table에 살짝 애니메이션 들어간 소스. http://tympanus.net/codrops/2015/11/19/some-inspiration-for-pricing-tables/ 이외에도 다른 오픈소스 많음. 3. Typed.js http://www.mattboldt.com/demos/typed-js/ 텍스트가, 실제로 타이핑되고 있는 것 처럼 구현하는 스크립트파일. 4. Wow.js http://mynameismatthieu.co..
Free 디자인소스 웹디자인 2015. 12. 9. FreePSD, Illustrator etc..http://freebiesbug.com/psd-freebies/app-design/ Deviant Arthttp://www.deviantart.com/
그라데이션 배경 css로 만들어주는 사이트 코딩 2015. 12. 9. 요즘엔 css3의 기능이 다양해서그라데이션 배경같은 것은 이미지가 아닌 css로 코딩하는 경우가 많다.그럴 때 고민을 덜어주는 아주 유용한 사이트가 있다.그라데이션 배경을 css 코드로 만들어 주는 사이트! http://uigradients.com/ 좌측 상단에 어떤 컬러를 섞었는지 code가 나온다. 슬라이드를 넘기면 다른 배경도 볼 수 있고키보드 좌,우 키로 조작도 가능하다. 하단에 See All Gradients를 누르거나 shift키를 누르면 다양한 예시가 뜨는데 클릭으로 선택하면 배경이 변경된 것을 볼 수 있다. 엔터키를 누르거나 Get CSS Code버튼을 누르면 자세한 코드를 확인할 수 있고 클립보드에 저장할 수도 있다. 오픈소스파일
벽돌컨텐츠, 스와이프 배너 코딩/제이쿼리 2015. 11. 30. 벽돌컨텐츠 http://masonry.desandro.com/layout.html 가로사이즈가 유동적인 경우 sizer라는 div를 넣고, columnWidth를 grid-sizer로 넣는다. ... /* fluid 5 columns */ .grid-sizer, .grid-item { width: 20%; } /* 2 columns */ .grid-item--width2 { width: 40%; } $('.grid').masonry({ // set itemSelector so .grid-sizer is not used in layout itemSelector: '.grid-item', // use element for option columnWidth: '.grid-sizer', percentPositi..

Designed by 티스토리

© Kakao Corp.

티스토리툴바