WIT – NTS UIT Blog

CSS Paint API

Posted by in Research, Translation

이 글은 https://developers.google.com/web/updates/2018/01/paintapi 문서 번역을 기초로, 필요한 설명을 일부 추가한 글입니다. Chrome 65에 도입된 CSS의 새로운 가능성 “CSS Custom Paint” 혹은 “Houdini’s paint worklet”이라고도 불리는 CSS Paint API가 크롬 65에 추가되었다. 지금까지 background-image나 border-image와 같은 속성은 이미지 파일을 로딩하기 위해서 속성 값으로 url() 혹은 linear-gradient()를 사용해 왔다. 크롬에서 새로 도입된 CSS Paint API를 사용하면 프로그래밍 방식으로 이미지를 생성할 수 있기 때문에, 이미지를 참조하는 대신 paint 함수를 사용하여 <canvas> 요소와 유사하게 이미지를 그릴 수 있다. 쉽게 말해서 개발자가 직접 요소의 배경, 테두리 등 꾸미는 요소들을 직접 그릴 수 있게 된 것이다. 사용하는 방법은 다음과 같이 아주 간단하다.

CSS의 PaintWorklet에 checkerboard.js라는 이름의 스크립트…read more

포용적 컴포넌트: 토글 스위치 컴포넌트 제작기

Posted by in Research

담당 서비스에서 신규 추가되는 UI를 제작하다가, 토글 스위치가 등장하는 부분이 있어서 이를 시험삼아 컴포넌트화 해보기로 마음 먹었습니다. 만들기 전에 우선 포용적 컴포넌트: 토글 버튼편(Inclusive Components – Toggle Button) 번역글을 읽어보니 도움이 많이 되었습니다. 마지막 부분에 핵심이 다 적혀 있습니다. 토글 버튼을 만들 때 체크해야 하는 사항들은 다음과 같습니다. 사용자들에게 체크박스와 같은 폼 요소들이 폼 데이터 제출용이 아니라 켜기/끄기 토글용임을 인지시킬 수 있다면, 폼 요소들을 사용해도 됩니다. aria-pressed와 aria-checked는 링크가 아니라 <button>과 함께 사용하세요. 레이블과 상태를 같이 바꾸지 마세요. “켜짐”, “꺼짐”과 같이 눈으로 볼 수 있는 텍스트 레이블(혹은 이와 비슷한 것)을 사용할 때는 aria-labelledby를 사용해 텍스트를 덮어쓰기를…read more

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

Posted by in Research, Translation

원문: https://inclusive-components.design/toggle-button/ 본 번역문은 원작자의 동의하에 번역 및 게시되었습니다. 원문 게시일: 2017년 3월 31일 번역글 1차 수정: 2018년 1월 5일 토글 버튼 토글 버튼 중 어떤 것들은 껐다가 킬 수 있지만, 어떤 것들은 킬 수가 없기도(혹은 못 끄기도)하고, 어떤 것들은 반드시 꺼야만(혹은 반드시 켜야만) 합니다. 토글 버튼의 컨셉 자체는 너무나 간단합니다. 앞 문장은 제가 일부러 온오프 스위치, 즉 토글 버튼이라고 해서 모두 똑같지는 않다는 것을 알려드리기 위해 일부러 복잡하게 만들었을 뿐입니다. 토글 버튼의 용도는 간단하지만, 이것의 사용처나 형태는 매우 다양하게 나뉘어 졌습니다. 수용적인 컴포넌트(Inclusive Component) 시리즈의 첫 공식 포스트인 이 글에서,…read more

언제나 사용하기 쉬운, SCSS MIXIN으로 만드는 Pure CSS ICON

Posted by in Research

본 게시물에 언급된 SCSS는 GITHUB 저장소 및 NPM을 통해 설치 가능합니다. https://github.com/ntswitblog/icon-scss-mixins-witblog 왜 Pure CSS ICON을 사용하는가? 일반적으로 웹에서 ICON 이미지를 적용할 때, sprite 이미지를 주로 사용한다. 하지만 라인, 원형, 삼각형, 사각형 같은 단순한 도형의 아이콘은 png나 svg 이미지 대신 Pure CSS로 그리는 경우가 종종 있으며, CSS로 ICON을 표현하면 이미지의 요청과 전송량을 줄여 UI 성능을 개선할 수 있다. 하위 브라우저를 대응하는 서비스에서는 Pure CSS ICON을 적용하기 어렵겠지만, 모바일과 IE9 이상의 PC 브라우저 또는 모바일 브라우저만 대응하는 서비스라면 Pure CSS ICON을 사용하는 것도 좋은 방법이다. ※ 하지만 디자이너가 직접 만든 이미지와…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