WIT – NTS UIT Blog

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

Posted by in Research, Translation

원문: 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> 태그가 있습니다:

다른 font-family에 동일한 font-size를 적용할 경우 각 요소들은 서로 다른 높이값을 가집니다: 그림 1. 다른 font-family에 동일한 font-size을 적용한 경우 각각 다른 높이값을 가집니다. 우리가 그러한 작동 방식에 대해 알고 있다 하더라도 font-size: 100px; 이 각 요소의 높이값을 100px로 만들지 않는 이유는 무엇입니까? 저는 각 값을 측정해 보았습니다: Helvetica: 115px, Gruppo: 97px and…read more

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

Posted by in Research, Translation

원문: https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/ 본 번역문은 원작자인 Sergey Chikuyonok의 동의하에 번역 및 게시되었습니다. 이제 대부분의 사람들이 모던 웹 브라우저가 GPU를 사용해서 웹 페이지의 일부를 렌더링 한다는 사실을 알고 있습니다. 예를 들어, trasnform 속성을 사용해서 CSS 애니메이션을 구현하면 left나  top 속성을 썼을 때 보다 훨씬 부드러워 보입니다. 그러나 만약 “어떻게 GPU를 사용해서 부드러운 애니메이션을 만들어 낼 수 있을까요?”라는 질문을 던져본다면, 아마 들려오는 대답은 ” transform: translateZ(0)이나 will-change를 쓰세요”라는 말일 것입니다. 우리는 마치 IE6 대응을 위해 zoom:1을사용하는 것처럼, 이 두가지 속성을 GPU가 애니메이션 작업을(혹은 브라우저 벤더들이 좋아하는 방식으로 표현하자면, ‘컴포지팅’을) 할 수 있도록 준비 하는 용도로 사용하기 시작했습니다. 하지만 간단하게 데모로 만들어…read more

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

Posted by in Research

실무를 하다 보면 가볍게 이해한 스펙을 바탕으로 관습적으로 사용하는 속성들이 있다. 그중 word-break 속성과 word-wrap 속성에 대해 조금 더 명확하게 정리해보았다.   ※ 본 내용은 W3C 스펙문서에서 제공하는 내용 일부를 실무 경험을 바탕으로 의역 및 편집하여 작성한 것이다. 중국어/일본어/한글의 경우 W3C문서에서 CJK(Chinese, Japanes, Korean 의 약자)로 사용하고 있으며, 본 문서에서도 CJK로 지칭한다. 그 외 언어는 non-CJK(숫자, 영어, 베트남어 등)으로 지칭한다. 중단점은 ‘ · ’로 표기한다. word-break 속성과 word-wrap 속성 실무에서 두 속성은 주로 줄 바꿈을 위해 사용한다. 먼저 각 속성이 무엇인지 간단히 살펴보자. word-break : 아래 예제와 같이 단어의 분리를 어떻게…read more

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

Posted by in Research

(https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/ 문서를 토대로 번역하고, 다른 문서들을 조합해 정리하였습니다.) 1. 전처리기 변수와 CSS 커스텀 속성 오늘날 CSS 전처리기는 웹개발에서 중요한 역할을 수행하고 있습니다. (Sass, Stylus, Less, PostCSS 등) 전처리기의 주요 장점 중 하나는 변수를 사용할 수 있다는 것인데요. 변수를 사용하면 복붙을 피할 수 있고, 개발과 리팩토링이 간단해집니다. 그러나, 전처리기 변수에는 다음과 같은 몇가지 한계가 있습니다. 동적으로 변경할 수 없다. DOM 구조를 알지 못한다. JavaScript에서 읽거나 변경할 수 없다. 이러한 문제를 해결하기 위해 CSS 커스텀 속성이 개발되었습니다. 전처리기와 CSS 커스텀 속성 두 가지가 어떤 점이 다른지는 아래에서 더 자세히 알아보도록 하겠습니다. 2. CSS…read more

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

Posted by in Research

모바일 네이버 지도 개편을 하면서 검색창 부분과 상세페이지 스크롤 부분에 애니메이션이 추가되었습니다. 초기 검색창 부분 애니메이션은 CSS 속성 중 margin, height을 사용하여 구현했습니다. 하지만 애니메이션이 부자연스러운 현상이 있어 자료를 찾아보니 margin, height 속성은 애니메이션에 사용했을 때 성능 저하를 유발하는 속성 중 하나였습니다. 성능에 영향이 있는 속성들은 페이지 reflow를 일으키는 속성들이였고 이를 수정하여 성능을 향상 시킬 수 있었습니다. 이 글에서는 reflow를 최소화 하는 방법과 will-change를 설명하겠습니다. 검색창 애니메이션 초기에는 아래와 같은 애니메이션을 구현하고자 했습니다. 총 4가지 애니메이션이 들어가있는데요. 검색창이 왼쪽으로 축소되고 아래쪽으로는 확장됩니다. 검색창이 왼쪽으로 계속 축소되고 아래쪽으로는 확장됩니다. 추가로 한 줄 검색창은 fade-out,…read more