Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
CSS-Tricks 11건필터 해제
What’s !important #11: 3D Voxel 장면, Flying Focus, CSS 구문 및 기타 소식
Heerich.js를 활용한 3D Voxel 장면 생성, Polypane의 새로운 스니펫 스토어 출시, 그리고 View Transitions를 이용한 포커스 애니메이션 기법 등 최신 웹 프론트엔드 기술 트렌드를 소개합니다.
접힌 모서리(Folded Corners)를 위한 CSS corner-shape 활용하기
CSS의 새로운 기능인 `corner-shape`를 활용하여 종이의 접힌 모서리 효과를 구현하는 방법을 설명합니다. `border-radius`의 좌표 원리를 이해하고 CSS 변수를 사용하여 애니메이션이 가능한 접힘 효과를 만드는 과정을 다룹니다.
2026년 어머니의 날을 위한 스콜리텔링 (Scrollytelling) 선물
어머니를 기리기 위해 스콜리텔링(Scrollytelling) 기술을 활용한 인터랙티브 웹 프로젝트를 소개합니다. CSS의 스크롤 스냅 이벤트와 스크롤 상태 쿼리를 사용하여 사용자 경험을 설계한 기술적 실험입니다.
곧 우리는 JavaScript를 ShadowRealm으로 마침내 추방할 수 있게 될 것입니다
JavaScript의 새로운 표준 제안인 ShadowRealm에 대해 설명합니다. ShadowRealm은 각기 다른 전역 환경을 가진 독립적인 실행 컨텍스트를 제공하여, 기존 JavaScript의 고질적인 문제인 전역 스코프 오염을 방지하고 격리된 실행 환경을 구축할 수 있게 합니다.
문서 간 뷰 전환 (Cross-Document View Transitions): 아무도 언급하지 않는 주의사항
멀티 페이지 애플리케이션(MPA)에서 네이티브 앱 같은 전환 효과를 제공하는 '문서 간 뷰 전환(Cross-Document View Transitions)' 구현 시 겪을 수 있는 흔한 오류와 주의사항을 다룹니다. 폐기된 메타 태그 방식과 단일 문서용 JavaScript API를 혼동하여 발생하는 문제점을 지적하며, 올바른 구현을 위한 개념적 차이를 설명합니다.
Google의 Prompt API
Google이 Chrome 브라우저를 통해 사용자 동의 없이 Gemini Nano 모델을 강제로 설치하는 방식을 취하고 있어 논란이 되고 있습니다. 또한, Prompt API 사용 시 Google의 생성형 AI 금지 정책을 승인하도록 강제함으로써 웹 표준의 독립성을 저해하고 사용자 에이전트별로 차별적인 규칙을 적용하는 우려스러운 전례를 남기고 있습니다.
CSS에서 네이티브 무작위성 (Native Randomness)의 중요성
CSS는 선언적이고 결정론적인 언어적 특성 때문에 무작위성을 구현하는 데 어려움이 있었습니다. 본 글은 CSS에서 자연스러운 변화를 만들기 위해 개발자들이 패턴 시뮬레이션이나 전처리기 등을 사용하여 무작위성을 구현하려 했던 과정과 그 한계를 다룹니다.
고정 높이 카드: 보기보다 더 취약합니다
디자인 목업에서 완벽해 보이는 고정 높이 카드 레이아웃이 실제 콘텐츠 변화(번역, 글꼴 크기 변경 등)에 따라 어떻게 깨지는지 분석합니다. 고정 높이 설정이 콘텐츠의 유연성을 방해하여 텍스트가 넘치거나 레이아웃이 무너지는 취약성을 설명합니다.
Grid와 Transform 트릭을 이용한 지그재그 CSS 레이아웃 만들기
CSS Grid와 transform 속성을 활용하여 아이템이 대각선으로 배치되는 지그재그 레이아웃을 구현하는 방법을 설명합니다. Flexbox를 이용한 방식의 한계인 고정 높이 설정 문제와 탭 순서(tab order) 문제를 해결하기 위해, 2열 그리드를 생성한 뒤 짝수 번째 아이템을 translateY로 이동시키는 전략을 제안합니다.
What’s !important #10: HTML-in-Canvas, 육각형 지도, E-ink 최적화 및 기타 소식
HTML-in-Canvas API를 통한 시맨틱 HTML 렌더링 실험, 육각형 세계 지도 구현을 위한 SVG/CSS 분석, E-ink 기기 최적화 OS인 Rekindle 등 최신 웹 기술 트렌드를 소개합니다. 또한 CSS의 `content` 속성을 활용해 `<img>` 태그의 소스를 변경하는 유용한 팁을 공유합니다.
CSS를 사용하여 할인된 가격을 계산하고 표시하기
CSS의 최신 수학 기능과 개선된 `attr()` 함수를 사용하여 JavaScript 없이 할인된 가격을 계산하고 표시하는 방법을 소개합니다. HTML의 `data-*` 속성에 저장된 값을 숫자로 파싱하여 브라우저 자체적으로 계산을 수행함으로써 지연 시간과 리소스 소모를 줄일 수 있습니다.
이 피드 구독하기
본 페이지의 콘텐츠는 AI가 공개된 소스를 기반으로 자동 수집·요약·번역한 것입니다. 원 저작권은 각 원저작자에게 있으며, 각 게시물의 “원문 바로가기” 링크를 통해 원문을 확인할 수 있습니다. 저작권자의 삭제 요청이 있을 경우 신속히 조치합니다.