WEB Dev Note

유튜브 영상을 embed 하는 경우, 특히 Youtube에서 공유하기로 코드를 복붙하는 경우에는 가로 세로 사이즈가 고정되어 들어가게 된다. 이때 HTML의 상단 바로 위에 코드를 넣어주자: 이렇게 하면, 알아서 영상 비율을 유지하면서 너비를 100%로 꽉차게 바꿔준다. 특히 티스토리와 같은 블로그에 써먹기 좋다. 스킨편집 > html편집 화면에서 아래와 같이 위에 코드를 넣어주면 끝.

iOS나 macOS의 반투명하고 흐린 효과를 웹에서 구현할 수 있다. 예를 들면 아래와 같은 효과. .element-blur 클래스에 3px의 blur 효과를 주는 CSS는 아래와 같다.@supports (-webkit-backdrop-filter: none) { .element-blur { -webkit-backdrop-filter: blur(3px); } } 이렇게 해두면 .element-blur 클래스가 적용된 객체 뒤로 깔리는 모든 요소가 실시간으로 흐리게 처리된다 (스크롤 할때도 마찬가지). 더불어 -webkit-backdrop-filter 에는 blur(), invert(), grayscale() 효과를 줄 수 있으며, 아래 이미지로 설명한다. 이미지 출처: https://webkit.org/..

모바일 웹킷 기반 브라우저, 즉 아이폰이나 아이패드의 사파리 브라우저에서 유동적(dynamically)으로 생성된 객체에 z-index가 제대로 적용되지 않는 문제가 있다. 이는 애플에서도 알고 있는 공식적인 문제인데 조만간 패치가 나오지 않는 이상 아래와 같은 방법으로 우회하여 해결한다. z-index가 적용된 객체의 CSS에 아래를 추가한다. -webkit-transform-style: preserve-3d; -webkit-transform: translateZ(-5px); 설명하자면, z-index는 이차원 공간에서 객체를 정렬하지만, preserve-3d를 적용하고 translateZ() 값을 주면 삼차원 공간에서 객체를 위치시킨다. 따지고보면 같은 말인데 모바일 웹킷에서 삼차원으로 해야 작동하는..

다음과 같은 폼이 있다고 하자. Login 기존에 제목과 같은 효과를 내기 위해서 onload="document.login.idn.focus();" 이러한 코드를 태그 내부에 추가했지만, 어찌된 영문인지 동작하지 않을 때도 있었다. 따라서 아래와 같이 jQuery를 이용하면 간단하게 해결할 수 있다. $(document).ready(function(){ $("#idn").focus(); }); 추가> 만약 #idn이 쿠키로 저장되어있을 경우, #password가 포커스 되도록 하려면 아래와 같이 한다. $(document).ready(function(){ if($.cookie('쿠키이름')){ $("#password").focus(); } else { $("#idn").focus(); } }); 물론, ..

Ultimate CSS Gradient Generator는 ColorZilla라는 FireFox 부가기능으로 유명한 Alex Sirota가 제작한 툴이다. 단 한번의 클릭, 혹은 몇번의 클릭으로 그라데이션을 표현하는 CSS를 쉽게 얻을 수 있다. Preview 오른쪽 아래에 IE를 체크하면 Internet Explorer에서 어떻게 보이는지 테스트할 수 있다. (여담: IE9에서도 저렇게 보일까? 언제쯤 표준에 가까워지기라도 할까?) Ultimate CSS Gradient Generator 바로가기

placeholder는 input 폼에 글자가 입력되기 전 기본으로 보여주는 텍스트이다. 예를들면, 이렇게 입력하면 아래 스크린샷 같은 결과가 출력된다. type 속성이 password 일지라도 위와 같이 텍스트가 출력되는 등, 미리 지시사항 등을 등록해놓을 수 있기 때문에 공간절약에 탁월한 장점이 있으나... 문제는, 역시나 Internet Explorer는 전혀 인식하지 못한다는 것. 아래와 같은 자바스크립트를 이용하면 placeholder 태그와 같은 효과를 낼 수 있다. // Placeholder for IE function activatePlaceholders() { var detect = navigator.userAgent.toLowerCase(); if (detect.indexOf("safa..

QR코드는 스마트폰과 결부해 카메라로 스캔하는 것만으로 웹사이트를 방문할 수 있도록 한다. 다양한 방법으로 광고와 마케팅에도 응용되고 있다. 이러한 QR코드를 만들어주는 서비스는 다양하지만, 여기서는 구글에서 제공하는 차트API를 이용해 매우 간단하게 QR코드를 만드는 방법을 소개하고자 한다. 1) 아래의 코드를 페이지의 원하는 부분에 추가한다. 구글 차트 API : http://code.google.com/intl/ko/apis/chart/infographics/docs/qr_codes.html