본문 바로가기

[wed][HTML/CSS] vh/vw와 %의 차이 vh / vw와 %의 차이요약 : vw와 vh는 스크롤바 포함, %는 미포함 안녕하세요. 부끄럽지만, vh/vw라는 css단위를 최근에서야 알게 되었습니다.기본적으로 vh와 vw는 각각 view port의 높이와 너비를 의미합니다. 즉 body의 width를 100vw, height를 100vh로 지정하면 body의 부피는 화면 전체를 차지하게 됩니다.그렇다면, body의 width와 height를 100%로 지정하는 것과는 어떤 차이가 있을까요? vw와 vh를 사용한 경우 %를 사용한 경우 위 두 사진의 차이점은 스크롤 바가 발생했느냐 아니냐의 차이입니다.vw와 vh를 사용하여 body의 크기를 설정한 경우(100으로), 스크롤바가 발생되게 됩니다.%의 경우는 그렇지 않고요. vw와 vh에서 스크롤바가.. 더보기
[web][webAudioAPI] web Audio API로 audio visualizer 만들기 안녕하세요.이번에는 Web Audio API를 잠깐 다뤄보려고 합니다.아직 working draft이지만, 굉장히 많은 일들을 할 수 있는 API이기 때문에 잠깐 다루어 봤습니다. 더보기
[web][jquery][jquery-ui] jquery color관련 animation 사용하기 jquery-ui.js jquery를 사용하면 js를 사용해서 복잡한 애니메이션 조금 더 간편하게 구현할 수 있습니다.그런데, jquery만 가지고는 하지못하는 애니메이션들이 있습니다. 대표적인 예로 color속성이 있습니다. 예를들어 이러한 js코드가 있습니다. 1234$(".remote .category").children("a").eq(0).animate({ fontSize: "1.5em", color: "white"})Colored by Color Scriptercs 위의 코드는 어떤 DOM객체에 fontSize와 color를 변경하는 애니메이션입니다.단순 jquery만을 로드한채라면 저 애니메이션은 예상한대로 동작하지 않습니다.fontSize만 증가하고, color는 변화가 없을 것입니다. 이때 필요한 것이, jque.. 더보기