category개발노트HTML/CSS
- W3C HTML5 Specification 번역 준비
머리 속에서 사라지기 전에 남겨놔야 할 거 같아서 미비한 대로 기록해둔다. HTML 5.1 명세가 지난 9월 중순에 PR 상태가 되어서 이제까지 번역하던 HTML 5 버전을 어찌할까 고민하다 과감히 접어버리고(?) 새로이 5.1 버전부터 다시 번역하기로 마음먹고 W3C github repository를 다시 pull 받았다. HTML 5 때에는 해당 명세 페이지를 복사해 왔었으나, 아무래도 버전업이 될 때마다 diff가 되기 힘들듯 하여 github의 것을 그대로 활용해서 사용하려 했는데… 뭔가 복잡한 과정을 거쳐야 명세 페이지가
- Mac Safari에서 popstate 이벤트 문제
최근 작업 중인 사이트에 History객체의 .pushState() 메서드와 .replaceState() 메서드를 이용해서 ajax에 대한 URL history 처리를 해 두었는데, QA를 진행 하던 중 Mac Safari에서 window.onpopstate 이슈가 발생했다. 원인을 찾아가 보니 결국 popupstate 이벤트가 발생되는 시점의 문제였는데, 다른 브라우저들은 문제가 없는 반면 Mac Safari에서는 이 이벤트가 페이지 로드와 동시에 발생되는 문제가 발생한 것… 해결 임시 방편일지 이렇게 하는 것이 최선책일지는
X-UA-Compatible를 HTTP header 정보로 제공하기퍼블리싱의 이슈의 중심에는 늘 Microsoft Internet Explorer(이후 IE)가 있다. IE의 버전이 업데이트가 되면서 IE 8버전부터 호환성 보기라는 요상한 기능이 하나 추가가 되었었다. 하위 호환성을 위한 정책이라지만 이 녀석 때문에 생기는 문제는 여전히 너무 많다. 그 중 한 가지가 바로 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 이 녀석이다. 이 녀석을 사용함으로 인해서 늘 W3C markup
class name에 대한 고찰금일 오전 하코사에 이러한 질문이 올라왔다. .mt0{margin-top:0px !important;} .mt5{margin-top:5px !important;} .mt10{margin-top:10px !important;} .mt15{margin-top:15px !important;} .ml5{margin-left:5px !important;} .ml10{margin-left:10px !important;} .ml15{margin-left:15px !important;} .ml20{margin-left:20px
Facebook 공유하기 오픈그래프 스크랩 정보 확인최근 수능 프로모션 관계로 이벤트 페이지에 facebook share 기능을 붙이느라 이래저래 작업을 해서 테스트를 진행하는데 의도한대로 나타나지 않아 도대체 무엇이 문제인가?를 파악하기 위해 이래저래 애꿎은 코드만 달달 볶고 있다가 구글 선생님 덕분에 facebook 에서 현재 스크랩 된 정보를 확인 할 수 있는 디버거 툴이 있다는 것을 알게 되었다… (진즉에 알았더라면… ㅠ_ㅠ ) Open Graph Object Debugger 페이지 일단, URL부터 투척!! Open Graph Object Debugger 디버거 페이지로
- 핸드폰 번호 하이픈(-) 자동입력
최근 UI 작업 중에 핸드폰 번호 입력 시 자동으로 하이픈이 입력되도록 처리해달라는 요청이 있어 keyup event에 바인딩하여 쓸 용도로 자동 하이픈 처리 함수 하나를 만들어 봤다. 원리는 매우 단순하다. 일단 input box에 입력을 한다고 했을 때 value값을 인수로 넘겨주고 넘겨 받은 값으로 부터, 숫자 이외의 것들은 모두 제거하고 현재 입력된 값의 길이에 따라 {3}-{3}-{3} 형태 혹은 {3}-{4}-{3} 형태가 되도록 잘라내어 문자열을 재구성 하는 방식이다. 바로 적용을 시켜야 하는 부분이라서 최적화 부분은
- 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에서 Windows8 CPU 100% 점유율 문제 해결최근에 회사에 Windows8 이 들어왔길래 Windows 8 환경에서의 테스트를 위해 추가 구성을 했는데 한 가지 문제를 마주쳤다. 바로 이런 문제 ㄷㄷㄷ ;;;; Windows 8을 구성해서 돌려보니… CPU 점유율이 무려 100%에 이른다 ㄷㄷㄷ ;; 이 문제로 인해서 이 가상 PC는 버버버버버벅… ;;; 분명 무언가 문제이다 싶어서 주말 내 구글을 뒤져서 해결책을 찾았다. (역시 구글 선생님 ㅋ) 아래는 그 해결 방법이다. 일단 네트워크 속성을 연다. "이 연결에 다음 항목 사용"에 있는