본문 바로가기
728x90

CSS

 (4)
State of CSS 2026, 새 기능보다 브라우저 지원이 더 큰 변수예요 State of CSS 2026, 새 기능보다 브라우저 지원이 더 큰 변수예요State of CSS 2026 썸네일CSS에 새 기능이 빠르게 늘면서 개발자는 외부 도구를 추가하기 전에 브라우저 지원부터 따져야 해요. 4,902명이 참여한 State of CSS 2026에서는 Anchor Positioning이 가장 관심을 받은 새 기능으로 꼽혔어요. 실무 도입을 늦추는 이유로는 브라우저 호환성이 다시 앞에 나왔어요. 1핵심 요약구분조사 결과개발자가 확인할 점새 기능Anchor Positioning 사용률이 전년보다 15%포인트 늘었어요지원 대상 브라우저와 대체 레이아웃을 먼저 정해야 해요보편화된 기능`:has()` 83.7%, `aspect-ratio` 81.3%, CSS Nesting 70.6%가 사용..
Instatic, 비주얼 편집과 정적 사이트 제작을 한곳에 묶었어요 Instatic, 비주얼 편집과 정적 사이트 제작을 한곳에 묶었어요IT & AI 뉴스 썸네일웹사이트를 직접 운영하려면 CMS, 프레임워크, 호스팅, 폼, 미디어 저장소를 따로 고르는 경우가 많아요. Instatic은 이 구성 요소를 하나의 Bun 서버에 묶고, 편집 결과를 시맨틱 HTML과 압축된 CSS로 내보내는 셀프호스팅 비주얼 CMS예요. 1핵심 요약구분내용운영 방식비주얼 에디터, 콘텐츠, 미디어, 인증, 폼, 플러그인, 퍼블리셔를 한 Bun 서버에서 다뤄요.데이터베이스기본 개발 환경은 SQLite를 쓰고, 여러 작성자나 관리형 백업이 필요하면 PostgreSQL을 선택할 수 있어요.공개 페이지게시할 때 정적 파일을 만들며, 일반 경로에서는 프레임워크 부팅이나 데이터베이스 왕복을 줄여요.확장 기능백..
사진이 보이는데도 스캔되는 디더링 QR 코드의 원리 사진이 보이는데도 스캔되는 디더링 QR 코드의 원리AI 뉴스 썸네일QR 코드 안에 사진을 넣으면서 스마트폰이 읽어야 할 정보도 남길 수 있을까요? 개발자 Andrew Taylor는 데이터 모듈의 중심을 보존하고, 그 주변에 오차 확산 디더링을 적용하는 방법을 공개했어요. 장식용 이미지를 단순히 덮는 방식보다 QR 코드가 어떤 지점을 읽는지 먼저 이용한 접근이에요. 1핵심 요약구분핵심왜 볼 만한가요공간 활용데이터 모듈을 3×3 픽셀로 나누고 중심 픽셀에 QR 정보를 남겨요나머지 8개 픽셀로 사진의 밝기와 형태를 표현할 수 있어요이미지 처리고정된 QR 픽셀의 밝기 오차를 주변 8개 픽셀로 먼저 퍼뜨려요무작위 점처럼 보이는 잡음을 줄이고 사진의 윤곽을 살려요판독 구조탐색 패턴과 정렬 패턴은 선명하게 유지해요스..
버튼 하나로 돌아본 프론트엔드 20년 버튼 하나로 돌아본 프론트엔드 20년AI 뉴스 썸네일2008년 무렵 웹 개발을 떠났다가 지금 돌아오면 `` 하나를 만드는 과정부터 낯설 수 있어요. jQuery, React, TypeScript, Vite, 서버 렌더링, 코딩 에이전트까지 여러 층이 더해졌기 때문이에요. David Poblador의 글은 각 도구가 어떤 불편을 해결하려고 등장했고, 그 해결책이 어떤 새 비용을 만들었는지 한 개의 버튼을 따라가며 보여줘요. 1핵심 요약시기해결하려던 문제뒤따른 비용jQuery와 AJAX브라우저 차이를 줄이고 페이지 일부만 바꿨어요데이터와 DOM 상태를 개발자가 직접 맞춰야 했어요컴포넌트 프레임워크상태에 따라 화면을 선언적으로 그렸어요런타임과 프레임워크 학습 비용이 커졌어요번들러와 고속 툴링모듈, 구형 브라우..
728x90

티스토리툴바