DOM 탐색기를 사용하여 CSS 스타일 디버깅

아티클
06/05/2015

Windows 및 Windows Phone에 적용

Windows 스토어 및 Windows Phone 스토어 앱을 디버깅할 때 선택한 DOM 요소 및 해당 요소의 자식 요소에 대한 CSS 규칙을 보고 변경할 수 있습니다.

DOM 탐색기의 스타일 및 계산됨 탭에는 선택한 요소에 적용되는 CSS 규칙이 표시됩니다. 규칙은 CSS 우선 순위 규칙에 따른 구체적인 정도의 순서로 표시됩니다. 탭에서 선택기 또는 스타일 선택기 위쪽에 있는 규칙(가장 구체적인 규칙)은 선택한 요소에 마지막으로 적용되고, 선택기 또는 스타일 아래쪽에 있는 규칙부터 적용됩니다. 규칙이 적용되면 이전에 적용된 규칙이 재정의됩니다.

스타일, 계산됨 및 변경 내용 탭에는 다양한 뷰로 스타일 정보가 표시됩니다.

html, body 등 CSS 선택기 이름에 따라 정렬된 규칙을 보려면 스타일 탭을 사용합니다. 또한 이 탭에서는 특정 스타일을 사용 또는 사용 안 함으로 설정하고, 값을 수동으로 편집하고, 이러한 변경의 결과를 즉시 볼 수 있습니다.
계산된 스타일 값을 보려면 계산됨 탭을 사용합니다. 예를 들어, 크기를 1em으로 설정하면 Internet Explorer에서 값을 16px로 계산할 수 있습니다. 이 탭의 스타일은 height와 같은 스타일 이름으로 구성됩니다. 또한 이 탭에서는 특정 스타일을 사용 또는 사용 안 함으로 설정하고, 값을 수동으로 편집하고, 이러한 변경의 결과를 즉시 볼 수 있습니다.

참고

Visual Studio 2013 업데이트 2에서는 추적 탭에서 제공되는 정보가 계산됨 탭과 병합되어 추적 탭이 제거되었습니다.
디버깅 세션 중 변경한 CSS 스타일을 식별하고 추적하려면 변경 내용 탭을 사용합니다.

팁

스타일 및 계산됨 탭에서 변경한 스타일은 영구적이지 않습니다.이 변경 내용은 디버깅을 중지하면 손실됩니다.소스 코드를 변경한 후 디버거를 중지했다가 다시 시작하지 않고 페이지를 다시 로드하려면 디버그 도구 모음에 있는 Windows 앱 새로 고침 단추 단추(Windows 응용 프로그램 새로 고침)를 사용하여 응용 프로그램을 새로 고칩니다.자세한 내용은 앱 새로 고침(JavaScript)을 참조하십시오.

CSS 규칙 수정 예제

이 예제에서는 CSS 규칙을 검사하고 스타일 문제를 디버깅하는 방법을 보여 줍니다. 이 예제에서는 Windows 스토어 분할 앱 템플릿에서 그룹 제목을 표시하는 데 사용되는 글꼴의 색을 변경하려고 합니다.

참고

이 예제에서는 Windows 스토어 앱에 대해 설명하지만, 표시된 모든 DOM 탐색기 기능은 Windows Phone 스토어 앱에도 적용됩니다.

CSS 규칙을 보고 변경하려면

Visual Studio의 분할 앱 프로젝트 템플릿에서 JavaScript 및 HTML을 사용하여 Windows 스토어 앱을 만듭니다.
솔루션 탐색기에서 items.css를 엽니다. 페이지 폴더에서 items.css를 찾을 수 있습니다.
다음 CSS 코드를
```
    .itemspage .itemslist .item {
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 1fr 90px;
        display: -ms-grid;
        height: 250px;
        width: 250px;
    }
```
다음 코드로 바꿉니다.
```
    .itemspage .itemslist .item {
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 1fr 90px;
        display: -ms-grid;
        height: 250px;
        width: 250px;
        color: #ff6a00;
    }
```
이 코드에서는 목록의 각 항목에 #ff6a00(주황) 색을 지정하는 스타일을 추가합니다. CSS 선택기 .itemspage .itemslist .item은 items.html의 DIV 요소에 대한 클래스 이름 집합을 나타냅니다. DIV 요소는 라이브 DOM에서 중첩 요소로 나타납니다. item DIV 요소는 목록 항목을 지정합니다.
디버그 도구 모음의 드롭다운 목록에서 시뮬레이터를 선택합니다(기본값 로컬 컴퓨터).
F5 키를 눌러 디버그 모드에서 응용 프로그램을 실행합니다.

응용 프로그램 로드가 완료되면 그룹 제목: 1과 같은 목록 항목의 머리글을 살펴봅니다. 색이 변경되지 않으므로 주황색을 제목에 적용하려고 해도 적용되지 않습니다. DOM 탐색기에서 CSS 탭을 사용하여 무엇이 잘못되었는지 알아보고 수정해보도록 하겠습니다.

팁

응용 프로그램이 시뮬레이터에 표시된 다음 선택 결과가 즉시 표시되어 CSS 스타일로 변경할 수 있도록 Visual Studio 창 오른쪽에 시뮬레이터를 배치합니다.
Visual Studio로 전환하고 DOM 탐색기에서 요소 선택을 클릭하거나 Ctrl+B를 누릅니다. 그러면 항목을 클릭하여 선택할 수 있도록 선택 모드가 변경되며, 응용 프로그램이 전경에 옵니다. 한 번 클릭 후 모드는 되돌려집니다. 요소 선택 단추는 다음과 같습니다.

팁

DOM 탐색기에서 HTML 요소를 직접 선택할 수도 있습니다.요소를 선택하는 방법에 대한 자세한 내용은 퀵 스타트: HTML 및 CSS 디버깅을 참조하십시오.
시뮬레이터에서 홈 페이지의 왼쪽 창에 있는 Group Title: 1 목록의 첫 번째 항목 제목을 마우스로 가리킵니다. 다음과 같이 제목이 강조 표시됩니다.

참고

Windows Phone 에뮬레이터에서는 요소를 마우스로 가리키면 강조 표시되는 기능이 일부만 지원됩니다.
윤곽선이 있는 제목을 클릭합니다. DOM 탐색기는 아래와 비슷한 해당 HTML 요소(ID는 다를 수 있음)를 자동으로
```
<h4 class="item-title">Group Title: 1</h4>
```
DOM 탐색기에서 H4 요소를 선택하면 H4 요소와 연결된 규칙이 DOM 탐색기에 표시됩니다. color 속성이 열린 상태로 계산됨 탭이 다음과 같이 표시됩니다.

이 뷰에서는 color 스타일과 연결된 규칙에 대한 다음과 같은 유용한 정보를 제공합니다.
- items.css에서 수정한 CSS 선택기인 .itemspage .itemslist .item은 마지막 스타일 계산에는 사용되지 않습니다(취소선 텍스트로 표시됨). 다른 color 스타일 몇 가지도 사용되지 않습니다.
  
  팁
  
  선택기 이름이 더 길 경우 전체 이름은 도구 설명에 표시됩니다.
- 최종 계산된 CSS 값, rgba(255, 255, 255, 0.87)는 마찬가지로 items.css에 정의된 CSS 선택기 .itemspage .itemslist .item .item-overlay .item-title용으로 특별히 설정됩니다.
  
  팁
  
  이제 제목 색을 어디에서 설정하는지 알았으며, 변경할 수 있는 곳도 알고 있습니다.그러나 나머지 단계에 나오는 것처럼 응용 프로그램을 새로 고치지 않고도 DOM 탐색기에서 변경 내용을 테스트할 수 있습니다.
.itemspage .itemslist .item .item-overlay .item-title 선택기용인 첫 번째 color 스타일의 확인란 선택을 취소합니다. 그러면 계획한 대로 시뮬레이터에서 항목 제목의 색이 모두 주황으로 바뀌고, CSS에서 수정한 .itemspage .itemslist .item 선택기는 더 이상 재지정되지 않습니다(텍스트 취소선이 사라짐). 확인란을 선택 취소하면 계산됨 탭이 다음과 같이 표시됩니다.
변경 내용 탭을 선택합니다.

디버깅 세션 중 변경한 스타일을 식별하고 추적하려면 변경 내용 탭을 사용합니다. 다음 그림에는 이제 재정의된 변경 내용 탭의 .itemspage .itemslist .item .item-overlay .item-title 선택기가 나와 있습니다.
CSS 스타일 값을 수동으로 편집하고 스타일 탭에서 즉시 결과를 볼 수도 있습니다.
스타일 탭을 선택합니다.
.itemspage .itemslist .item .item-overlay .item-title 스타일 선택기를 엽니다.
color 스타일의 첫 번째 항목을 선택한 다음 속성 값 rgb(255, 255, 255, 0.87)를 두 번 클릭합니다.
키보드를 사용하여 이 값을 수정합니다. 값을 rgb(255, 255, 0, 0.87)로 바꾼 다음 Enter 키를 누릅니다. 시뮬레이터에서 항목 제목의 색이 모두 노란색으로 변경됩니다.
소스 CSS 파일을 변경하려면 스타일 탭에서 items.css 링크를 클릭합니다. 그러면 items.css가 열려서 앱 코드의 color 스타일 값을 변경할 수 있게 됩니다. 디버거를 중지한 후 다시 시작하지 않고 응용 프로그램을 새로 고치려면 디버그 도구 모음에서 (Windows 응용 프로그램 새로 고침) 버튼을 클릭합니다.

참고 항목

다음을 통해 공유

DOM 탐색기를 사용하여 CSS 스타일 디버깅

CSS 규칙 수정 예제

CSS 규칙을 보고 변경하려면

참고 항목

작업

개념

기타 리소스

추가 리소스