WIT – NTS UIT Blog

flexbox로 만들 수 있는 10가지 레이아웃

Posted by in Research

기존에 사용하던 레이아웃 기법은 display, float, position으로 컬럼 레이아웃을 표현하는 데 한계가 있고 구현 방법이 복잡한 문제가 있었는데요. 마크업 개발자들이 종종 “이것은 구현이 어렵습니다.” 라고 얘기했던 이유 중 하나이기도 했습니다. flexbox 모델의 장점을 한 마디로 표현하면 “복잡한 계산 없이 박스의 크기와 순서를 유연하게 배치할 수 있다.” 라고 정리할 수 있습니다. 정렬, 방향, 순서, 사이즈 등을 유연하게 조절하기 때문에 별도의 분기 처리가 줄어들고, CSS만으로 다양한 레이아웃 구현이 가능합니다. PC는 IE10이상 대응시, 모바일에서는 Android, IOS 거의 모든 버전에서 적용이 가능합니다. (https://caniuse.com/#feat=flexbox) 기존 작업방식과 차이점을 중심으로 각 레이아웃에 대해 하나씩 살펴보도록 하겠습니다. 예제 URL : https://codepen.io/witblog/full/rrGjPx 스크롤이 없는…read more

새로운 CSS Typed Object Model

Posted by in Research

이 글은 https://developers.google.com/web/updates/2018/03/cssom 문서 번역을 기초로, 필요한 설명을 일부 추가한 글입니다. 요약 최근 W3C Houdini WG에서 표준화 하고 있는 CSS Typed Object Model이 크롬 66에 추가되었습니다. CSS Typed Object Model은 아래와 같이 사용할 수 있습니다:

이제 CSS는 JavaScript에서 사용하기에 적절한 객체 기반 API를 갖게 되었으며, 기존의 CSSOM의 미묘한 버그들와 문자열로 인한 제약을 해결할 수 있습니다! 1. 소개 CSSOM 이전의 CSS에는 수년간 Object Model(CSSOM)이 존재했습니다. CSSOM은 JavaScript에서 CSS를 조작할 수 있게 해주는 API입니다. CSSOM은 웹 페이지에서 발견되는 CSS 스타일의 기본 ‘맵’으로, DOM과 결합된 CSSOM은 브라우저에서 웹 페이지를 표현하는데 사용됩니다. JavaScript에서 .style을 read 또는 set할 때…read more

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