WIT – NTS UIT Blog

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

W3C 표준화 제정 단계

Posted by in Research

W3C 기술문서의 표준화 제정 단계는 웹 기술을 표준화 하기 위해서 W3C의 워킹그룹이 따라야 하는 여러 절차와 요구사항이다. 그리고 각 단계들은 공개된 문서가 최종 권고안으로 발전하기까지 어느 상태에 있는지 알려준다. “Working Draft:초안”과 “Working Group Note:노트”는 표준화 단계 중 시작 단계이고, “Recommendation:권고”, “Working Group Note:노트”, “Rescinded Recommendation:철회 권고”는 작업이 종료되었음을 나타낸다. (“Working Group Note”는 초안 전 단계의 문서이지만, 작업이 중단되어 종료됐을 경우에도 공개할 수 있다.) 1. Working Draft (WD) : 초안 W3C가 그 멤버 뿐만 아니라 대중, 다른 기술단체 등 여러 커뮤니티에 검토를 받기 위해 공개한 문서이다. 전부는 아니겠지만 Working Draft는 Recommendation로…read more

0