category개발노트HTML/CSS
- CSS로 jQuery slideToggle() 효과 만들어보기
일전에 프로젝트로 모바일 웹을 만들면서 재미겸 연습겸(?) CSS animation과 max-height 를 이용해서 jQuery의 slideToggle()과 같은 효과를 만들어 봤다. 몇 가지 고민을 더 해봐야 하는 부분이 있지만 만들어보고 나니 재밌는 형태를 하나 만든거 같다 ㅋ Example Sources markup <nav> <ul> <li> <a href="#">menu-01</a> <ul class="sub-nav"> <li><a
- 세로 100% 레이아웃
기억하기로 처음 필자가 세로 100% 레이아웃을 만들기 위해 머리를 싸맸던것은, 블로그 스킨을 만들면서 처음으로 header – main(container) – footer 구조를 만들기 위해서 였던것 같다. 당시의 나는 아직 퍼블리셔로서의 진로는 결정하기 이전이었고, 그냥 취미삼아 공부삼아 블로그 스킨을 만들던 때였다. 그 때부터 이미 구글은 내게 훌륭한 조언자(?)였고 인터넷에는 많은 선생님들이 계셨다 ㅎㅎ Old Version 지금까지도 여전히 사용되는 방법이기는 하지만, 이제는 Old 로 좀 넘기고 싶다 /=ㅁ=/ ;;
안드로이드 크로스브라우징 테스트 환경 구축모바일계의 IE… 안드로이드 기본브라우저를 두고 내가 붙여준 별명이다 = _=a 어플리케이션을 개발할 때 안드로이드가 OS 버전별로 파편화가 심하여 고생하는 만큼, 모바일 웹을 제작하는데 있어서도 안드로이드의 파편화는 정말 '재앙' 수준 이다. 이전 회사에 몸담고 있을 때는, 어떻게든 모바일 웹을 테스트 하기 위해 갖가지 실 단말기들을 구해서 테스트를 진행해 왔는데, 이것도 한계가 있더라… 거기다 현재 회사에 와서는 그 많은 실 단말기를 테스트 하기 어려운 상황인지라 어떻게든 안드로이드 브라우저에서 테스트를 진행할 수 있을지에
- 크로스브라우징 테스트 환경 구축 (VirtualBox)
퍼블리셔에게 가장 필요한 것 중 한 가지가 아마 크로스브라우징을 테스트하기 위한 환경을 구축하는 일일 것이다. 그도 그럴 것이 Microsoft Internet Explorer(이하 IE)는 버전마다 그리고 어느 OS에 설치되어 있느냐에 따라 버그가 다르고 렌더링이 차이가 나기 때문. Windows에는 기본적으로 1개 버전의 IE만을 설치할 수 있게 되어 있기 때문에, 여러 버전을 테스트한다는 것이 쉽지 않다. 물론 개발자도구를 열어 문서모드를 변경함으로 테스트를 진행해볼 수도 있지만 이것이 정확한 레거시 버전의 렌더링을 보여주지