WIT – NTS UIT Blog

(번역) 포용적 컴포넌트: 토글 버튼

Posted by in Research, Translation

원문: https://inclusive-components.design/toggle-button/ 본 번역문은 원작자의 동의하에 번역 및 게시되었습니다. 원문 게시일: 2017년 3월 31일 토글 버튼 어떤 토글 버튼들은 껐다 켤 수 있지만, 어떤 것들은 켤 수가 없기도(혹은 못 끄고)하고, 어떤 것들은 반드시 꺼야만(혹은 반드시 켜야만) 합니다. 이 개념은 너무나 기초적이라 앞 문장은 제가 일부러 설명하고자 복잡하게 만들었는데, 보시다시피 켜기/끄기 스위치(토글 버튼)가 항상 동일하게 작동하지는 않습니다. 토글 버튼의 용도는 간단하지만, 이것을 직접 사용하거나 만들려면 다양한 형태의 버튼이 나오게 됩니다. 수용적인 컴포넌트(Inclusive Component) 시리즈의 공식적인 첫 포스트인 이 글에서, 저는 토글 버튼을 어떻게 하면 수용적인 성격을 띄도록 만들 수 있는지에 대해 탐구해…read more

(번역) 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