프론트엔드 소식
해외 이슈·커뮤니티 논의를 번역·요약해 전하는 소식 (관리자 작성)
CSS·스타일링데모26.06.25JS 없이 움직임을 CSS로 - Motion Path와 Scroll Snap
한 줄 요약 - 곡선을 따라 요소를 움직이는 offset-path와, 손을 떼면 카드가 자석처럼 멈추는 scroll-snap. 예전엔 JS나 라이브러리가 필요했던 모션을 CSS 몇 줄이 가져갔습니다. Motion Path (offset-p
조회 62
CSS·스타일링데모26.06.25CSS 비주얼 무기 - mask로 오려내기와 @property로 못 움직이던 것 움직이기
한 줄 요약 - 그라데이션/모양으로 요소를 오려내는 mask-image와, 원래 애니메이션이 안 되던 값을 움직이게 하는 @property. 둘 다 주요 브라우저에 안착해 바로 쓸 수 있습니다. mask-image 이미지 아래
조회 62
CSS·스타일링데모26.06.25반응형/테마를 데이터로 - clamp() 유체 타이포와 컨테이너 스타일 쿼리
한 줄 요약 - 브레이크포인트 없이 글자를 매끈하게 키우는 clamp()와, 클래스 대신 '값'으로 테마를 바꾸는 컨테이너 스타일 쿼리. 미디어쿼리/클래스 더미를 줄이는 두 가지입니다. clamp() 유체 타이포 제목 하나를
조회 66
CSS·스타일링데모26.06.24CSS에 드디어 '부모 선택자' :has() - JS 없이 조건부 스타일
한 줄 요약 - CSS :has()는 부모가 안에 든 자식의 상태를 보고 스스로 스타일을 바꾸는 선택자입니다. 예전엔 JS로만 하던 '입력이 맞으면 칸 전체를 초록으로' 같은 일을 CSS 한 줄로 처리합니다. 무슨 일이에요?
조회 76
CSS·스타일링데모26.06.24반응형/정렬의 새 무기 - 컨테이너 쿼리와 subgrid
한 줄 요약 - 컴포넌트가 화면이 아니라 '자기가 담긴 칸' 너비로 반응하는 컨테이너 쿼리(@container)와, 카드들의 줄을 자동으로 맞춰주는 subgrid. 둘 다 주요 브라우저에 안착해 실무에 바로 쓸 수 있습니다. 컨테이너 쿼리
조회 70
CSS·스타일링데모26.06.24이제 등장/퇴장 애니메이션도 순수 CSS - @starting-style
한 줄 요약 - @starting-style과 transition-behavior: allow-discrete를 함께 쓰면, 토스트나 모달이 나타나고 사라지는 모션을 애니메이션 라이브러리 없이 순수 CSS로 만들 수 있습니다. 무슨 일이에
조회 53
CSS·스타일링데모26.06.24요즘 CSS 디테일 - 색 섞기 color-mix와 줄바꿈 다듬기 text-wrap
한 줄 요약 - 기본 색 하나에서 팔레트 전체를 뽑는 color-mix()/light-dark(), 그리고 제목 줄을 고르게 맞추고 본문 고아 단어를 줄이는 text-wrap. 작지만 매일 쓰는 디테일을 CSS가 직접 처리합니다. colo
조회 61
CSS·스타일링26.06.24Chrome 150 베타 - CSS에 상대 투명색 alpha()와 미디어 재생 상태 가상클래스
한 줄 요약 - Chrome 150 베타에 들어온 CSS 기능 중 실무에 바로 와닿는 두 가지를 소개합니다. 색의 투명도만 따로 떼어 바꾸는 alpha(), 그리고 동영상이 재생 중인지 멈췄는지에 따라 CSS만으로 스타일을 바꾸는 가상클래스예요.</p
조회 33
CSS·스타일링데모26.06.18최근 CSS 신기능 묶음 - Chrome 149 / Firefox 152가 더한 실용 4가지
한 줄 요약 - 최근 3주 사이 브라우저들이 정식으로 더한 실용 CSS 기능을 모았습니다. 칸 사이에 구분선 긋기, 입력 내용에 맞춰 스스로 커지는 폼, 도형 둘레로 흐르는 텍스트, 잘린 글자를 펼쳐 보여주기. 공통점은 예전엔 자바스크립트나 꼼수로 메
조회 48
CSS·스타일링데모26.06.17CSS만으로 툴팁/팝오버 위치 잡기 - 'Anchor Positioning'이 Baseline 2026 진입
한 줄 요약 - 툴팁이나 팝오버를 특정 요소에 딱 붙여 띄우는 일을, 이제 자바스크립트 위치 계산 라이브러리 없이 CSS만으로 할 수 있습니다. 무슨 일이에요? 한 요소를 기준점(anchor)으로 지정하고, 다른 요소가 그 기
조회 55
CSS·스타일링26.06.17Tailwind CSS v4 - Rust 엔진 'Oxide'로 빌드가 최대 100배 빨라졌다
한 줄 요약 - Tailwind CSS가 v4에서 핵심 엔진을 Rust로 새로 짠 'Oxide'로 바꿔 빌드가 크게 빨라졌고, 설정도 JS 파일이 아니라 CSS에서 바로 합니다. 무슨 일이에요? v3까지는 tailwind.
조회 35
CSS·스타일링데모26.06.17"이젠 CSS로 충분" - 팝오버·스크롤 애니메이션·masonry가 네이티브로 (Baseline 2026)
한 줄 요약 - 예전엔 JS 라이브러리가 필요했던 기능들(팝오버, 스크롤에 맞춘 애니메이션, masonry 레이아웃)을 이제 브라우저가 기본으로 처리합니다. 무슨 일이에요? 'Baseline'은 주요 브라우저에 충분히 퍼진
조회 39