Bleeding edge

"화면의 너비에 따라 아이콘 크기 변경하기"라는 주제로, 화면 크기에 따라 유연하게 아이콘 크기를 조정하는 방법을 정리해보겠습니다. 이 방법은 특히 이미지와의 상호작용이 필요한 경우나, 부모 요소의 너비가 명시되지 않아 % 단위를 사용할 수 없는 상황에서 유용합니다. 주로 네비게이션 아이콘이나 햄버거 메뉴 아이콘처럼 고정된 크기의 아이콘이 아닌, 다양한 해상도에서 크기가 조정되어야 하는 아이콘에 적용할 수 있습니다.방법 개요아이콘 크기 조정 시 화면의 max-width가 설정된 경우와 그렇지 않은 경우가 있는데요, 이 글에서는 max-width가 지정된 경우를 다루겠습니다. 가장 작은 화면에서도 동일한 논리를 반대로 적용해 크기를 조정할 수 있습니다.1. 미디어 쿼리로 기본 크기 설정먼저, 화면 너비가 ..

이미지와 PDF 업로드 및 미리보기 구현기이번 프로젝트에서 이미지와 PDF 파일을 업로드하는 기능을 개발해야 했고, 특히 PDF 파일에 대한 미리보기를 구현하는 부분에서 고민이 많았다. 이미지는 비교적 간단히 처리할 수 있었지만, PDF 미리보기는 구현 경험이 없어서 새로운 접근법을 찾는 과정이 필요했다. 아래에서는 문제 해결 과정을 공유하고, 각 문제점과 해결 방안을 설명한다. 접근 방법먼저 input 요소의 change 이벤트에서 파일 타입을 기준으로 이미지와 PDF 파일을 구분하여 상태(state)로 관리했다. const handleFileChange = (event: ChangeEvent) => { const selectedFiles = Array.from(event.target.files..

Fade-Out Gradient 효과 구현기이 글에서는 내가 개발 중인 프로젝트에서 overflow가 발생하는 컴포넌트에 적용한 "fade-out gradient" 스타일에 대해 설명한다. overflow된 부분이 단순히 잘리는 대신, 서서히 사라지는 느낌을 주기 위해 이 효과를 사용했다. 이 글에서는 문제 해결 과정과 함께, Tailwind CSS를 활용하여 효과를 구현한 방법을 공유하려 한다. 접근 방법 - Pseudo 클래스 활용하기현재 프로젝트에서는 Tailwind CSS를 사용하고 있다. Tailwind는 기본적으로 mask-image 속성을 지원하지 않지만, 양쪽 끝에 fade-out gradient를 적용하라는 요구사항이 있었다. 처음 시도한 방법은 before와 after pseudo 요소..