루키의 보석함

자바스크립트를 통해서 브라우저를 확대 축소하는 방법을 정리해 보려고 한다. 태그의 style 속성 중 하나인 zoom을 활용하면 쉽게 구현할 수 있다. 브라우저 확대 축소 자바스크립트 구현 20%씩 확대하고 축소하는 자바스크립트 구문은 다음과 같다. scale 값을 기본값인 1로 설정하고, 확대의 경우 20%를 곱하고 축소는 20%로 나누어서 계산하도록 했다. 그리고 document.body.style.zoom 값을 변경해서 확대 축소를 구현할 수 있다. 다양한 브라우저 지원 그러나 위 예제는 인터넷 익스플로러, 구글 크롬, 사파리에서만 동작한다. 파이어폭스나 오페라 등을 지원하기 위해서는 CSS3의 Transform을 활용해야 한다. 이 부분까지 적용한 전체 소스는 다음과 같다. 미니의 확대/축소 테스..

웹 브라우저의 높이에 따라 본문의 내용을 늘리고 싶은 경우가 종종 있을 수 있습니다. 이런 경우, 먼저 브라우저의 높이를 가져올 수 있어야 하구요. 이어서 동적으로 특정 영역의 높이를 지정할 수 있어야 합니다. 브라우저 높이 가져오기브라우저의 높이를 가져오는 것은 다음과 같이 매우 간단합니다. alert(document.body.scrollHeight); 이 값을 기반으로 하단의 영역을 빼고 본문 영역의 높이를 지정하면 되겠죠. 참고로 브라우저의 높이와 관련된 자바스크립트 코드를 정리해 봅니다. 동적으로 높이 지정하기JQeury를 사용해서 다음과 같이 동적으로 높이를 지정할 수 있습니다. css 메소드에 height 값을 설정하는 형태로 했습니다. (바로 height 메소드를 사용할 수도 있습니다.) 이..

웹 표준으로 개발하면서 CSS를 적용하다 보면 항상 IE가 문제가 됩니다. 구글 크롬, 파이어폭스, 애플 사파리 모두 제대로 보이는데 IE만 이상하게 보이는 경우가 종종 있습니다. IE 8 버전 이후로 웹 표준을 많이 따르기 때문에 좋아졌다고는 하지만 아직도 안 맞는 부분들이 있네요. IE 브라우저의 CSS 구분 이런 경우, CSS Hack이라고 하는 특정 브라우저만 적용할 수 있는 편법들이 나오기도 하지요. 이외에도 일반적으로 사용하는 방법이 브라우저를 파악해서 다른 CSS 파일을 링크하도록 구성하는 겁니다. 다음 소스를 한번 보시죠.. 이렇게 하면 IE에서는 common_ie.css 파일을 사용하게 되구요. 다른 브라우저에서는 common.css 파일을 사용하게 됩니다. 이게 가능한 이유는 IE 브라..

몇달 전 IE 8 베타버전이 나오고 난 후, MS에서는 Acid2를 통과했다고 발표했습니다. 그러나 해외 블로거들 사이에서는 IE 8이 Acid2를 통과하는데 문제가 있다고 이야기들 하고 있습니다. 먼저 Acid가 무엇인지 잠깐 정리해 볼 필요가 있을 것 같습니다. Acid란 쉽게 말하면 웹 브라우저가 얼만큼 웹 표준을 지키고 있는지 테스트하는 웹페이지입니다. Acid1은 w3c에서 만든 테스트 버전으로 CSS1에 대한 표준을 준수하고 있는지 확인합니다. Acid2는 HTML과 CSS2.1스펙을 중점적으로 테스트하는데요.. 테스트를 통과할 경우 스마일 이미지와 Hello World가 나타납니다. Acid3는 가장 최근에 만들어졌는데요. 웹 2.0을 위한 동적인 웹 애플리케이션을 만드는데 필요한 스펙을 테..