이 페이지는 Cloud Translation API를 통해 번역되었습니다.

CSS 기능 참조

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

CSS 보기 및 변경과 관련된 Chrome DevTools 기능의 종합 레퍼런스에서 새로운 워크플로를 살펴보세요.

기본 사항은 CSS 보기 및 변경을 참조하세요.

요소 선택

DevTools의 요소 패널을 사용하면 한 번에 한 요소의 CSS를 보거나 변경할 수 있습니다.

선택된 요소의 예

스크린샷에서는 DOM Tree에서 파란색으로 강조표시된 h1 요소가 선택된 요소입니다. 오른쪽에서 요소의 스타일이 스타일 탭에 표시됩니다. 왼쪽에는 표시 영역에서 요소가 강조 표시되지만 DOM 트리에서 마우스가 그 위에 있을 때만 강조됩니다.

튜토리얼은 요소의 CSS 보기를 참고하세요.

요소를 선택하는 방법에는 여러 가지가 있습니다.

표시 영역에서 요소를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다.
DevTools에서 요소 선택 을 클릭하거나 Command+Shift+C (Mac) 또는 Control+Shift+C (Windows, Linux)를 누른 다음 표시 영역에서 요소를 클릭합니다.
DevTools에서 DOM Tree의 요소를 클릭합니다.
DevTools에서 콘솔의 document.querySelector('p')와 같은 쿼리를 실행하고 결과를 마우스 오른쪽 버튼으로 클릭한 다음 Reveal in Elements Panel을 선택합니다.

CSS 보기

요소 > 스타일 및 계산됨 탭을 사용하여 CSS 규칙을 확인하고 CSS 문제를 진단합니다.

링크로 탐색하기

스타일 탭은 다양한 장소에서 다음을 포함하되 이에 국한되지 않는 다양한 다른 장소로 연결되는 링크를 표시합니다.

CSS 규칙 옆, 스타일 시트 및 CSS 소스 이러한 링크는 소스 패널을 엽니다. 스타일 시트가 축소된 경우 축소된 파일을 읽을 수 있도록 설정을 참조하세요.
...에서 상속됨 섹션에서 상위 요소로
var() 호출에서 맞춤 속성 선언에 대한 호출
animation 약식 속성에서 @keyframes로 설정합니다.
문서 툴팁의 자세히 알아보기 링크
다양한 기능을 활용해 보세요.

다음은 그 중 일부입니다.

다양한 링크가 강조표시되어 있음

링크의 스타일이 다를 수 있습니다. 링크인지 확실하지 않다면 클릭하여 찾아보세요.

CSS 문서, 특정성, 맞춤 속성 값이 포함된 도움말 보기

요소 > 스타일에서 특정 요소 위로 마우스를 가져가면 유용한 정보가 포함된 도움말이 표시됩니다.

CSS 문서 보기

간단한 CSS 설명이 포함된 도움말을 보려면 스타일 탭에서 속성 이름 위로 마우스를 가져가세요.

CSS 속성에 대한 문서가 포함된 도움말

자세히 알아보기를 클릭하여 이 속성의 MDN CSS 참조로 이동합니다.

도움말을 사용 중지하려면 표시 안함을 선택합니다.

다시 사용 설정하려면 설정 > 환경설정 > 요소 > CSS 문서 도움말 표시를 확인하세요.

선택기 특정도 보기

선택기 위로 마우스를 가져가면 특정성 가중치가 포함된 도움말이 표시됩니다.

일치하는 선택자의 특정성 가중치가 나와 있는 도움말

맞춤 속성 값 보기

--custom-property 위로 마우스를 가져가면 도움말에 값이 표시됩니다.

도움말에 있는 맞춤 속성 값입니다.

잘못된 CSS, 재정의된 CSS, 비활성 CSS 및 기타 CSS 보기

스타일 탭에서는 여러 종류의 CSS 문제를 인식하고 다양한 방식으로 강조 표시합니다.

스타일 탭의 CSS 이해를 참고하세요.

요소에 실제로 적용된 CSS만 보기

스타일 탭에는 재정의된 선언을 포함하여 요소에 적용되는 모든 규칙이 표시됩니다. 재정의된 선언이 필요하지 않으면 계산됨 탭을 사용하여 실제로 요소에 적용된 CSS만 볼 수 있습니다.

요소를 선택합니다.
요소 패널에서 계산된 탭으로 이동합니다.

계산된 탭

모든 속성을 보려면 모두 표시 체크박스를 선택합니다.

계산됨 탭의 CSS 이해를 참고하세요.

알파벳순으로 CSS 속성 보기

계산됨 탭을 사용합니다. 요소에 실제로 적용된 CSS만 보기를 참고하세요.

상속된 CSS 속성 보기

계산됨 탭에서 모두 표시 체크박스를 선택합니다. 요소에 실제로 적용된 CSS만 보기를 참고하세요.

또는 스타일 탭을 스크롤하여 Inherited from <element_name> 섹션을 찾습니다.

스타일 탭의 상속 대상... 섹션을 확인합니다.

CSS 규칙 보기

at 규칙은 CSS 동작을 제어할 수 있는 CSS 문입니다. 요소 > 스타일에는 전용 섹션에 다음과 같은 at 규칙이 표시됩니다.

@property
@supports
@scope
@font-palette-values

규칙 `@property`개 보기

@property CSS at-rule을 사용하면 JavaScript를 실행하지 않고도 CSS 맞춤 속성을 명시적으로 정의하고 스타일 시트에 등록할 수 있습니다.

스타일 탭에서 이러한 속성의 이름 위로 마우스를 가져가면 스타일 탭 하단의 접을 수 있는 @property 섹션에 속성의 값, 설명어 및 등록 링크가 포함된 도움말이 표시됩니다.

@property 규칙을 수정하려면 이름 또는 값을 더블클릭합니다.

규칙 `@supports`개 보기

@supports CSS at-rule이 요소에 적용된 경우 Styles 탭에 표시됩니다. 예를 들어 다음 요소를 검사합니다.

@supports at-rules를 살펴보세요.

브라우저에서 lab() 함수를 지원하면 요소는 녹색이고 그렇지 않은 경우 보라색입니다.

규칙 `@scope`개 보기

CSS @scope at-rules가 요소에 적용된 경우 스타일 탭에 표시됩니다.

새로운 @scope at 규칙은 CSS 계단식 및 상속 수준 6 사양의 일부입니다. 이러한 규칙을 사용하면 CSS 스타일의 범위를 지정할 수 있습니다. 즉, 특정 요소에 스타일을 명시적으로 적용할 수 있습니다.

참고: @scope at-rule 기능은 실험용입니다. 테스트하려면 chrome://flags/#enable-experimental-web-platform-features에서 실험용 웹 플랫폼 기능 플래그를 사용 설정합니다. 그렇지 않으면 다음 미리보기가 작동하지 않습니다.

다음 미리보기에서 @scope 규칙을 확인합니다.

미리보기에서 카드의 텍스트를 검사합니다.
스타일 탭에서 @scope 규칙을 찾습니다.

@scope 규칙

이 예에서 @scope 규칙은 card 클래스가 있는 요소 내부의 모든 <p> 요소에 대해 전역 CSS background-color 선언을 재정의합니다.

@scope 규칙을 수정하려면 규칙을 더블클릭합니다.

규칙 `@font-palette-values`개 보기

@font-palette-values CSS at-rule을 사용하면 font-palette 속성의 기본값을 맞춤설정할 수 있습니다. 요소 > 스타일은 전용 섹션에 이 at 규칙을 보여줍니다.

다음 미리보기에서 @font-palette-values 섹션을 확인하세요.

미리보기에서 텍스트의 두 번째 줄을 검사합니다.
스타일에서 @font-palette-values 섹션을 찾습니다.

@font-palette-values 규칙

이 예에서 --New 글꼴 팔레트 값은 색상 글꼴의 기본 값을 재정의합니다.

맞춤 값을 수정하려면 해당 값을 더블클릭합니다.

요소의 상자 모델 보기

요소의 박스 모델을 보려면 스타일 탭으로 이동한 다음 작업 모음에서 사이드바 표시 버튼을 클릭합니다.

Box 모델 다이어그램입니다.

값을 변경하려면 더블클릭하세요.

요소의 CSS 검색 및 필터링

스타일 및 계산됨 탭의 필터 상자를 사용하여 특정 CSS 속성 또는 값을 검색합니다.

스타일 탭 필터링

계산됨 탭에서 상속된 속성도 검색하려면 모두 표시 체크박스를 선택합니다.

계산된 탭에서 상속된 속성 필터링

계산됨 탭으로 이동하려면 그룹을 선택하여 필터링된 속성을 접을 수 있는 카테고리로 그룹화합니다.

필터링된 속성을 그룹화합니다.

포커스된 페이지 에뮬레이션

페이지에서 DevTools로 포커스를 전환하면 일부 오버레이 요소는 포커스에 의해 트리거되는 경우 자동으로 숨겨집니다. 예를 들어 드롭다운 목록, 메뉴, 날짜 선택 도구가 있습니다. check_box 포커스가 설정된 페이지 에뮬레이션 옵션을 사용하면 이러한 요소를 마치 포커스가 있는 것처럼 디버그할 수 있습니다.

이 데모 페이지에서 포커스가 맞춰진 페이지를 에뮬레이션해 보세요.

입력 요소에 포커스를 맞춥니다. 그 아래에 다른 요소가 표시됩니다.
DevTools를 엽니다. 이제 페이지 대신 DevTools 창에 포커스가 있으므로 요소가 다시 사라집니다.
요소 > 스타일에서 :hov를 클릭하고 check_box 포커스가 설정된 페이지 에뮬레이션을 선택한 다음 입력된 요소가 선택되었는지 확인합니다. 이제 그 아래에 있는 요소를 검사할 수 있습니다.

'포커스가 설정된 페이지 에뮬레이션' 옵션을 사용 설정하기 전과 후

렌더링 패널에도 동일한 옵션이 표시됩니다.

의사 클래스 전환

유사 클래스(예: :active, :focus, :focus-within, :target, :hover, :visited, focus-visible)를 전환하려면 다음 단계를 따르세요.

요소를 선택합니다.
요소 패널에서 스타일 탭으로 이동합니다.
:hov를 클릭합니다.
사용 설정할 의사 클래스를 선택합니다.

요소에서 마우스 오버 의사 상태를 전환합니다.

표시 영역에서 실제로 요소 위로 마우스를 가져가지 않았더라도 DevTools가 요소에 background-color 선언을 적용하는 것을 확인할 수 있습니다.

대화형 튜토리얼은 클래스에 유사 상태 추가를 참조하세요.

상속된 강조 표시 유사 요소 보기

Pseudo-elements를 사용하면 요소의 특정 부분에 스타일을 지정할 수 있습니다. 하이라이트 유사 요소는 '선택됨' 상태의 문서 부분이며 사용자에게 이 상태를 나타내기 위해 '강조표시됨'으로 스타일이 지정됩니다. 예를 들어 이러한 유사 요소는 ::selection, ::spelling-error, ::grammar-error, ::highlight입니다.

사양에서 언급한 대로 여러 스타일이 충돌하면 cascade가 가장 적합한 스타일을 결정합니다.

참고: 이 기능을 사용 설정하려면 --enable-blink-features=HighlightInheritance 플래그로 Chrome을 실행하세요.

규칙의 상속과 우선순위를 더 잘 이해하려면 상속된 강조 표시 유사 요소를 참고하세요.

아래 텍스트를 검사합니다.

부모의 하이라이트 유사 요소의 스타일을 상속했습니다. 나를 선택하세요.
위 텍스트의 일부를 선택하세요.
스타일 탭에서 아래로 스크롤하여 Inherited from ::selection pseudo of... 섹션을 찾습니다.

스타일 탭의 상속됨 섹션을 확인합니다.

캐스케이드 레이어 보기

계단식 레이어를 사용하면 CSS 파일을 더 명확하게 제어하여 스타일 특이성 충돌을 방지할 수 있습니다. 이는 대규모 코드베이스, 디자인 시스템, 애플리케이션에서 서드 파티 스타일을 관리할 때 유용합니다.

계단식 레이어를 보려면 다음 요소를 inspect하고 요소 > 스타일을 엽니다.

스타일 탭에서 3개의 계단식 레이어와 해당 스타일(page, component, base)을 확인합니다.

레이어 캐스케이드

레이어 순서를 보려면 레이어 이름 또는 CSS 레이어 보기 전환 버튼을 클릭합니다.

page 레이어의 특정성이 가장 높으므로 요소의 배경이 녹색입니다.

인쇄 모드로 페이지 보기

인쇄 모드로 페이지를 보려면 다음 단계를 따르세요.

명령어 메뉴를 엽니다.
Rendering을 입력하고 Show Rendering를 선택합니다.
CSS 미디어 에뮬레이션 드롭다운에서 인쇄를 선택합니다.

적용 범위 탭에서 사용된 CSS 및 사용되지 않은 CSS 보기

적용 범위 탭에는 페이지에서 실제로 사용하는 CSS가 표시됩니다.

DevTools에 포커스가 있을 때 Command+Shift+P (Mac) 또는 Control+Shift+P (Windows, Linux, ChromeOS)를 눌러 명령어 메뉴를 엽니다.
coverage를 입력합니다.
범위 표시를 선택합니다. 범위 탭이 표시됩니다.
Reload를 클릭합니다. 페이지가 새로고침되고 범위 탭에 브라우저가 로드하는 각 파일에서 CSS (및 JavaScript)가 얼마나 사용되는지에 관한 개요가 표시됩니다.

녹색은 사용된 CSS를 나타냅니다. 빨간색은 사용되지 않는 CSS를 나타냅니다.
CSS 파일을 클릭하면 위 미리보기에서 어떤 CSS가 사용되는지 한 줄씩 확인할 수 있습니다.

스크린샷에서 devsite-google-blue.css의 55~57행과 65~67행은 사용되지 않는 반면 59~63행은 사용됩니다.

인쇄 미리보기 모드 강제 사용

DevTools를 인쇄 미리보기 모드로 강제 설정을 참고하세요.

CSS 복사

스타일 탭의 단일 드롭다운 메뉴에서 CSS 규칙, 선언, 속성, 값을 각각 복사할 수 있습니다.

또한 JavaScript 구문으로 CSS 속성을 복사할 수 있습니다. 이 옵션은 CSS-in-JS 라이브러리를 사용하는 경우에 편리합니다.

CSS를 복사하려면 다음 단계를 따르세요.

요소를 선택합니다.
요소 > 스타일 탭에서 CSS 속성을 마우스 오른쪽 버튼으로 클릭합니다.
드롭다운 메뉴에서 다음 옵션 중 하나를 선택합니다.
- 선언 복사. CSS 구문에서 속성과 해당 값을 복사합니다. css property: value;
- 속성 복사. property 이름만 복사합니다.
- 값 복사. value만 복사합니다.
- 규칙 복사. 전체 CSS 규칙을 복사합니다. css selector[, selector] { property: value; property: value; ... }
- 선언을 JS로 복사. 다음과 같이 JavaScript 구문에서 속성과 해당 값을 복사합니다. js propertyInCamelCase: 'value'
- 모든 선언을 복사합니다. CSS 규칙의 모든 속성과 값을 복사합니다. css property: value; property: value; ...
- 모든 선언을 JS로 복사합니다. 자바스크립트 구문에서 모든 속성과 해당 값을 복사합니다. ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...
- 모든 CSS 변경사항을 복사합니다. 스타일 탭에서 변경한 변경사항을 모든 선언에 복사합니다.
- 계산된 값 보기. 계산됨 탭으로 이동합니다.

CSS 변경

이 섹션에는 요소 > 스타일에서 CSS를 변경할 수 있는 모든 방법이 나와 있습니다.

또한 다음을 수행할 수 있습니다.

요소에 CSS 선언 추가

선언 순서는 요소의 스타일이 지정되는 방식에 영향을 주므로 다양한 방법으로 선언을 추가할 수 있습니다.

인라인 선언을 추가합니다. 요소의 HTML에 style 속성을 추가하는 것과 같습니다.
스타일 규칙에 선언을 추가합니다.

어떤 워크플로를 사용해야 하나요? 대부분의 시나리오에서는 인라인 선언 워크플로를 사용하는 것이 좋습니다. 인라인 선언은 외부 선언보다 특정성이 높으므로 인라인 워크플로를 사용하면 변경사항이 예상대로 요소에 적용됩니다. 구체적인성에 관한 자세한 내용은 선택기 유형을 참고하세요.

요소의 스타일을 디버깅하는 중이며 선언이 다른 위치에 정의될 때 어떤 일이 발생하는지 구체적으로 테스트해야 한다면 다른 워크플로를 사용하세요.

인라인 선언 추가

인라인 선언을 추가하려면 다음 단계를 따르세요.

요소를 선택합니다.
스타일 탭에서 element.style 섹션의 괄호 사이를 클릭합니다. 커서가 포커스를 받아 텍스트를 입력할 수 있게 해줍니다.
속성 이름을 입력하고 Enter를 누릅니다.
이 속성에 유효한 값을 입력하고 Enter 키를 누릅니다. DOM 트리에서 요소에 style 속성이 추가된 것을 확인할 수 있습니다.

스크린샷에서는 margin-top 및 background-color 속성이 선택한 요소에 적용되었습니다. DOM 트리에서 요소의 style 속성에 반영된 선언을 확인할 수 있습니다.

스타일 규칙에 선언 추가

기존 스타일 규칙에 선언을 추가하려면 다음 단계를 따르세요.

요소를 선택합니다.
스타일 탭에서 선언을 추가할 스타일 규칙의 괄호 사이를 클릭합니다. 커서가 포커스가 있어 텍스트를 입력할 수 있습니다.
속성 이름을 입력하고 Enter를 누릅니다.
이 속성에 유효한 값을 입력하고 Enter 키를 누릅니다.

선언 값 변경

스크린샷에서 스타일 규칙은 새로운 border-bottom-style:groove 선언을 가져옵니다.

선언 이름 또는 값 변경

선언의 이름 또는 값을 더블클릭하여 변경합니다. 값을 0.1, 1, 10 또는 100단위씩 빠르게 늘리거나 줄이는 방법은 단축키로 enumerable 값 변경을 참고하세요.

단축키로 열거 가능한 값 변경

선언의 열거형 값(예: font-size)을 수정하는 동안 다음 단축키를 사용하여 값을 고정된 양만큼 늘릴 수 있습니다.

Option+Up (Mac) 또는 Alt+Up (Windows, Linux)을 눌러 0.1씩 증분합니다.
위: 값을 1씩 변경하거나 현재 값이 -1과 1 사이인 경우 0.1씩 변경합니다.
Shift+위쪽 키를 눌러 10씩 증가
Shift+Command+Up (Mac) 키 또는 Control+Shift+Page Up(Windows, Linux)을 눌러 값을 100씩 증가시킵니다.

값을 줄여도 됩니다. 앞에서 언급한 Up의 각 인스턴스를 Down으로 바꾸기만 하면 됩니다.

길이 값 변경

포인터를 사용하여 너비, 높이, 패딩, 여백, 테두리 등 길이가 있는 속성을 변경할 수 있습니다.

길이 단위를 변경하는 방법은 다음과 같습니다.

단위 이름 위로 마우스를 가져가면 밑줄이 표시됩니다.
단위 이름을 클릭하여 드롭다운에서 단위를 선택합니다.

길이 값을 변경하는 방법은 다음과 같습니다.

단위 값 위로 마우스를 가져가면 포인터가 가로 양방향 화살표로 변경됩니다.
가로로 드래그하여 값을 늘리거나 줄입니다.

이 값을 10만큼 조정하려면 Shift 키를 누른 상태에서 드래그합니다.

요소에 클래스 추가하기

요소에 클래스를 추가하는 방법:

DOM Tree에서 요소를 선택합니다.
.cls를 클릭합니다.
Add New Class(새 수업 추가) 상자에 수업 이름을 입력합니다.
Enter를 누릅니다.

요소 클래스 섹션

밝은 테마 및 어두운 테마 환경설정을 에뮬레이션하고 자동 어두운 모드를 사용 설정합니다.

자동 어두운 모드를 전환하거나 사용자의 밝은 테마 또는 어두운 테마 환경설정을 에뮬레이션하려면 다음 단계를 따르세요.

요소 > 스타일 탭에서 일반 렌더링 에뮬레이션 전환을 클릭합니다.
드롭다운 목록에서 다음 중 하나를 선택합니다.
- prefers-color-scheme: 밝게. 사용자가 밝은 테마를 선호함을 나타냅니다.
- prefers-color-scheme: dark입니다. 사용자가 어두운 테마를 선호함을 나타냅니다.
- 자동 어두운 모드: 페이지를 구현하지 않은 경우에도 어두운 모드로 페이지를 표시합니다. 또한 prefers-color-scheme를 dark로 자동으로 설정합니다.

이 드롭다운은 렌더링 탭의 CSS 미디어 기능 prefers-color-scheme 에뮬레이션 및 자동 어두운 모드 사용 설정 옵션의 바로가기입니다.

수업 전환

요소에서 클래스를 사용 설정 또는 사용 중지하는 방법은 다음과 같습니다.

DOM Tree에서 요소를 선택합니다.
요소 클래스 섹션을 엽니다. 요소에 클래스 추가하기를 참고하세요. Add New Class 상자 아래에는 이 요소에 적용된 모든 클래스가 표시됩니다.
사용 설정하거나 사용 중지하려는 수업 옆의 체크박스를 선택합니다.

스타일 규칙 추가

새 스타일 규칙을 추가하려면 다음 단계를 따르세요.

요소를 선택합니다.
새 스타일 규칙 을 클릭합니다. 그러면 DevTools가 element.style 규칙 아래에 새 규칙을 삽입합니다.

새 스타일 규칙을 추가합니다.

스크린샷에서 DevTools는 New Style Rule을 클릭한 후 h1.devsite-page-title 스타일 규칙을 추가합니다.

규칙을 추가할 스타일 시트 선택

새 스타일 규칙을 추가할 때 새 스타일 규칙 을 길게 클릭하여 스타일 규칙을 추가할 스타일 시트를 선택합니다.

스타일 시트 선택하기

선언 전환

단일 선언을 사용 설정 또는 사용 중지하려면 다음을 실행합니다.

요소를 선택합니다.
스타일 탭에서 선언을 정의하는 규칙 위로 마우스를 가져갑니다. 각 선언 옆에 체크박스가 표시됩니다.
선언 옆의 체크박스를 선택하거나 선택 해제합니다. 선언을 지우면 DevTools에서 해당 선언을 삭제하여 더 이상 활성 상태가 아님을 나타냅니다.

선언 전환

스크린샷에서는 현재 선택된 요소의 color 속성이 사용 중지되어 있습니다.

애니메이션 중에 `::view-transition` 유사 요소 수정

애니메이션에서 이에 상응하는 섹션을 참고하세요.

자세한 내용은 View Transitions API를 사용한 원활하고 간단한 전환을 참고하세요.

그리드 항목과 해당 콘텐츠를 그리드 편집기에 정렬

CSS 그리드 검사에서 해당하는 섹션을 참고하세요.

색상 선택 도구로 색상 변경

색상 선택 도구로 HD 및 HD가 아닌 색상 검사 및 디버그를 참고하세요.

각도 시계로 각도 값 변경

각도 시계는 CSS 속성 값에서 <angle>를 변경하는 GUI를 제공합니다.

각도 시계를 열려면 다음 단계를 따르세요.

각도 선언이 있는 요소를 선택합니다.
스타일 탭에서 변경하려는 transform 또는 background 선언을 찾습니다. 각도 값 옆에 있는 각도 미리보기 상자를 클릭합니다.

-5deg 및 0.25turn 왼쪽에 있는 작은 시계는 각도 미리보기입니다.
미리보기를 클릭하여 각도 시계를 엽니다.
각도 시계 원을 클릭하여 각도 값을 변경하거나 마우스를 스크롤하여 각도 값을 1씩 늘리거나 줄입니다.
각도 값을 변경할 수 있는 더 많은 단축키가 있습니다. 자세한 내용은 스타일 창 단축키를 참고하세요.

그림자 편집기로 상자 및 텍스트 그림자 변경

그림자 편집기는 text-shadow 및 box-shadow CSS 선언을 변경하는 GUI를 제공합니다.

그림자 편집기로 그림자를 변경하려면 다음 단계를 따르세요.

그림자 선언이 있는 요소를 선택합니다. 예를 들어 다음 요소를 선택합니다.
스타일 탭에서 text-shadow 또는 box-shadow 선언 옆에 있는 그림자 아이콘을 찾습니다.
그림자 아이콘을 클릭하여 섀도 편집기를 엽니다.
그림자 속성을 변경합니다.
- Type (box-shadow에만 해당). Outset 또는 Inset을 선택합니다.
- X 및 Y 오프셋. 파란색 점을 드래그하거나 값을 지정합니다.
- 흐리게 처리. 슬라이더를 드래그하거나 값을 지정합니다.
- 넓히기 (box-shadow에만 해당). 슬라이더를 드래그하거나 값을 지정합니다.
요소에 적용된 변경사항을 확인합니다.

이징 편집기로 애니메이션과 전환 타이밍 편집하기

이징 편집기에서는 transition-timing-function 및 animation-timing-function의 값을 변경하는 GUI를 제공합니다.

이징 편집기를 열려면 다음 단계를 따르세요.

이 페이지의 <body> 요소와 같은 타이밍 함수 선언이 있는 요소를 선택합니다.
스타일 탭에서 transition-timing-function, animation-timing-function 선언 또는 transition 약식 속성 옆에 있는 보라색 아이콘을 찾습니다.
아이콘을 클릭하여 이징 편집기를 엽니다.

사전 설정을 사용하여 타이밍 조정

클릭 한 번으로 타이밍을 조정하려면 이징 편집기의 사전 설정을 사용합니다.

이징 편집기에서 키워드 값을 설정하려면 선택 도구 버튼 중 하나를 클릭합니다.
- 선형
- 이즈 인 아웃
- 이즈 인
- 이즈 아웃
사전 설정 전환기에서 또는 버튼을 클릭하여 다음 사전 설정 중 하나를 선택합니다.
- 선형 사전 설정: elastic, bounce 또는 emphasized
- Cubic Bezier 사전 설정:

타이밍 키워드	사전 설정	큐빅 베지어
이즈 인 아웃	인아웃, 사인	`cubic-bezier(0.45, 0.05, 0.55, 0.95)`
	인아웃, 이차	`cubic-bezier(0.46, 0.03, 0.52, 0.96)`
	인 아웃, 큐빅	`cubic-bezier(0.65, 0.05, 0.36, 1)`
	빨리 감기, 천천히 움직이기	`cubic-bezier(0.4, 0, 0.2, 1)`
	인 아웃, 뒤로	`cubic-bezier(0.68, -0.55, 0.27, 1.55)`
이즈 인	인, 사인	`cubic-bezier(0.47, 0, 0.75, 0.72)`
	내부, 이차	`cubic-bezier(0.55, 0.09, 0.68, 0.53)`
	포함, 큐빅	`cubic-bezier(0.55, 0.06, 0.68, 0.19)`
	진입, 뒤로	`cubic-bezier(0.6, -0.28, 0.74, 0.05)`
	패스아웃, 선형 인	`cubic-bezier(0.4, 0, 1, 1)`
이즈 아웃	출력, 사인	`cubic-bezier(0.39, 0.58, 0.57, 1)`
	출력, 이차	`cubic-bezier(0.25, 0.46, 0.45, 0.94)`
	출력, 큐빅	`cubic-bezier(0.22, 0.61, 0.36, 1)`
	선형 출력, 느린 인	`cubic-bezier(0, 0, 0.2, 1)`
	밖으로, 뒤로	`cubic-bezier(0.18, 0.89, 0.32, 1.28)`

맞춤 타이밍 구성

타이밍 함수의 맞춤 값을 설정하려면 선에 있는 제어점을 사용합니다.

선형 함수의 경우 선의 아무 곳이나 클릭하여 기준점을 추가하고 드래그합니다. 점을 삭제하려면 더블클릭하세요.
큐빅 베지어 함수의 경우 기준점 중 하나를 드래그합니다.

변경사항이 있을 경우 편집기 상단의 Preview에서 볼 애니메이션이 트리거됩니다.

(실험용) CSS 변경사항 복사

이 실험을 사용 설정하면 스타일 탭에서 CSS 변경사항이 녹색으로 강조표시됩니다.

단일 CSS 선언 변경사항을 복사하려면 강조표시된 선언 위로 마우스를 가져간 다음 복사 버튼을 클릭합니다.

CSS 선언 변경사항을 복사합니다.

여러 선언의 모든 CSS 변경사항을 한 번에 복사하려면 선언을 마우스 오른쪽 버튼으로 클릭하고 모든 CSS 변경사항 복사를 선택합니다.

모든 CSS 변경사항을 복사합니다.

또한 변경사항 탭에서 변경한 변경사항을 추적할 수 있습니다.

CSS 기능 참조

요소 선택

CSS 보기

링크로 탐색하기

CSS 문서, 특정성, 맞춤 속성 값이 포함된 도움말 보기

CSS 문서 보기

선택기 특정도 보기

맞춤 속성 값 보기

잘못된 CSS, 재정의된 CSS, 비활성 CSS 및 기타 CSS 보기

요소에 실제로 적용된 CSS만 보기

알파벳순으로 CSS 속성 보기

상속된 CSS 속성 보기

CSS 규칙 보기

규칙 @property개 보기

규칙 @supports개 보기

규칙 @scope개 보기

규칙 @font-palette-values개 보기

요소의 상자 모델 보기

요소의 CSS 검색 및 필터링

포커스된 페이지 에뮬레이션

의사 클래스 전환

상속된 강조 표시 유사 요소 보기

캐스케이드 레이어 보기

인쇄 모드로 페이지 보기

적용 범위 탭에서 사용된 CSS 및 사용되지 않은 CSS 보기

인쇄 미리보기 모드 강제 사용

CSS 복사

CSS 변경

요소에 CSS 선언 추가

인라인 선언 추가

스타일 규칙에 선언 추가

선언 이름 또는 값 변경

단축키로 열거 가능한 값 변경

길이 값 변경

요소에 클래스 추가하기

밝은 테마 및 어두운 테마 환경설정을 에뮬레이션하고 자동 어두운 모드를 사용 설정합니다.

수업 전환

스타일 규칙 추가

규칙을 추가할 스타일 시트 선택

선언 전환

애니메이션 중에 ::view-transition 유사 요소 수정

그리드 항목과 해당 콘텐츠를 그리드 편집기에 정렬

색상 선택 도구로 색상 변경

각도 시계로 각도 값 변경

그림자 편집기로 상자 및 텍스트 그림자 변경

이징 편집기로 애니메이션과 전환 타이밍 편집하기

사전 설정을 사용하여 타이밍 조정

맞춤 타이밍 구성

(실험용) CSS 변경사항 복사

규칙 `@property`개 보기

규칙 `@supports`개 보기

규칙 `@scope`개 보기

규칙 `@font-palette-values`개 보기

애니메이션 중에 `::view-transition` 유사 요소 수정