전체 글53 CSS Counter를 활용한 컨텐츠 넘버링 처리 목록이나 리스트를 다룰 때, 자동으로 넘버링을 처리할 수 있다면 얼마나 깔끔할까요? 이런 코드를 만들 때 순수 CSS만으로 이런 처리를 하기가 쉽지 않다고 느낄 수 있습니다. 하지만 CSS Counter를 이용하면 간단하게 해결할 수 있습니다.이번 글에서는 CSS Counter를 활용해서 콘텐츠 자동 넘버링을 구현하는 방법을 소개합니다.결과 미리 보기아래는 우리가 만들게 될 결과 화면입니다.두 가지 버전이 보이죠?일반적인 넘버링 리스트넘버링과 라벨을 함께 사용하는 리스트핵심 기술: CSS CounterCSS Counter는 HTML 요소에 숫자를 자동으로 부여할 수 있는 기능입니다. counter-reset, counter-increment, content 속성을 조합해서 리스트 스타일을 제어합니다.예제.. 2025. 4. 3. getBoundingClientRect를 활용한 Viewport 내의 컨텐츠 요소 체크 방법 웹 개발을 하다 보면 특정 요소가 현재 뷰포트(Viewport)에 들어와 있는지를 판단해야 할 때가 있습니다. 예를 들어, 사용자가 특정 영역에 도달했을 때 애니메이션을 주거나, 스타일을 변경하는 등의 동작을 할 수 있죠. 이 경우 Observer를 활용한 방식 또는 컨텐츠의 높이값을 계산해서 처리하는 방식 등 다양한 방식이 있지만 이번 글에서는 getBoundingClientRect() 메서드를 활용하여, 요소가 뷰포트 안에 들어와 있는지 체크하는 방법을 소개합니다.getBoundingClientRect()란?이 메서드는 DOM 요소의 크기와 뷰포트에 상대적인 위치 정보를 담고 있는 DOMRect 객체를 반환합니다. 이 객체는 top, right, bottom, left, width, height 등의.. 2025. 4. 3. Cloudflare 이미지 변환을 활용한 최적화된 이미지 처리 웹사이트에서 이미지 최적화는 필수적인 요소입니다. 특히, 다양한 해상도와 디바이스에서 최적의 품질을 유지하면서 로딩 속도를 개선하는 것이 중요합니다. Cloudflare의 이미지 변환(Image Resizing) 기능을 활용하면 URL을 통해 간단하게 이미지를 변환하고 최적화할 수 있습니다. 이 글에서는 Cloudflare의 이미지 변환 기능을 활용하여 최적화된 이미지 URL을 생성하는 imageConverter 함수와 반응형 이미지 URL을 생성하는 getSource 함수, 그리고 이를 활용한 makeConvertedThumb 함수를 소개합니다.1. imageConverter: Cloudflare를 이용한 이미지 변환 URL 생성const formats = { optimization: ['avif', .. 2025. 3. 4. PDF에서 첫 페이지 썸네일 추출하기 프로젝트에서 PDF 파일의 첫 페이지를 썸네일 이미지로 추출해야 할 때가 있습니다. 이를 위해 PDF.js 라이브러리를 사용하면 간단히 구현할 수 있습니다. 이번 글에서는 PDF 파일의 첫 페이지를 Canvas에 렌더링하고 썸네일 이미지를 생성하는 방법을 설명합니다.1. 프로젝트 준비먼저, 프로젝트를 시작하기 위해 다음과 같은 환경을 설정합니다:패키지 매니저: pnpm기술 스택: TypeScript, pdf.js목표: PDF 파일의 첫 페이지를 썸네일로 변환프로젝트 초기화 및 라이브러리 설치pnpm install -D pdfjs-distpdfjs-dist는 pdf.js의 브라우저 빌드 패키지입니다.2. PDF 첫 페이지를 이미지로 변환하는 함수PDF 파일의 첫 페이지를 썸네일로 변환하는 TypeScrip.. 2025. 1. 22. eBUS SDK Python API를 활용한 Jai 카메라 다중 채널 스트리밍 구현 이 글에서는 Python과 PyQt5를 사용하여 eBUS SDK Python API를 기반으로 Jai 카메라와의 다중 채널 카메라 스트리밍 애플리케이션을 개발하는 과정을 설명합니다. 이 프로젝트는 여러 카메라에서 실시간 스트리밍 데이터를 수집하고, 이를 PyQt5 기반 UI에서 표시하며, 각 채널의 노출 시간을 조정할 수 있는 기능을 포함합니다. Jai 카메라를 통해 수집한 이미지를 활용한 딥러닝 작업을 진행하기에 앞서 개발중에 있는 카메라 관련 초기 개발모델에 대해서 정의합니다. 프로젝트 구성프로젝트는 다음 세 가지 주요 파일로 구성되어 있습니다:main.py: 애플리케이션의 진입점으로, PyQt5 애플리케이션을 초기화하고 주요 클래스와 UI를 실행합니다.device_manager.py: eBUS SD.. 2025. 1. 3. Zustand를 활용한 리스트 상태 관리 스토어 구현하기 이 글에서는 Zustand와 TypeScript를 활용해 서비스의 리스트들의 데이터를 관리하는 ListStore를 구현하는 과정을 공유합니다.Zustand란?Zustand는 React 기반의 상태 관리 라이브러리로, 가볍고 간단한 API를 제공합니다. 기존의 상태 관리 라이브러리인 Redux와 비교했을 때 설정이 간소화되어 있고, 직관적인 코드 작성을 가능하게 합니다.1. Zustand로 리스트 상태 관리 스토어 구현하기초기 상태 정의하기리스트 상태를 관리하기 위해 listInitialState를 정의합니다. 이 객체는 다양한 리스트 데이터를 초기화합니다.const listInitialState = { ...allLists,};export type ListState = typeof listInitial.. 2024. 12. 30. 이전 1 2 3 4 ··· 9 다음
