CSS 및 UI
사이트의 CSS 및 사용자 인터페이스 디자인을 개선할 수 있는 Chrome의 도구와 기법을 살펴보세요.
UI 개발 기술 향상
앵커 위치 지정
앵커 배치 API를 사용하여 요소를 서로 상대적으로 배치합니다.
height: auto; 및 기타 고유한 크기 지정 키워드에 애니메이션 적용
interpolate-size 및 calc-size()를 사용하여 기본 크기 조정 키워드와 애니메이션 처리
스크롤바 스타일 지정
scrollbar-width 및 scrollbar-color 속성을 사용하여 스크롤바의 스타일을 지정합니다.
CSS 텍스트 줄바꿈 균형
균형 잡힌 텍스트 블록에 줄바꿈을 직접 작성하는 고전적인 서체 기술이 CSS에 도입됩니다.
고화질 CSS 색상 가이드
CSS 색상 4는 더 많은 색상, 조작 기능, 개선된 그라데이션 등 폭넓은 색상 영역 도구와 기능을 웹에 제공합니다.
CSS 유형 객체 모델
CSS 유형 객체 모델 (Typed OM)을 이용하면 CSS 값을 다룰 때 유형, 메서드, 유연한 객체 모델을 이용할 수 있습니다.
스타일 쿼리 시작하기
@container 규칙을 사용하여 상위 요소의 스타일 값을 쿼리합니다.
CSS 중첩
즐겨 사용하는 CSS 전처리기 기능 중 하나인 중첩 스타일 규칙이 이제 이 언어에 내장되어 있습니다.
CSS @범위
DOM의 하위 트리 내에서만 요소를 선택하는 범위 지정 스타일을 만드는 방법을 알아보세요.
CSS color-mix()
지원되는 색상 공간에서 CSS에서 바로 색상을 혼합할 수 있습니다.
nth-child() 선택에 대한 더 많은 제어
하위 요소 집합을 미리 필터링한 후 A+B 로직을 적용합니다.
과장된 아코디언
name가 동일한 여러 <details> 요소로 전용 아코디언을 만듭니다.
inert 소개
inert 속성은 포커스 이벤트 및 보조 기술의 이벤트를 비롯하여 요소의 사용자 입력 이벤트를 삭제하고 복원하는 방법을 단순화하는 전역 HTML 속성입니다.
CSS 텍스트 줄바꿈
빠른 속도보다 아름다움을 위해 최적화된 텍스트 줄바꿈을 선택합니다.
DevTools의 CSS 그리드
DevTools에서 CSS 그리드 도구 지원을 설계하고 구현한 방법
DevTools에서 CSS-in-JS 지원
DevTools에서 CSS-in-JS를 지원하는 방법과 일반 CSS와의 차이점
Shadow DOM
선언적 Shadow DOM
HTML에서 직접 Shadow DOM을 구현하고 사용하는 새로운 방법입니다.
작성자 정의 CSS 이름 및 Shadow DOM
작성자가 정의한 이름과 Shadow DOM의 현재 상호 운용성 상태입니다.
레이아웃
calc() 사용 방법
혼합된 크기 단위를 사용하여 CSS에 크기를 지정합니다.
CSS 위치 고정 이벤트
메시지를 기록하고 JavaScript를 실행합니다.
접힌 콘텐츠의 접근성 높이기
숨김=until-found, 속성 값을 사용하면 아코디언 섹션 내의 콘텐츠를 찾아 연결할 수 있습니다.
CSS 및 UI 우수사례
웹 UI 기능이 웹사이트에 중요한 이유는 무엇인가요?
웹 UI 기능이란 정확히 무엇이며 이를 통해 전환 유입경로를 어떻게 개선할 수 있을까요? 이러한 기능을 도입하면 어떤 이점이 있나요?
스크롤 기반 애니메이션 우수사례
Policybazaar, redBus, Tokopedia를 통해 스크롤 기반 애니메이션의 이점을 살펴보세요.
전환 우수사례 보기
redBus, Policybazaar, Tokopedia는 모두 View Transitions API를 사용하고 더 나은 성능과 원활한 UI라는 이점을 누리고 있습니다.
Popover API 우수사례
Tokopedia는 Popover API를 사용하여 애플리케이션의 코드 양을 줄입니다.
웹상의 애니메이션
Web Animations API
Web Animations API는 JavaScript의 명령형 애니메이션을 설명하는 강력한 프리미티브를 제공합니다.
다양한 애니메이션 효과
애니메이션 컴포지션 속성을 사용하면 여러 애니메이션이 동일한 속성에 동시에 영향을 미치는 경우 발생해야 하는 작업을 제어할 수 있습니다.
linear()를 사용한 복잡한 애니메이션 커브
linear()는 점 사이를 선형으로 보간하는 CSS 이징 함수로, 바운스 및 스프링 효과를 다시 만들 수 있습니다.
스크롤 기반 애니메이션
스크롤 타임라인 및 뷰 타임라인을 사용하여 선언적 방식으로 스크롤 기반 애니메이션을 만듭니다.
과정
반응형 디자인 알아보기
반응형 디자인의 역사와 반응형 레이아웃의 기본사항을 읽어보세요. 반응형 이미지, 서체, 접근성 등에 대해 학습할 수 있습니다.
과정
CSS 알아보기
상자 모델, 캐스케이드 및 특수성, Flexbox, 그리드, Z-색인과 같은 CSS 기본 사항을 학습합니다. 또한 프런트엔드 개발자 기술을 다듬기 위해 함수, 논리 속성 등에 관해 알아봅니다.