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

CSS 기능 참조

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

다음과 관련된 Chrome DevTools 기능에 대한 종합 레퍼런스에서 새로운 워크플로를 살펴보세요. 변경할 수 있습니다.

기본사항을 알아보려면 CSS 보기 및 변경을 참조하세요.

요소 선택

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

선택한 요소의 예

스크린샷에서 DOM 트리에서 파란색으로 강조표시된 h1 요소가 선택된 요소입니다. 오른쪽의 스타일 탭에 요소의 스타일이 표시됩니다. 왼쪽에 있는 요소는 마우스를 DOM에서 가져가면 트리.

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

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

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

CSS 보기

요소 > 스타일 및 계산됨 탭에서 CSS 규칙을 보고 CSS 문제를 진단할 수 있습니다.

링크로 탐색

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

CSS 규칙 옆, 스타일 시트와 CSS 소스 이러한 링크를 클릭하면 소스 패널이 열립니다. 스타일 시트가 축소된 경우 축소된 파일을 읽을 수 있도록 설정하기를 참고하세요.
상속 출처: ... 섹션에서 상위 요소로
var() 호출에서 맞춤 속성 선언에 사용됩니다.
animation 약식 속성에서 @keyframes로 변경합니다.
문서 도움말의 자세히 알아보기 링크
다양한 기능을 활용해 보세요.

그중 일부는 다음과 같습니다.

다양한 링크가 강조표시되었습니다.

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

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

요소 > 스타일은 특정 요소 위로 마우스를 가져가면 유용한 정보와 함께 도움말을 표시합니다.

CSS 문서 보기

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

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

이 속성에 대한 MDN CSS 참조로 이동하려면 자세히 알아보기를 클릭합니다.

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

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

선택기 구체성 보기

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

일치하는 선택기의 특정성 가중치가 포함된 도움말

맞춤 속성의 값 보기

--custom-property 위로 마우스를 가져가면 도움말에서 값을 볼 수 있습니다.

도움말에 표시되는 맞춤 속성의 값입니다.

유효하지 않은 CSS, 재정의된 CSS, 비활성 CSS 및 기타 CSS 보기

스타일 탭은 여러 유형의 CSS 문제를 인식하고 다양한 방식으로 강조 표시합니다.

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

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

스타일 탭에는 요소에 적용되는 모든 규칙이 표시되며, 여기에는 재정의되었습니다. 재정의된 선언에 관심이 없다면 Computed 요소에 실제로 적용된 CSS만 볼 수 있습니다.

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

계산됨 탭

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

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

알파벳순으로 CSS 속성 보기

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

상속된 CSS 속성 보기

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

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

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

CSS 규칙 보기

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

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

규칙 `@property`개 보기

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

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

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

규칙 `@supports`개 보기

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

@supports at-rules를 참조하세요.

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

규칙 `@scope`개 보기

요소에 적용된 CSS @scope 규칙이 스타일 탭에 표시됩니다.

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

참고: @scope 규칙 적용 기능은 실험용입니다. 테스트하려면 chrome://flags/#enable-experimental-web-platform-features에서 Experimental Web Platform 기능 플래그를 사용 설정하세요. 그렇지 않으면 다음 미리보기가 작동하지 않습니다.

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

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

@scope 규칙

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

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

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

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

다음 미리보기에서 @font-palette-values 섹션을 확인합니다.

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

@font-palette-values 규칙

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

맞춤 값을 수정하려면 두 번 클릭합니다.

규칙 `@position-try`개 보기

position-try-options 속성과 함께 @position-try CSS 규칙을 사용하면 요소의 대체 앵커 위치를 정의할 수 있습니다. 자세한 내용은 CSS 앵커 포지셔닝 API 소개를 참고하세요.

요소 > 스타일은 다음을 확인하고 연결합니다.

position-try-options 속성 값을 전용 @position-try --name 섹션에 추가합니다.
position-anchor 속성 값과 anchor() 인수를 popovertarget 속성이 있는 상응하는 요소에 추가합니다.

다음 미리보기에서 position-try-options 값과 @position-try 섹션을 검사합니다.

</ph>

popover와 함께 앵커를 사용하는 데모

미리보기에서 하위 메뉴를 엽니다. 즉, 내 계정과 스토어를 차례로 클릭합니다.
미리보기에서 id="submenu"를 사용하여 요소를 검사합니다.
스타일에서 position-try-options 속성을 찾아 --bottom 값을 클릭합니다. 스타일 탭을 누르면 해당하는 @position-try 섹션으로 이동합니다.
position-anchor 값 링크 또는 동일한 anchor() 인수를 클릭합니다. Elements 패널에서는 해당하는 popovertarget 속성이 있는 요소를 선택하고 Styles 탭에는 요소의 CSS가 표시됩니다.

position-try-options 속성, @position-try 섹션, 팝오버 타겟 속성이 있는 요소.

값을 수정하려면 값을 더블클릭합니다.

요소의 상자 모델 보기

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

박스 모델 다이어그램입니다.

값을 변경하려면 값을 더블클릭합니다.

요소의 CSS 검색 및 필터링

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

스타일 탭 필터링

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

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

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

필터링된 속성 그룹화

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

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

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

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

'포커스가 설정된 페이지 에뮬레이션' 사용 설정 전후 옵션을 선택합니다.

렌더링 패널에서도 동일한 옵션을 찾을 수 있습니다.

의사 클래스 전환

:active, :focus, :focus-within, :target, :hover, :visited, focus-visible와 같은 의사 클래스를 전환하는 방법은 다음과 같습니다.

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

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

표시 영역에서 DevTools가 background-color 선언을 요소에 적용하는 것을 확인할 수 있습니다. 이는 요소가 실제로 마우스 오버되지 않은 경우에도 마찬가지입니다.

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

상속된 하이라이트 의사 요소 보기

유사 요소를 사용하면 요소의 특정 부분에 스타일을 지정할 수 있습니다. 강조 표시 의사 요소는 '선택됨'으로 표시된 문서 부분입니다. '강조표시됨'으로 스타일이 지정됩니다. 를 호출하여 사용자에게 이 상태를 표시합니다. 예를 들어 이러한 의사 요소는 ::selection, ::spelling-error, ::grammar-error, ::highlight입니다.

사양에서 언급했듯이 여러 스타일이 충돌하는 경우 계단식에 따라 최적의 스타일이 결정됩니다.

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

규칙의 상속과 우선순위를 더 잘 이해하려면 상속된 강조 표시 의사 요소를 확인하면 됩니다.

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

부모님의 강조표시 의사 요소 스타일을 상속받았습니다. 나를 선택하세요.
위에서 텍스트 일부를 선택하세요.
스타일 탭에서 아래로 스크롤하여 Inherited from ::selection pseudo of... 섹션을 찾습니다.

스타일 탭의 상속 섹션 확인

계단식 레이어 보기

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

캐스케이드 레이어를 보려면 다음 요소를 검사하고 요소를 엽니다. 스타일.

Styles 탭에서 3개의 캐스케이드 레이어와 스타일(page, component, base)을 확인합니다.

레이어를 캐스케이드합니다.

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

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

인쇄 모드로 페이지 보기

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

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

범위 탭에서 사용된 CSS와 사용하지 않는 CSS 보기

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

Command+Shift+P (Mac)를 누르거나 DevTools를 사용하는 동안 Control+Shift+P (Windows, Linux, ChromeOS)를 사용하면 됩니다. 명령 메뉴를 엽니다
coverage를 입력합니다.
범위 표시를 선택합니다. 범위 탭이 표시됩니다.
새로고침을 클릭합니다. 페이지가 새로고침되고 노출 범위 탭에 CSS (및 자바스크립트) 금액이 대략적으로 표시됩니다. 사용되는 한 줄로만 저장됩니다.

녹색은 사용된 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를 변경할 수 있는 모든 방법이 나와 있습니다. 스타일.

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

요소에 CSS 선언 추가

선언 순서는 요소의 스타일 지정 방식에 영향을 주므로 있습니다.

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

어떤 워크플로를 사용해야 하나요? 대부분의 시나리오에서는 선언 워크플로를 따르는 것이 좋습니다. 인라인 선언은 외부 선언보다 특정성이 높으므로 인라인 선언은 변경사항을 적용할 수 있습니다. Selector를 참고하세요. 유형을 참조하세요.

요소의 스타일을 디버깅하는 경우 다른 위치에 정의되어 있는 경우 다른 워크플로를 사용하세요.

인라인 선언 추가

인라인 선언을 추가하는 방법은 다음과 같습니다.

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

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

스타일 규칙에 선언 추가

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

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

선언의 값 변경

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

선언 이름 또는 값 변경

선언의 이름이나 값을 더블클릭하여 변경합니다. enumerable 값 변경: 단축키: 값을 0.1, 1, 10개 또는 100개의 단위로 표시됩니다.

단축키를 사용하여 열거 가능한 값 변경

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

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

줄일 수도 있습니다. 앞에서 언급한 Up의 각 인스턴스를 아래쪽

길이 값 변경

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

길이 단위를 변경하려면 다음 단계를 따르세요.

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

길이 값을 변경하는 방법:

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

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

요소에 클래스 추가

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

DOM 트리에서 요소를 선택합니다.
.cls를 클릭합니다.
Add New Class 상자에 수업 이름을 입력합니다.
Enter를 누릅니다.

요소 클래스 섹션

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

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

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

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

수업 전환

요소에서 클래스를 사용 설정 또는 사용 중지하려면 다음 안내를 따르세요.

DOM 트리에서 요소를 선택합니다.
요소 클래스 섹션을 엽니다. 요소에 클래스 추가를 참고하세요. 새로 추가 클래스 상자는 이 요소에 적용되는 모든 클래스입니다.
사용 설정하거나 사용 중지할 수업 옆에 있는 체크박스를 선택합니다.

스타일 규칙 추가

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

요소를 선택합니다.
새 스타일 규칙을 클릭합니다. 입니다. 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씩 증가 / 감소합니다.
각도 값을 변경할 수 있는 더 많은 단축키가 있습니다. 스타일 창에서 자세히 알아보기 단축키를 사용하세요.

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

Shadow Editor는 text-shadow 및 box-shadow CSS 선언을 변경하기 위한 GUI를 제공합니다.

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

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

이징 편집기로 애니메이션 및 전환 타이밍 수정

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

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

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

미리 설정을 사용하여 타이밍 조정하기

클릭 한 번으로 타이밍을 조정하려면 이징 편집기에서 미리 설정을 사용하세요.

이징 편집기에서 키워드 값을 설정하려면 선택 도구 버튼 중 하나를 클릭합니다. <ph type="x-smartling-placeholder">
- 선형
- ease-in-out
- ease-in
- ease-out
사전 설정 전환기에서 또는 버튼을 클릭하여 다음 사전 설정 중 하나를 선택합니다.
- 선형 사전 설정: elastic, bounce 또는 emphasized
- Cubic Bezier 사전 설정:

타이밍 키워드	사전 설정	큐빅 베지어
이즈 인 아웃	입력, 사인	`cubic-bezier(0.45, 0.05, 0.55, 0.95)`
	입력, 2차	`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)`
	출력, 2차	`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)`

맞춤 시간 구성

시간 함수의 맞춤 값을 설정하려면 줄의 컨트롤 포인트를 사용합니다.

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

변경하면 편집기 상단의 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개 보기

규칙 @position-try개 보기

요소의 상자 모델 보기

요소의 CSS 검색 및 필터링

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

의사 클래스 전환

상속된 하이라이트 의사 요소 보기

계단식 레이어 보기

인쇄 모드로 페이지 보기

범위 탭에서 사용된 CSS와 사용하지 않는 CSS 보기

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

CSS 복사

CSS 변경

요소에 CSS 선언 추가

인라인 선언 추가

스타일 규칙에 선언 추가

선언 이름 또는 값 변경

단축키를 사용하여 열거 가능한 값 변경

길이 값 변경

요소에 클래스 추가

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

수업 전환

스타일 규칙 추가

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

선언 전환

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

그리드 편집기를 사용하여 그리드 항목과 해당 콘텐츠 정렬

색상 선택 도구로 색상 변경

각도 시계로 각도 값 변경

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

이징 편집기로 애니메이션 및 전환 타이밍 수정

미리 설정을 사용하여 타이밍 조정하기

맞춤 시간 구성

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

규칙 `@property`개 보기

규칙 `@supports`개 보기

규칙 `@scope`개 보기

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

규칙 `@position-try`개 보기

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