part2. Media Query 실전 적용 Media Query 기초편과 이어집니다. 미디어 쿼리를 사용하면 실행 중인 기기나 조건에 따라 스타일을 다르게 지정할 수 있고,반응형 웹, 다크 모드와 같은 다채롭고 트렌디한 웹 구현이 가능해집니다.이렇게 활용도 높은 미디어 쿼리를 실무에 어떻게 적용할 수 있는지 예시와 함께 설명드리겠습니다. 목차 1. 너비 분기 & 높이 분기 더보기…
part1. Media Query 기초 우리가 지금 읽고 있는 이 글은 모니터 또는 태블릿 등과 같은 미디어 매체를 통해 보여지고 있습니다.이러한 미디어 매체는 크고 작은 기기 사이즈, 터치 입력 지원 또는 흑백 컬러 출력과 같은 여러 유형과 특성을 가지고 있습니다.미디어 쿼리는 이처럼 미디어 매체의 다양한 유형과 특성을 확인하고, 특정 유형과 특성 더보기…
Recoil 시작하며 React 프로젝트를 진행하다 보면 많은 프로젝트에서 상태관리 라이브러리를 사용하게 됩니다. 저 역시 이번에 새로운 프로젝트를 시작하면서 어떤 라이브러리를 사용하는 것이 좋을지 고민하게 되었고, 그 과정에서 다양한 상태관리 라이브러리에 대해 알아보게 되었습니다. 그러던 중 Facebook에서 2020년 발표한 Recoil이라는 React 전용 라이브러리에 대해 알게 되었습니다. 간단한 사용과 Facebook이라는 타이틀 때문인지 현재 많은 관심을 받는 더보기…
SASS는 Ruby 언어로 처음 만들어져, LibSass -> Node-Sass로 발전하면서 지난 몇년 간, UI엔지니어 사이에서 큰 사랑을 받았습니다.현재는, Dart Sass라는 이름으로 설치 후 사용 가능하며, 조만간 Node-Sass에서 사용했던 문법들이 depreciated 된다고 공지 되었습니다. The Sass team discourages the continued use of the @import rule.Sass will gradually phase it out over the next few years, and eventually 더보기…
Cascade Layers Chrome99+, Firefox97+, Safari Technology Preview 및 Safari iOS에 도입된 CSS의 새로운 스펙 Cascade Layers에 대해 정리했습니다. 이해 a. CSS Cascade CSS Cascade는 CSS의 가장 강력한 강점으로, CSS가 요소에 적용하려는 스타일의 우선순위를 정하는 데 사용하는 알고리즘입니다. CSS Cascade는 어떤 스타일을 적용할지 결정하기 위해 몇 가지 기준을 고려하는데, 그 기준은 다음과 더보기…
React 환경에서 UI개발자와 FE개발자의 협업 문제를 해결하기 위해 View 컴포넌트에서 JSX 영역을 분리하는 VAC 패턴에 대해 소개하고, Presentational과 Container 컴포넌트 패턴과 어떻게 다른지 설명합니다.
CSS touch-action 한눈에 알아보기 touch-action CSS touch-action 속성이 무엇이며 어떻게 동작하는지 테스트 및 gif로 보기 쉽게 정리해보았습니다. 1. touch-action 속성 기본적으로 터치 이벤트의 처리는 브라우저가 담당하는 영역입니다.touch-action 속성을 통해 어떤 요소 내에서 브라우저가 처리할 터치 액션의 목록을 지정할 수 있습니다.표준 터치 제스쳐로는 터치를 사용한 스크롤(panning)과 여러 손가락을 사용한 확대/축소(pinch zoom)가 존재합니다. touch-action 더보기…
Progress Bar는 어떠한 작업이 수행될 때, 그 작업의 진행 상태, 수치 값을 시각적으로 보여주기 위해 사용하는 요소입니다.막대 형태의 Progress Bar는 일반적으로 아래와 같이 진행 상태에 따른 %를 width 값으로 주고그 영역만 배경색을 적용하는 방법으로 간단히 처리할 수 있었습니다. 문득 원형의 경우는 어떻게 적용할까 궁금해졌지만 방법이 쉽게 떠오르지 않았습니다.그래서 방법을 찾아보았고 여러 가지 더보기…