레이아웃을 보고 편집하는 방법

아티클
02/24/2013

DOM 탐색기의 레이아웃 탭에는 선택한 요소에 대한 CSS 상자 모델이 표시됩니다.상자 모델의 이 시각적 표현을 사용하여 속성 값을 빠르게 식별할 수 있습니다.레이아웃 탭에서 값을 변경할 수도 있습니다.변경한 내용은 영구적이지 않습니다.이 변경 내용은 디버깅을 중지하면 손실됩니다.

팁

디버거를 중지하지 않으려는 경우 소스 코드를 변경한 다음 디버그 도구 모음에서 Windows 응용 프로그램 새로 고침 단추를 사용하여 응용 프로그램을 새로 고치면 됩니다.

DOM 탐색기를 사용하여 상자 모델에 표시되지 않은 레이아웃 요소를 수정하려면 빠른 시작: 앱 디버깅(JavaScript) 및 CSS 규칙을 검사하는 방법를 참조하십시오.

레이아웃 보기 및 편집

이 예제에서는 분할 응용 프로그램 템플릿에서 목록 요소를 선택하고 레이아웃 탭에 있는 상자 모델 값을 해석한 다음 속성 값 중 하나를 변경합니다.

레이아웃을 보고 편집하려면

Visual Studio에서 분할 응용 프로그램 프로젝트 템플릿을 사용하는 새 JavaScript를 사용하여 빌드된 Windows용 Windows 스토어 앱을 만듭니다.
디버그 도구 모음의 디버깅 시작 단추 옆에 있는 드롭다운 목록에서 시뮬레이터를 선택합니다.
F5 키를 눌러 디버그 모드에서 응용 프로그램을 실행합니다.

팁

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

팁

DOM 탐색기에서 HTML 요소를 직접 선택할 수도 있습니다.요소를 선택하는 방법에 대한 자세한 내용은 빠른 시작: 앱 디버깅(JavaScript)을 참조하십시오.
시뮬레이터에서 그룹 이미지와 그룹 제목 모두에 컬러 윤곽선이 그려지도록 홈 페이지의 그룹을 마우스로 가리킵니다.이 데모에서는 세 번째 그룹을 마우스로 가리킵니다.윤곽선이 그려진 그룹 이미지와 제목이 여기에 표시됩니다.
강조 표시된 그룹과 이미지를 클릭하여 선택합니다.DOM 탐색기에서 해당 IMG 요소가 자동으로 선택됩니다.DOM 탐색기에서 선택된 요소가 다음과 같이 표시됩니다.
```
<img class="item-image" id="_win_bind[idNumber]" alt="Group Title: 3" 
    src="data:image/png;base64, ..." data-win-bind=
    "src: backgroundImage; alt: title"></img>
```
레이아웃 탭을 클릭합니다.이 탭에서는 아래와 같이 선택한 요소의 차수가 표시됩니다.

이 뷰에서는 요소에 대한 몇 가지 유용한 정보를 제공합니다.
- 가장 안쪽 상자에 있는 요소의 차수이며, 일반적으로 CSS 높이 및 너비 속성에 해당합니다.
- 안쪽 여백, 테두리 및 여백 상자에 0 픽셀 값이 표시되며, 이는 해당 CSS 속성이 설정되어 있지 않음을 나타냅니다.예를 들어 CSS 왼쪽 여백, 위쪽 여백, 오른쪽 여백 및 아래쪽 여백 속성이 설정되어 있지 않을 수 있습니다.
팁

속성의 적용 방법을 보려면 스타일 탭을 클릭하고 상속됨 스타일 아래에서 <div> 인라인 규칙 아래를 확인합니다.여기에서 설정된 높이 및 너비 속성을 확인할 수 있습니다.
레이아웃 탭의 여백 상자 위쪽에서 0px를 두 번 클릭합니다.
위쪽 화살표 키를 사용하여 위쪽 여백 값을 10px로 늘린 다음 Enter 키를 누릅니다.업데이트된 여백이 시뮬레이터와 스타일 탭의 인라인 규칙 아래에 나타납니다.위쪽 또는 아래쪽 화살표 키를 사용하는 대신 새 값을 입력할 수도 있습니다.