프로젝트를 진행하면서 585 이하의 기기에서는 모바일 소재의 이미지(배경 이미지)가 노출되고, 586 (폴드) 이상의 기기에서는 PC 소재의 이미지가 노출되어야 하는 스펙이 있었습니다.해당 스펙을 적용하기 위해 picture 요소를 사용하였으며 picture 요소에 대해 간략하게 정리해보았습니다. picture 정의 HTML Elements MDN 문서에 따르면 <picture>는 0개 이상의 source 요소와 1개의 img 요소로 이루어져 있으며 서로 다른 디스플레이/기기에서 이미지를 보다 유연하게 노출할 수 더보기…
서론 네이버 메인에는 광고가 군데군데 들어가 있는데, 저는 이 중에 롤링보드라는 영역의 비디오 플레이어 마크업 작업을 진행해야 하는 상황이었습니다. 기존에는 플래시로 광고 영상 플레이어가 구현이 되어 있었기 때문에, 이를 순수 HTML5로 변환하는 작업이었습니다. 그림 1: 네이버 메인 롤링보드 영역 처음 해보는 플레이어 마크업 이었기 때문에, 어떻게 시작을 해야 할지 약간 더보기…
HTML 5.1 권고안 공개 2016년 11월 1일 웹표준화단체인 W3C의 웹플랫폼워킹그룹(Web Platform Working Group)이 HTML 5.1을 W3C 권고안으로 공개했다. (W3C의 규격이 W3C 권고안에 이르기까지의 과정은 “초안 (Working Draft)” → “최종 초안 (Last Call Working Draft)” → “권고 후보 (CR : Candidate Recommendation)” → “권고안 (PR : Proposed Recommendation)” → “W3C 권고안 (Rec : Recommendation)” 라는 5개의 단계가 더보기…
Firefo 34.0 릴리즈 Firefox 34.0이 릴리즈 됐습니다. 개발자 도구에 localStorage inspector, console.table() 등이 추가됐고, profiler 도구가 개선됐습니다. 그리고 jQuery events를 대응합니다. 자세한 것은 아래 문서를 참고하세요. WebIDE, Storage inspector, jQuery events, iframe switcher + more – Firefox Developer Tools Episode 34 또한 CSS Fonts Level 3 시범적으로 적용됐고, template string 더보기…
프로젝트 도중에 HTML5 Video Element를 8개 삽입하면 7번째 Video Element 부터는 동영상을 제대로 로딩하지 못하는 문제가 있다는 사실을 발견하였다. <video src=”http://video.webmfiles.org/elephants-dream.webm”></video> <video src=”http://video.webmfiles.org/elephants-dream.webm”></video> <video src=”http://video.webmfiles.org/elephants-dream.webm”></video> <video src=”http://video.webmfiles.org/elephants-dream.webm”></video> <video src=”http://video.webmfiles.org/elephants-dream.webm”></video> <video src=”http://video.webmfiles.org/elephants-dream.webm”></video> <video src=”http://video.webmfiles.org/elephants-dream.webm”></video> <video src=”http://video.webmfiles.org/elephants-dream.webm”></video> 7, 8번째 동영상을 로딩하지 못해서 아래와 같이 나온다. 크롬을 열어서 더보기…
참고 : “Myth busting the HTML5 performance of transform:translate vs. top/left” 개요 HTML5에서 애니메이션 효과를 내는 여러가지 방법들이 있습니다. 그 중에서 가장 성능이 좋은 방법이 무엇인지 조사하던 중에 발견한 포스팅 내용을 요약하였습니다. 테스트 범위 transform:translate vs. position:absolute and top/left CSS Transitions vs. custom JavaScript requestAnimationFrame() Graphics acceleration on vs. 더보기…