CSS 기능 참조

Kayce Basques
Kayce Basques
X GitHub
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

CSS 보기 및 변경과 관련된 Chrome DevTools 기능에 관한 포괄적인 참조에서 새로운 워크플로를 알아보세요.

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

요소 선택

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

선택된 요소의 예

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

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

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

  • 뷰포인트에서 요소를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다.
  • DevTools에서 요소 선택 요소 선택을 클릭하거나 Command+Shift+C (Mac) 또는 Control+Shift+C (Windows, Linux)를 누른 다음 뷰포트에서 요소를 클릭합니다.
  • DevTools에서 DOM Tree의 요소를 클릭합니다.
  • 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만 확인합니다.

  1. 요소를 선택합니다.
  2. 요소 패널의 계산됨 탭으로 이동합니다.

계산된 탭

모두 표시 체크박스를 선택하여 모든 속성을 표시합니다.

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

CSS 속성 알파벳순으로 보기

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

상속된 CSS 속성 보기

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

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

스타일 탭의 상속받은 항목 섹션을 확인합니다.

CSS at-rule 보기

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

@property at-rule 보기

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

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

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

@supports at-rule 보기

스타일 탭에는 요소에 적용된 경우 @supports CSS at-rule이 표시됩니다. 예를 들어 다음 요소를 검사해 보세요.

@supports at-rules를 확인하세요.

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

@scope at-rule 보기

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

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

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

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

@scope 규칙

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

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

@font-palette-values at-rule 보기

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

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

를 참고하세요.
  1. 미리보기에서 두 번째 텍스트 줄을 검사합니다.
  2. 스타일에서 @font-palette-values 섹션을 찾습니다.

@font-palette-values 규칙

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

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

@position-try at-rule 보기

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

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

  • position-try-options 속성 값을 전용 @position-try --name 섹션으로 이동합니다.
  • position-anchor 속성 값 및 anchor() 인수를 popovertarget 속성이 있는 상응하는 요소에 전달합니다.

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

popover를 사용한 앵커 데모
  1. 미리보기에서 하위 메뉴를 엽니다. 즉, 내 계정을 클릭한 다음 스토어 페이지를 클릭합니다.
  2. 미리보기에서 id="submenu"를 사용하여 요소를 검사합니다.
  3. 스타일에서 position-try-options 속성을 찾아 --bottom 값을 클릭합니다. 스타일 탭을 클릭하면 해당 @position-try 섹션으로 이동합니다.
  4. position-anchor 값 링크 또는 동일한 anchor() 인수를 클릭합니다. 요소 패널은 상응하는 popovertarget 속성이 있는 요소를 선택하고 스타일 탭에는 요소의 CSS가 표시됩니다.

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

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

요소의 박스 모델 보기

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

박스 모델 다이어그램

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

요소의 CSS 검색 및 필터링

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

스타일 탭 필터링

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

계산된 탭에서 상속된 속성을 필터링합니다.

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

필터링된 속성 그룹화

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

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

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

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

&#39;포커스된 페이지 에뮬레이션&#39; 옵션을 사용 설정하기 전과 후

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

요소를 고정하는 다른 방법을 알아보려면 화면 고정 및 사라지는 요소 검사를 참고하세요.

가상 클래스 전환

가상 클래스를 전환하는 방법은 다음과 같습니다.

  1. 요소를 선택합니다.
  2. 요소 패널에서 스타일 탭으로 이동합니다.
  3. :hov를 클릭합니다.
  4. 사용 설정하려는 가상 클래스를 선택합니다.

요소에서 마우스 오버 가상 상태 전환

이 예에서는 요소가 실제로 마우스 오버되지 않았는데도 DevTools가 요소에 background-color 선언을 적용하는 것을 볼 수 있습니다.

스타일 탭에는 모든 요소에 대한 다음 가상 클래스가 표시됩니다.

또한 일부 요소에는 자체 가상 클래스가 있을 수 있습니다. 이러한 요소를 선택하면 스타일 탭에 특정 요소 상태 강제 적용 섹션이 표시되며 이 섹션을 펼치고 요소에 맞는 가상 클래스를 사용 설정할 수 있습니다.

&#39;textarea&#39; 요소의 &#39;Force specific element state&#39; 섹션

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

상속된 강조 표시 가상 요소 보기

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

사양에 언급된 대로 여러 스타일이 충돌하면 계단식 적용을 통해 적용할 스타일이 결정됩니다.

규칙의 상속 및 우선순위를 더 잘 이해하려면 상속된 강조 표시 가상 요소를 확인하세요.

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

    상위 요소의 강조 표시 의사 요소의 스타일을 상속했습니다. 선택해 주세요.

  2. 위 텍스트의 일부를 선택합니다.

  3. 스타일 탭에서 아래로 스크롤하여 Inherited from ::selection pseudo of... 섹션을 찾습니다.

스타일 탭의 상속 섹션을 봅니다.

계단식 레이어 보기

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

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

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

계층을 кас케이드합니다.

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

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

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

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

적용 범위 탭으로 사용된 CSS 및 사용되지 않은 CSS 보기

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

  1. DevTools에 포커스가 있는 동안 Command+Shift+P (Mac) 또는 Control+Shift+P (Windows, Linux, ChromeOS)를 눌러 명령어 메뉴를 엽니다.

  2. coverage를 입력합니다.

    명령어 메뉴에서 노출 영역 탭을 엽니다.

  3. 범위 표시를 선택합니다. Coverage(범위) 탭이 표시됩니다.

    노출 범위 탭

  4. 범위 계측 시작 및 페이지 새로고침 새로고침을 클릭합니다. 페이지가 새로고침되고 범위 탭에 브라우저가 로드하는 각 파일에서 사용되는 CSS (및 JavaScript)의 양이 개요로 표시됩니다.

    사용된 CSS(및 JavaScript)와 사용되지 않은 CSS(및 JavaScript)의 양에 관한 개요입니다.

    녹색은 사용된 CSS를 나타냅니다. 빨간색은 사용하지 않는 CSS를 나타냅니다.

  5. CSS 파일을 클릭하면 위의 미리보기에서 사용하는 CSS를 줄별로 확인할 수 있습니다.

    사용된 CSS와 사용되지 않은 CSS를 줄별로 분류한 분석입니다.

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

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

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

CSS 복사

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

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

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

  1. 요소를 선택합니다.
  2. 요소 > 스타일 탭에서 CSS 속성을 마우스 오른쪽 버튼으로 클릭합니다. CSS 드롭다운 메뉴를 복사합니다.

  3. 드롭다운 메뉴에서 다음 옵션 중 하나를 선택합니다.

    • 선언 복사 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로 복사합니다. JavaScript 문법으로 모든 속성과 값을 복사합니다. ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

    • 모든 CSS 변경사항을 복사합니다. 스타일 탭에서 변경한 내용을 모든 선언에 복사합니다.

    • 계산된 값 보기