(번역) CSS에 대한 깊은 이해: 폰트 매트릭스, line-height와 vertical-align

원문: http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align 본 번역문은 원작자인 Vincent De Oliveira의 동의하에 번역 및 게시되었습니다.   line-height와 vertical-align은 아주 간단한 CSS 속성들입니다. 매우 간단하기 때문에 대분의 사람들은 이것들이 어떻게 작동하고 어떻게 사용하는지 완전히 이해하고 있다고 확신합니다. 하지만 실제로는 그렇지 않습니다. 이것들은 매우 복잡합니다. CSS에서 덜 알려진 특징 중 하나인 inline formatting context를 형성하는 주요한 역할을 하기 때문에 아마도 가장 어려운 것 중 하나가 될 수도 있습니다. 예를 들어, line-height는 길이 혹은 단위가 없는 값으로 설정할 수 있지만 1, 기본값은 normal입니다. 좋습니다. 하지만 ‘normal’은 무엇일까요? 우리는 종종 그 값은 1이나 1.2라고(혹은 그래야 한다고) 읽곤 했습니다. 심지어는 CSS 스펙에서 조차 그 부분에 대해 불분명합니다 . 우리는 단위가 없는 line-height와 font-size가 상대적이라는 것을 알고 있습니다. 하지만, 문제는 font-size: 100px은 font-family에 따라 다르게 동작한다는 것입니다. 그렇다면 line-height는 항상 같을까요? 다를까요? 이것은 정말 1에서 1.2 사이의 값일까요? 그리고 vertical-align은 line-height에 어떤 영향을 받을까요? 절대 단순하지 않은 CSS 메커니즘에 대해 깊게 알아봅시다… font-size에 대해 먼저 이야기해봅시다 간단한 HTML 코드를 살펴봅시다. <p> 태그 안에 서로 다른 font-family가 선언된 3개의 <span> 태그가 있습니다: <p> <span class=”a”>Ba</span> <span class=”b”>Ba</span> <span class=”c”>Ba</span> </p> p { font-size: 더보기…

(번역) CSS GPU 애니메이션 제대로 하기

원문: https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/ 본 번역문은 원작자인 Sergey Chikuyonok의 동의하에 번역 및 게시되었습니다. 이제 대부분의 사람들이 모던 웹 브라우저가 GPU를 사용해서 웹 페이지의 일부를 렌더링 한다는 사실을 알고 있습니다. 예를 들어, trasnform 속성을 사용해서 CSS 애니메이션을 구현하면 left나  top 속성을 썼을 때 보다 훨씬 부드러워 보입니다. 그러나 만약 “어떻게 GPU를 사용해서 부드러운 애니메이션을 만들어 낼 수 있을까요?”라는 더보기…

글쓴이 배 영,

HTML5 비디오 플레이어 마크업 작업기

서론 네이버 메인에는 광고가 군데군데 들어가 있는데, 저는 이 중에 롤링보드라는 영역의 비디오 플레이어 마크업 작업을 진행해야 하는 상황이었습니다. 기존에는 플래시로 광고 영상 플레이어가 구현이 되어 있었기 때문에, 이를 순수 HTML5로 변환하는 작업이었습니다.   그림 1: 네이버 메인 롤링보드 영역 처음 해보는 플레이어 마크업 이었기 때문에, 어떻게 시작을 해야 할지 약간 더보기…

글쓴이 배 영,

word-break 속성과 word-wrap 속성 알아보기

실무를 하다 보면 가볍게 이해한 스펙을 바탕으로 관습적으로 사용하는 속성들이 있다. 그중 word-break 속성과 word-wrap 속성에 대해 조금 더 명확하게 정리해보았다. 본 내용은 W3C 스펙문서에서 제공하는 내용 일부를 실무 경험을 바탕으로 의역 및 편집하여 작성한 것이다. 중국어/일본어/한글의 경우 W3C문서에서 CJK(Chinese, Japanes, Korean 의 약자)로 사용하고 있으며, 본 문서에서도 CJK로 지칭한다. 더보기…

CSS Custom Properties (커스텀속성) 소개

(https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/ 문서를 토대로 번역하고, 다른 문서들을 조합해 정리하였습니다.) 1. 전처리기 변수와 CSS 커스텀 속성 오늘날 CSS 전처리기는 웹개발에서 중요한 역할을 수행하고 있습니다. (Sass, Stylus, Less, PostCSS 등) 전처리기의 주요 장점 중 하나는 변수를 사용할 수 있다는 것인데요. 변수를 사용하면 복붙을 피할 수 있고, 개발과 리팩토링이 간단해집니다. 그러나, 전처리기 변수에는 다음과 더보기…

CSS 애니메이션 성능 개선 방법(reflow 최소화, will-change 사용)

모바일 네이버 지도 개편을 하면서 검색창 부분과 상세페이지 스크롤 부분에 애니메이션이 추가되었습니다. 초기 검색창 부분 애니메이션은 CSS 속성 중 margin, height을 사용하여 구현했습니다. 하지만 애니메이션이 부자연스러운 현상이 있어 자료를 찾아보니 margin, height 속성은 애니메이션에 사용했을 때 성능 저하를 유발하는 속성 중 하나였습니다. 성능에 영향이 있는 속성들은 페이지 reflow를 일으키는 속성들이였고 이를 더보기…

Webstorm으로 GIT 쉽게 사용하기

Webstorm 기준으로 제작되었지만 다른 JetBrains IDE 에서 모두 동일하게 적용됩니다. Webstorm UI 간단히 살펴보기 프로젝트 목록 및 파일상태 확인 창 파란색 파일명 : 수정된 사항 있음 초록색 파일명 : 신규 추가 빨간색 파일명 : 신규 파일 추가 시 – unstage 상태 merge 등의 작업 후 – 충돌 상태 gulp task 더보기…

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 : Proposed Recommendation)” → “W3C 권고안 (Rec : Recommendation)” 라는 5개의 단계가 더보기…

웹폰트 사용하기 (웹폰트 101)

1. 웹폰트란? 방문자의 로컬 컴퓨터에 폰트 설치 여부와 상관 없이 온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트입니다. 예를 들면, 웹폰트를 사용하지 않았을 경우 나눔고딕 폰트 미설치 PC에서는 기본 폰트인 돋움 폰트가 노출되고 나눔고딕 폰트 설치 PC에서는 나눔고딕 폰트가 노출됩니다. 하지만 웹폰트를 사용할 경우에는 나눔고딕 폰트 더보기…

Layer 화면 중앙정렬 방법

널리에 작성되어 있던 기존 글을 다듬어 재게시합니다. 마크업 작업을 하다보면 div layer를 화면 정중앙에 정렬해야 하는 경우가 많습니다. layer 사이즈가 고정이면 간단히 표현할수 있지만 가변형일 경우에는 매번 어떤식으로 표현을 할까 생각하곤 합니다. 그래서 어떤 경우의 수들이 있는지 정리 해보았습니다. 1. position:absolute와 margin 마이너스값을 이용한 중앙 정렬 장점 : IE7 이상 모든 더보기…