Research
HTML5 비디오 플레이어 마크업 작업기
서론 네이버 메인에는 광고가 군데군데 들어가 있는데, 저는 이 중에 롤링보드라는 영역의 비디오 플레이어 마크업 작업을 진행해야 하는 상황이었습니다. 기존에는 플래시로 광고 영상 플레이어가 구현이 되어 있었기 때문에, 이를 순수 HTML5로 변환하는 작업이었습니다. 그림 1: 네이버 메인 롤링보드 영역 처음 더보기…
Research
word-break 속성과 word-wrap 속성 알아보기
실무를 하다 보면 가볍게 이해한 스펙을 바탕으로 관습적으로 사용하는 속성들이 있다. 그중 word-break 속성과 word-wrap 속성에 대해 조금 더 명확하게 정리해보았다. 본 내용은 W3C 스펙문서에서 제공하는 내용 일부를 실무 경험을 바탕으로 의역 및 편집하여 작성한 것이다. 중국어/일본어/한글의 경우 W3C문서에서 CJK(Chinese, 더보기…
Research
CSS Custom Properties (커스텀속성) 소개
(https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/ 문서를 토대로 번역하고, 다른 문서들을 조합해 정리하였습니다.) 1. 전처리기 변수와 CSS 커스텀 속성 오늘날 CSS 전처리기는 웹개발에서 중요한 역할을 수행하고 있습니다. (Sass, Stylus, Less, PostCSS 등) 전처리기의 주요 장점 중 하나는 변수를 사용할 수 있다는 것인데요. 변수를 사용하면 복붙을 더보기…
Research
CSS 애니메이션 성능 개선 방법(reflow 최소화, will-change 사용)
모바일 네이버 지도 개편을 하면서 검색창 부분과 상세페이지 스크롤 부분에 애니메이션이 추가되었습니다. 초기 검색창 부분 애니메이션은 CSS 속성 중 margin, height을 사용하여 구현했습니다. 하지만 애니메이션이 부자연스러운 현상이 있어 자료를 찾아보니 margin, height 속성은 애니메이션에 사용했을 때 성능 저하를 유발하는 속성 중 더보기…
Research
Webstorm으로 GIT 쉽게 사용하기
Webstorm 기준으로 제작되었지만 다른 JetBrains IDE 에서 모두 동일하게 적용됩니다. Webstorm UI 간단히 살펴보기 프로젝트 목록 및 파일상태 확인 창 파란색 파일명 : 수정된 사항 있음 초록색 파일명 : 신규 추가 빨간색 파일명 : 신규 파일 추가 시 – unstage 더보기…
Research
HTML 5.1 정리 / HTML 5.2 미리보기
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 더보기…
Research
웹폰트 사용하기 (웹폰트 101)
1. 웹폰트란? 방문자의 로컬 컴퓨터에 폰트 설치 여부와 상관 없이 온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트입니다. 예를 들면, 웹폰트를 사용하지 않았을 경우 나눔고딕 폰트 미설치 PC에서는 기본 폰트인 돋움 폰트가 노출되고 나눔고딕 폰트 설치 더보기…
Research
Layer 화면 중앙정렬 방법
널리에 작성되어 있던 기존 글을 다듬어 재게시합니다. 마크업 작업을 하다보면 div layer를 화면 정중앙에 정렬해야 하는 경우가 많습니다. layer 사이즈가 고정이면 간단히 표현할수 있지만 가변형일 경우에는 매번 어떤식으로 표현을 할까 생각하곤 합니다. 그래서 어떤 경우의 수들이 있는지 정리 해보았습니다. 1. position:absolute와 더보기…
Conference
CSSCONF 참관후기 #2
CSSCONF 참관후기 #1에서 이어집니다. # 최신 CSS 스펙에 관한 주제 7. CSS4 Grid: 마침내 등장한 진정한 레이아웃(True Layout Finally Arrives) FlexBox: 이제는 그리드 시스템을 파야할 때(It’s Time to Ditch The Grid System) Grid / Flexbox 발표영상 바로가기 Grid / Flexbox 슬라이드 바로가기 과학의 힘으로 더보기…
Conference
CSSCONF 참관후기 #1
2016년 9월 미국 보스턴에서 진행된 CSSCONF 참관기를 공유합니다. 배영, 김세희님이 실을 대표해 참관해 주셨고, 본 후기를 직접 작성해 주셨습니다. 내용이 다소 길어 2편으로 작성합니다. 컨퍼런스 소개 CSSConf는 OOCSS로 유명한 니콜 설리반(Nicole Sullivan)이 주축이 되어 2013년 미국에서 첫번째로 개최되었습니다. 그 후로는 더보기…