사이트의 CSS 및 사용자 인터페이스 디자인을 개선할 수 있는 Chrome의 도구와 기법을 살펴보세요.

UI 개발 기술 향상

scrollbar-width 및 scrollbar-color 속성을 사용하여 스크롤바의 스타일을 지정합니다.
문서 읽기
균형 잡힌 텍스트 블록에 줄바꿈을 직접 작성하는 고전적인 서체 기술이 CSS에 도입됩니다.
문서 읽기
CSS 색상 4는 더 많은 색상, 조작 기능, 개선된 그라데이션 등 폭넓은 색상 영역 도구와 기능을 웹에 제공합니다.
문서 읽기
CSS 유형 객체 모델 (Typed OM)을 이용하면 CSS 값을 다룰 때 유형, 메서드, 유연한 객체 모델을 이용할 수 있습니다.
문서 읽기
@container 규칙을 사용하여 상위 요소의 스타일 값을 쿼리합니다.
문서 읽기
즐겨 사용하는 CSS 전처리기 기능 중 하나인 중첩 스타일 규칙이 이제 이 언어에 내장되어 있습니다.
문서 읽기
DOM의 하위 트리 내에서만 요소를 선택하는 범위 지정 스타일을 만드는 방법을 알아보세요.
문서 읽기
지원되는 색상 공간에서 CSS에서 바로 색상을 혼합할 수 있습니다.
문서 읽기
하위 요소 집합을 미리 필터링한 후 A+B 로직을 적용합니다.
문서 읽기
name가 동일한 여러 <details> 요소로 전용 아코디언을 만듭니다.
문서 읽기
inert 속성은 포커스 이벤트 및 보조 기술의 이벤트를 비롯하여 요소의 사용자 입력 이벤트를 삭제하고 복원하는 방법을 단순화하는 전역 HTML 속성입니다.
문서 읽기
빠른 속도보다 아름다움을 위해 최적화된 텍스트 줄바꿈을 선택합니다.
문서 읽기
DevTools에서 CSS 그리드 도구 지원을 설계하고 구현한 방법
문서 읽기
DevTools에서 CSS-in-JS를 지원하는 방법과 일반 CSS와의 차이점
문서 읽기

Shadow DOM

HTML에서 직접 Shadow DOM을 구현하고 사용하는 새로운 방법입니다.
문서 읽기
작성자가 정의한 이름과 Shadow DOM의 현재 상호 운용성 상태입니다.
문서 읽기

레이아웃

혼합된 크기 단위를 사용하여 CSS에 크기를 지정합니다.
문서 읽기
메시지를 기록하고 JavaScript를 실행합니다.
문서 읽기
숨김=until-found, 속성 값을 사용하면 아코디언 섹션 내의 콘텐츠를 찾아 연결할 수 있습니다.
문서 읽기

CSS 및 UI 우수사례

웹 UI 기능이란 정확히 무엇이며 이를 통해 전환 유입경로를 어떻게 개선할 수 있을까요? 이러한 기능을 도입하면 어떤 이점이 있나요?
우수사례 보기
Policybazaar, redBus, Tokopedia를 통해 스크롤 기반 애니메이션의 이점을 살펴보세요.
우수사례 보기
redBus, Policybazaar, Tokopedia는 모두 View Transitions API를 사용하고 더 나은 성능과 원활한 UI라는 이점을 누리고 있습니다.
우수사례 보기
Tokopedia는 Popover API를 사용하여 애플리케이션의 코드 양을 줄입니다.
우수사례 보기

웹상의 애니메이션

Web Animations API는 JavaScript의 명령형 애니메이션을 설명하는 강력한 프리미티브를 제공합니다.
문서 읽기
애니메이션 컴포지션 속성을 사용하면 여러 애니메이션이 동일한 속성에 동시에 영향을 미치는 경우 발생해야 하는 작업을 제어할 수 있습니다.
문서 읽기
linear()는 점 사이를 선형으로 보간하는 CSS 이징 함수로, 바운스 및 스프링 효과를 다시 만들 수 있습니다.
문서 읽기
스크롤 타임라인 및 뷰 타임라인을 사용하여 선언적 방식으로 스크롤 기반 애니메이션을 만듭니다.
문서 읽기
과정
반응형 디자인의 역사와 반응형 레이아웃의 기본사항을 읽어보세요. 반응형 이미지, 서체, 접근성 등에 대해 학습할 수 있습니다.
학습 시작
과정
상자 모델, 캐스케이드 및 특수성, Flexbox, 그리드, Z-색인과 같은 CSS 기본 사항을 학습합니다. 또한 프런트엔드 개발자 기술을 다듬기 위해 함수, 논리 속성 등에 관해 알아봅니다.
학습 시작