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

CSS 보기 및 변경

Kayce Basques

Sofia Emelianova

이 대화형 튜토리얼을 완료하여 Chrome DevTools를 사용하여 페이지의 CSS를 보고 변경하는 방법에 관한 기본 사항을 알아보세요.

요소의 CSS 보기

아래의 Inspect me! 텍스트를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다. DevTools의 Elements 패널이 열립니다.

날 살펴보자!
DOM 트리에서 파란색으로 강조 표시된 Inspect me! 요소를 확인합니다.
DOM 트리에서 Inspect me! 요소의 data-message 속성 값을 찾습니다.
아래 텍스트 상자에 속성 값을 입력합니다.
요소 > 스타일 탭에서 aloha 클래스 규칙을 찾습니다.

Styles 탭에는 DOM 트리에서 선택된 요소에 적용되는 CSS 규칙이 나열되며, 이 요소는 여전히 Inspect me! 요소여야 합니다.
aloha 클래스가 padding의 값을 선언하고 있습니다. 아래 텍스트 상자에 이 값과 단위를 공백 없이 입력합니다.

1단계 스크린샷에서와 같이 DevTools 창을 표시 영역 오른쪽에 도킹하려면 DevTools 배치 변경을 참조하세요.

요소에 CSS 선언을 변경하거나 추가하려면 스타일 탭을 사용하세요.

아래의 Add a background color to me! 텍스트를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다.

배경 색상을 추가해 줘!
스타일 탭 상단에서 element.style를 클릭합니다.
background-color를 입력하고 Enter 키를 누릅니다.
honeydew를 입력하고 Enter 키를 누릅니다. DOM 트리에서 인라인 스타일 선언이 요소에 적용된 것을 확인할 수 있습니다.

스타일 탭을 통해 요소에 CSS 선언을 추가합니다.

스타일 탭을 사용하면 CSS 클래스가 요소에 적용되거나 요소에서 삭제될 때 요소가 어떻게 보이는지 확인할 수 있습니다.

아래의 Add a class to me! 요소를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다.

수업을 추가해 주세요.
.cls를 클릭합니다. DevTools에 선택한 요소에 클래스를 추가할 수 있는 텍스트 상자가 표시됩니다.
새 수업 추가 입력란에 color_me를 입력하고 Enter 키를 누릅니다. 새 클래스 추가 텍스트 상자 아래에 체크박스가 표시되며 여기에서 클래스를 켜거나 끌 수 있습니다. Add a class to me! 요소에 다른 클래스가 적용된 경우 여기에서 클래스를 전환할 수도 있습니다.