CSS 규칙을 검사하는 방법

아티클
02/24/2013

응용 프로그램을 디버깅할 때 선택한 DOM 요소 및 해당 요소의 자식 요소에 대한 CSS 규칙을 보고 변경할 수 있습니다.

DOM 탐색기의 스타일 및 스타일 추적 탭에는 선택한 요소에 적용되는 CSS 규칙이 표시됩니다.규칙은 CSS 우선 순위 규칙에 따라 구체적인 정도를 기준으로 표시됩니다.스타일 탭에서 목록의 맨 위에 있는 규칙이 선택한 요소에 가장 먼저 적용되고 목록의 맨 아래에 있는 규칙은 마지막으로 적용됩니다.규칙이 적용되면 이전에 적용된 규칙이 재정의됩니다.이러한 규칙 값은 편집할 수 있습니다. 값을 클릭하고 새 값을 입력한 다음 Enter 키를 누르면 됩니다.그러면 응용 프로그램에 바로 변경 내용이 나타납니다.

스타일 탭과 스타일 추적 탭에 있는 정보는 같지만 스타일 추적 탭에서는 정보가 속성별로 그룹화되고 규칙이 속성 아래에 표시됩니다.속성은 사전순으로 나열되고 규칙은 구체적인 정도에 따라 순서가 지정됩니다.

스타일 및 스타일 추적 탭에서 변경하는 내용은 영구적이지 않습니다.이 변경 내용은 디버깅을 중지하면 손실됩니다.

팁

디버거를 중지한 후 다시 시작하지 않고 소스 코드를 변경하고 페이지를 다시 로드하려면 디버그 도구 모음에서 Windows 응용 프로그램 새로 고침 단추를 사용하여 응용 프로그램을 새로 고칩니다.자세한 내용은 앱을 새로 고치는 방법을 참조하십시오.

CSS 규칙 보기 및 변경

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

CSS 규칙을 보고 변경하려면

Visual Studio의 분할 응용 프로그램 프로젝트 템플릿에서 JavaScript를 사용하여 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에서 중첩 요소로 나타납니다.DIV 요소 항목은 목록 항목을 지정합니다.
디버그 도구 모음의 디버깅 시작 단추 옆에 있는 드롭다운 목록에서 시뮬레이터를 선택합니다.
F5 키를 눌러 디버그 모드에서 응용 프로그램을 실행합니다.

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

팁

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

팁

DOM 탐색기에서 HTML 요소를 직접 선택할 수도 있습니다.요소를 선택하는 방법에 대한 자세한 내용은 빠른 시작: 앱 디버깅(JavaScript)을 참조하십시오.
시뮬레이터에서 홈 페이지의 왼쪽 창에 있는 Group Title: 1 목록의 첫 번째 항목 제목을 마우스로 가리킵니다.아래와 같이 제목 주위에 컬러 윤곽선이 나타납니다.
윤곽선이 있는 제목을 클릭합니다.DOM 탐색기는 아래와 비슷한 해당 HTML 요소(ID는 다를 수 있음)를 자동으로선택합니다.
```
<h4 class="item-title" id="_win_bind74" data-win-bind="textContent: title">Group Title: 1</h4>
```
DOM 탐색기에서 요소를 선택하면 현재 페이지의 이름이 요소 선택 단추 오른쪽의 요소 소스 필드에 나타납니다.items.html이 다음과 같이 HTML 파일로 표시됩니다.

DOM 탐색기에서 H4 요소를 선택하면 스타일, 스타일 추적 및 기타 탭에 이제 H4 요소와 연결된 규칙이 표시됩니다.색 속성이 열린 스타일 추적 탭은 다음과 같습니다.

이 뷰에서는 색 속성과 연결된 규칙에 대한 다음과 같은 유용한 정보를 제공합니다.
- 색 속성의 첫 번째 및 두 번째 항목은 사용되지 않습니다.취소선 텍스트는 속성이 CSS 우선 순위 규칙(구체적인 정도)에 따라 동일한 속성의 다른 응용 프로그램에 의해 재정의되었음을 나타냅니다.
- 색 속성의 두 번째 항목은 CSS 파일 items.css에 추가한 색 속성임을 나타내는 데 도움이 되는 주황색 정사각형을 표시합니다.
- 색 속성의 세 번째 항목은 목록의 항목 색을 설정하는 데 사용됩니다.이 값은 items.css에서 설정되지만 CSS 선택기 .itemspage .itemslist .item .item-overlay .item-title에 대해 특별히 설정됩니다.
색 속성의 세 번째 항목에 대한 확인란의 선택을 취소합니다.이제 시뮬레이터에서 항목 제목의 색이 모두 주황색으로 변경되었음을 알 수 있습니다.
색 속성의 두 번째 항목을 선택한 다음 속성 값 **rgb(255, 106, 0)**를 두 번 클릭합니다.
키보드를 사용하여 106을 삭제하고 255를 입력한 다음 Enter 키를 누릅니다.시뮬레이터에서 항목 제목의 색이 모두 노란색으로 변경됩니다.
소스 CSS 파일을 변경하려면 스타일 추적 탭에서 items.css 링크를 클릭합니다.색 속성의 값을 변경할 수 있는 items.css가 열립니다.디버거를 중지한 후 다시 시작하지 않고 응용 프로그램을 새로 고치려면 디버그 도구 모음에서 Windows 응용 프로그램 새로 고침 단추 를 클릭합니다.

참고 항목

다음을 통해 공유

CSS 규칙을 검사하는 방법

CSS 규칙 보기 및 변경

CSS 규칙을 보고 변경하려면

참고 항목

작업

개념

기타 리소스

추가 리소스