(번역) 랜더링 성능을 향상 시키는 새로운 CSS 속성 content-visibility

content-visibility: the new CSS property that boosts your rendering performance 본 게시글은 https://web.dev/content-visibility/ 의 글을 번역 게시하였습니다. 8월 25일 Chrome 85에 추가된 content-visibility 속성에 대해 정리했습니다. 화면 밖 콘텐츠의 렌더링을 생략함으로써 초기 로드 시간을 개선합니다. Chrome 85에 새로 적용된 content-visibility 속성은 페이지 로드 성능을 더보기…

CSS 애니메이션의 성능 아는 만큼 좋아져요!

본 문서는 원작자의 동의를 얻어 원문의 의미를 해치지 않도록 번역하였으며, 이해를 돕기 위한 Chrome DevTools 활용 방법을 추가했습니다. CSS 애니메이션의 성능 비교 웹 페이지에서 애니메이션을 어떻게 구현하고 계신가요? JavaScript animation? CSS animation? 웅성웅성뭐야 뭐라는ㄱ.. 라이브러리를 활용해 JavaScript 애니메이션을 구현할 수 있지만, 더보기…

React Native UI 개발 시작하기

최근 React Native로 개발하는 프로젝트의 UI개발을 맡아 진행하였습니다. 컴포넌트나 스타일 등 웹에서 작업하던 것과 달라 초기에 많은 시행착오를 겪었는데요저와 같이 처음 React Native를 경험할 분들에게 기본적인 가이드가 있으면 좋을 것 같다고 생각해서 이 글을 작성하게 되었습니다. * React Native는 리액트 기반으로 동작되기 때문에 리액트 기본 지식과 ES6 기본 개념을 숙지하고 있어야 하며 UI 작업을 위해 CSS Flexbox에 대한 이해가 필요합니다. 이 글에서도 리액트의 기본 동작, Flexbox의 동작 등의 설명은 생략하였으니 참고해주세요.  React Native UI 개발 시작하기 더보기…

아이폰X 안전영역(Safe Area) 대응 사례 공유

안녕하세요. 감성 UI를 좋아하는 김성훈입니다. 일본 라인 앱 서비스인 LINE 변호사상담 프로젝트를 진행하면서 진행한 아이폰X 해상도 대응 내용 공유드립니다. 읽기 편하게 그림 많이 넣었으니 가벼운 마음으로 정독(?)해 주세요. 1. 안전영역(Safe Area)이란? Safe Area는 원래 TV에서 처음 도입된 개념입니다. TV 해상도 더보기…

Variable fonts (가변 폰트)

이미지 출처 https://eyeondesign.aiga.org/parametric-and-variable-typeface-systems-shape-shifters-for-letterforms/ UI 개발자가 알던 기존의 가변 폰트는 em, rem 단위를 사용하여 브라우저 비율에 따라 글자 크기가 늘어나거나 줄어드는 폰트였는데요, 여기서 말하는 가변 폰트는 다른 의미를 가지게 됩니다. 가변 폰트는 Adobe, Apple, Google, Microsoft 가 협력하여 폰트의 너비, 두께, 더보기…

CSS Logical Properties and Values

이 글의 주요 예제 및 도식은 Elad Shechte의 아티클과​ Rachel Andrew의 아티클에서 차용하였습니다. 배경 과거에 CSS는 세계인들이 가장 많이 사용하는 언어의 흐름 방식(horizontal-tb, LTR, 텍스트는 왼쪽에서 오른쪽으로 흐르고, 문단은 위에서 아래로 흐르는 방식)에 맞춰서 만들어졌다. 그렇기 때문에 CSS 속성에서 top, left, bottom, right는 항상 위쪽, 왼쪽, 더보기…