WIT – NTS UIT Blog

CSS Logical Properties and Values

Posted by in Research

이 글의 주요 예제 및 도식은 Elad Shechte의 아티클과​ Rachel Andrew의 아티클에서 차용하였습니다. 배경 과거에 CSS는 세계인들이 가장 많이 사용하는 언어의 흐름 방식(horizontal-tb, LTR, 텍스트는 왼쪽에서 오른쪽으로 흐르고, 문단은 위에서 아래로 흐르는 방식)에 맞춰서 만들어졌다. 그렇기 때문에 CSS 속성에서 top, left, bottom, right는 항상 위쪽, 왼쪽, 아래쪽, 오른쪽에만 대응이 된다. 하지만, 모든 언어의 흐름이 위와 같지는 않다. 언어 영어 아랍어 일본어 몽골어 writing-mode horizontal-tb horizontal-tb vertical-rl vertical-rl direction LTR RTL X X 그림 기타 horizontal-tb, LTR도 가능하다. 이렇게 모든 언어의 흐름은 각기 다르다. 하나의 언어에만 초점을 맞추어 CSS를 입히면 상관이 없지만, writing-mode나 direction이 다른 언어들을 대응해야…read more

CSS Containment Module

Posted by in Research

HTML과 CSS를 사용하여 웹 페이지를 제작할 때 중요하게 생각해야 하는 것은 무엇일까요? 최종적으로는 디자인 가이드나 기획서 등 산출물을 바탕으로 동일한 화면을 출력하는 것일 텐데요 이 과정에서 좀 더 최적화된 웹 페이지를 만들어내는 것 또한 중요한 과제일 것입니다. 1. 소개 웹페이지에서는 종종 불필요한 작업이 일어납니다. 예를 들면 문서의 한 곳에서 수정이 발생하더라도 이를 처리하는 브라우저는 문서 전체를 작업 범위로 간주하기 때문에 나머지 영역에 대한 불필요한 계산 작업을 합니다. 수정이 어떤 범위 내에 있어야 하는지 브라우저에 알릴 방법이 없기 때문입니다. 소개해드릴 CSS Containment Module은 웹페이지에서 선택된 하위 트리를 문서의 나머지 영역과 분리하는…read more

(번역) Shadow DOM은 무엇일까?

Posted by in Research, Translation

본 번역문은 원작자의 동의하에 번역 및 게시되었습니다. 브라우저에서 제공하는 <video> 요소의 재생 버튼, 타임라인은 어떻게 생성되는 걸까요? 얼마 전 번역한 DOM 아티클 작성자가 shadow DOM을 주제로 What is the Shadow DOM? 글을 작성했습니다. 꽤 오래된 개념이지만 이번 기회에 shadow DOM에 대해 자세히 알아보고자 이 글을 번역해보았습니다. 원문에서 다루지 않는 “slot” 개념은 다른 기술 문서를 참고하여 내용 하단부에 추가하였습니다. Shadow DOM은 무엇일까? 몇 주 전에 what exactly the DOM is 라는 아티클을 작성했습니다. 요약하자면, DOM(Document Object Model)은 HTML 문서의 구조화된 표현입니다. 이것은 브라우저가 페이지에 무엇을 렌더링 할지 결정하기 위해, 혹은 자바스크립트 프로그램이 페이지의 콘텐츠 및 구조,…read more

CSS Scroll snap points 알아보기

Posted by in Research

Safari에서만 사용할 수 있던 Scroll snap 모듈이 9월 4일 릴리즈되는 Chrome 69부터 지원합니다. 배경 Scroll snap 모듈을 사용하면 사용자가 터치, 휠 스크롤 조작을 마쳤을 때의 오프셋을 설정할 수 있습니다. 스크롤링은 사용자와 웹 콘텐츠간의 자연스러운 인터랙션이지만 정밀도가 부족하여 콘텐츠의 중간에서 멈추거나 주요 콘텐츠의 일부만 보이기도 합니다. 하지만 미리 설정한 위치로 이동한다면 자연스러운 스크롤 움직임과 함께 사용자 경험은 더욱 향상될 수 있습니다. CSS Scroll snap 모듈을 사용하면 스크롤 동작을 정의하기 위한 JavaScript 사용을 줄일 수 있고, 하드웨어 가속을 사용하기 때문에 웹 브라우저에서 원활한 동작과 성능 향상을 기대할 수 있습니다. 이해 Scroll Container는…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