INJE BLOG
WASTING YOUR TIME
SINCE 2017
INJE BLOG 티스토리 스킨 4개 무료배포
모두 예전에 판매하다 판매 중지한 스킨들인데요. 지금까지도 가끔 구매 문의가 들어와서 그냥 무료로 배포하기로 했습니다. 마음껏 가져다 쓰시고 수정해서 쓰셔도 괜찮습니다. 출처만 잘 밝혀주세요. 혹시 스킨 제작이나 수정에 도움 필요하시면 이메일로 문의 주세요 시간날때 답변해 드릴게요. BARCODE BARCODE 스킨 demo barcode 2.0 barcode 2.0 스킨 demo darkroom darkroom 스킨 demo flatmint flatmint 스킨 demo 잘 쓰셨으면 댓글이라도 남겨주시면 은근히 도움이 된답니다.
iOS 사파리 100vh 문제 해결법
아이폰에서는 100vh가 창보다 길게 설정됩니다. 한번 볼까요? .fill-screen { height: 100vh; width: 100vw; } 간단한 해결법은 100vh 대신 -webkit-fill-available를 사용하는 것입니다. .fill-screen { height: -webkit-fill-available; width: 100vw; } 문제는 크롬과 같은 지원하지 않는 데스크탑 브라우저들이 있다는 것이죠. 해결 하려면 -webkit-fill-available가 iOS 환경에서만 적용되도록 하면 됩니다. @supports (-webkit-touch-callout: none)를 사용하면 iOS 환경만 선택할 수 있죠. .fill-screen { height: 100vh; width: 100v..
Sass를 이용해 반응형 웹페이지 효율적으로 작성하기
Sass에서는 변수를 사용해서 편리하게 css 코드를 작성할 수 있는데요. @media 쿼리를 이용해 반응형 웹페이지를 작성할 때에는 문제가 발생합니다. $header-height: 90px; .header { height: $header-height; } @media only screen and (max-width: 768px) { $header-height: 70px; } 이렇게 작성하면 모바일에서 header-height가 70px 로 바뀔 것 같지만 .header { height: 90px; } /*# sourceMappingURL=test.css.map */ 컴파일을 해 보면 아무일도 일어나지 않는 걸 볼 수 있죠. $header-height: 90px; .header { height: $hea..
티스토리 새 에디터에서 gif 안 움직일때 해결법
오랜만에 티스토리를 다시 시작했는데 새로 바뀐 에디터에서 gif를 올리면 이미지가 움직이지를 않더라고요... 그래서 페이지 코드를 확인해 보니까 이전 에디터에서는 사용하지 않던 srcset을 사용하더군요. srcset은 화면 크기에 따라 다른 크기의 이미지를 불러와서 이미지가 깨지지 않으면서도 이미지 파일의 크기가 필요 이상으로 커서 로딩 속도가 느려지는 것을 방지하는데 쓰이는데요. 이 다른 크기의 gif들로 변환하면서 이미지가 움직이지 않게 되는 것 같아요. 원본 gif는 잘 움직이는데 srcset 주소의 이미지는 안 움직이는게 보이시죠? 그래서 저는 이렇게 간단히 jQuery 코드를 추가해서 해결했답니다. 이 코드를 스킨편집에 들어가셔서 태그 안에 붙여 넣어 주시면 gif 가 움직일 거예요 혹시 블로..
티스토리 디스커스 주소 문제 해결법
티스토리는 같은 글이라도 홈에서 들어가느냐 카테고리 창 안에서 들어 가느냐에 따라 url 이 달라져디스커스를 적용할때 같은 글이라도 양쪽에 다른 댓글창이 적용되는 문제가 있는데요 http¦//injeblog.tistory.com/99 http¦//injeblog.tistory.com/99?category=12345 티스토리와 디스커스 양쪽 다 게시글 url 관련 옵션이 없어서 간단한 함수를 만들어서 해결했습니다스킨편집에서 태그 안에 아래 코드를 붙여넣기 하고 파일 내의 모든 href="" 를 onclick="disqusFix('')"> 로 바꿔주시면 됩니다
jQuery 창 가로길이에 따른 함수 적용하기
반응형 사이트나 모바일 사이트를 만들 때 함수가 특정 화면 넓이에서만 작동해야 할때가 있죠? 그럴땐 아래와 같이 width() 를 사용하면 되는데요 if($(window).width() > 768) { /* do something */ } 이 방법을 쓰면 함수를 실행했을 때 넓이만 인식을 하고 창 크기를 조정하는건 인식을 못한답니다 예를들어 768px 보다 클때만 배경음악이 나오는 사이트를 생각해 볼까요? 처음에 1000px 짜리 창을 켜고, 700px 로 줄이면 분명 768px 보다 작지만 노래가 계속 나오게 된다는 거죠 그럼 어떻게 해야할까요? resize() 함수를 사용하면 됩니다! $(window).resize(function() { if($(window).width() > 768) { /* do..