이미지 출처 https://eyeondesign.aiga.org/parametric-and-variable-typeface-systems-shape-shifters-for-letterforms/ UI 개발자가 알던 기존의 가변 폰트는 em, rem 단위를 사용하여 브라우저 비율에 따라 글자 크기가 늘어나거나 줄어드는 폰트였는데요, 여기서 말하는 가변 폰트는 다른 의미를 가지게 됩니다. 가변 폰트는 Adobe, Apple, Google, Microsoft 가 협력하여 폰트의 너비, 두께, 더보기…
이 글의 주요 예제 및 도식은 Elad Shechte의 아티클과 Rachel Andrew의 아티클에서 차용하였습니다. 배경 과거에 CSS는 세계인들이 가장 많이 사용하는 언어의 흐름 방식(horizontal-tb, LTR, 텍스트는 왼쪽에서 오른쪽으로 흐르고, 문단은 위에서 아래로 흐르는 방식)에 맞춰서 만들어졌다. 그렇기 때문에 CSS 속성에서 top, left, bottom, right는 항상 위쪽, 왼쪽, 더보기…
HTML과 CSS를 사용하여 웹 페이지를 제작할 때 중요하게 생각해야 하는 것은 무엇일까요? 최종적으로는 디자인 가이드나 기획서 등 산출물을 바탕으로 동일한 화면을 출력하는 것일 텐데요 이 과정에서 좀 더 최적화된 웹 페이지를 만들어내는 것 또한 중요한 과제일 것입니다. 1. 소개 웹페이지에서는 더보기…
2019년 제7회 널리 세미나 모두가 함께 누리는! Make it More Accessible 모두가 함께 누릴 수 있는 다양한 기술을 기반으로 한 교육 방법들을 확인해 보고, 그 교육 속에서 모두를 위한 접근성을 높일 수 있는 방법을 함께 살펴보고자 합니다. 장소: 네이버 그린팩토리 더보기…
본 번역문은 원작자의 동의하에 번역 및 게시되었습니다. 브라우저에서 제공하는 <video> 요소의 재생 버튼, 타임라인은 어떻게 생성되는 걸까요? 얼마 전 번역한 DOM 아티클 작성자가 shadow DOM을 주제로 What is the Shadow DOM? 글을 작성했습니다. 꽤 오래된 개념이지만 이번 기회에 shadow DOM에 대해 자세히 알아보고자 이 더보기…
본 번역문은 원작자의 동의하에 번역 및 게시되었습니다. 최근 잘못 이해하고 있었던 DOM에 대해 정확한 개념을 정리해 보고자 Ire Aderinokun이 작성한 What, exactly, is the DOM? 문서를 번역해 보았습니다. DOM은 정확히 무엇일까? DOM(Document Object Model)은 웹 페이지에 대한 인터페이스입니다. 기본적으로 여러 프로그램들이 페이지의 콘텐츠 더보기…
2019년 1월 29일 정식 릴리즈 된 Chrome 72, Firefox 65 새로운 기능 중 UI 개발과 관련된 내용을 정리했습니다. 📌 Chrome 72 🔔 New Feature [JavaScript] Intl.ListFormat [JavaScript] Public class fields [JavaScript] User Activation Query API [JavaScript] Well-formed JSON.stringify 🔕 Remove Feature [JavaScript] Deprecate 더보기…
최고의 교육 + 네이버 서비스 관련 실무 경험 + 정규직 입사의 기회 HTML, CSS, JavaScript 등 UI개발 관련 실무 중심의 교육을 받을 수 있으며, 실제 네이버 서비스에 적용되는 UI개발 경험을 쌓을 수 있습니다. 또한, 인턴과정에서 우수한 성적을 거두는 분에게는 정규직 더보기…
gradient를 생각하면 색상이 자연스럽게 섞이는 이미지를 생각하거나… 오래된 사이트를 방문했을 때 여기저기 있는 촌스럽게 느껴지는 이미지를 생각했습니다. 작년 팀에서 진행한 CSS 시크릿 스터디에서 gradient를 자세하게 보게 되었고 생각보다 활용할 곳이 많이 있다는 것을 알게되었습니다. 그래프를 만드는 일을 하면서 이미지로 넣거나 더보기…
2018년 12월 4일 정식 릴리즈 예정인 Chrome 71 새로운 기능 중 UI 개발과 관련된 내용을 정리했습니다. 🔔 New Feature [CSS] ‘left’ and ‘right’ values for the ‘text-underline-position’ property [CSS] :host, :host-context, and ::slotted specificity [Graphics] Animation Worklet [Graphics] COLR/CPAL font support 더보기…