작성자: Tim Ammann
Visual Studio 2012용 페이지 검사기 통합 브라우저가 있는 웹 개발 도구입니다. 통합 브라우저에서 요소를 선택하고 페이지 검사기 요소의 원본 및 CSS를 즉시 강조 표시합니다. 애플리케이션의 모든 페이지를 찾아보고, 렌더링된 태그의 원본을 빠르게 찾고, Visual Studio 환경 내에서 브라우저 도구를 사용할 수 있습니다.
이 자습서에서는 검사 모드를 사용하도록 설정한 다음 웹 프로젝트 내에서 CSS 규칙 및 텍스트를 빠르게 찾아 편집하는 방법을 보여 줍니다. 이 자습서에서는 Web Forms 애플리케이션 프로젝트를 사용하지만 웹 사이트 프로젝트 및 MVC 애플리케이션에 페이지 검사기 사용할 수도 있습니다.
자습서에는 다음 섹션이 있습니다.
사전 요구 사항
참고
최신 버전의 페이지 검사기 얻으려면 웹 플랫폼 설치 관리자를 사용하여 .NET 2.0용 Azure SDK를 설치합니다.
페이지 검사기 Microsoft Web 개발자 도구 함께 제공됩니다. 최신 버전은 1.3입니다. 사용 중인 버전을 검사 Visual Studio를 실행하고 도움말 메뉴에서 Microsoft Visual Studio 정보를 선택합니다.
웹 애플리케이션 만들기
먼저 페이지 검사기 사용할 웹 애플리케이션을 만듭니다. Visual Studio에서 파일>새 프로젝트를 선택합니다. 왼쪽에서 Visual C#을 확장하고 웹을 선택한 다음 ASP.NET Web Forms 애플리케이션을 선택합니다.
확인을 클릭합니다.
원본 보기에서 애플리케이션이 열립니다.
이제 작업할 애플리케이션이 있으므로 페이지 검사기 사용하여 검사하고 수정할 수 있습니다.
페이지 검사기 사용하여 애플리케이션 보기
다음으로, 페이지 검사기 사용하여 애플리케이션을 봅니다. 솔루션 탐색기 프로젝트를 마우스 오른쪽 단추로 클릭한 다음 페이지 검사기 보기를 선택합니다.
기본적으로 페이지 검사기 처음으로 시작되면 Visual Studio 환경 왼쪽에 좁은 창으로 도킹됩니다. 왼쪽에 도킹된 상태로 두고 편안한 너비로 설정하거나 위쪽, 아래쪽 또는 오른쪽의 도구 영역 중 하나에 도킹합니다.
페이지 검사기 창을 도킹 해제하는 경우 Visual Studio 외부에 배치하거나 두 번째 모니터가 있는 경우 두 번째 모니터에 배치할 수 있습니다. 그러나 페이지 검사기 창이 도킹 해제된 경우 페이지 검사기 Visual Studio 간에 ALT+TAB을 사용하려면 도구>옵션>환경>탭 및 Windows로 이동하고 Tab Well에서 부동 도구 창이라는 검사 상자의 선택을 취소하면 항상 기본 창 위에 유지됩니다.
페이지 검사기 창의 위쪽 창에는 브라우저 창의 현재 페이지가 표시됩니다. 아래쪽 창에는 왼쪽의 HTML 태그로 페이지가 표시되고, 오른쪽에는 페이지의 여러 측면을 검사할 수 있는 일부 탭이 표시됩니다. 아래쪽 창은 인터넷 Explorer F12 개발자 도구와 비슷합니다. 그러나 개발자 도구와 달리 Visual Studio 내에서 바로 페이지 검사기 사용할 수 있습니다.
이 자습서에서는 페이지 검사기 브라우저 창과 HTML 및 스타일 탭을 사용하여 애플리케이션을 빠르게 탐색하고 변경할 수 있습니다.
검사 모드 사용
다음으로 페이지 검사기 검사 모드의 작동 방식을 확인할 수 있습니다. 페이지 검사기 창에서 검사 단추를 클릭합니다.
작동 중인 검사 모드를 보려면 페이지 검사기 브라우저 창 내에서 페이지의 여러 부분으로 마우스를 이동합니다. 마찬가지로 마우스 포인터가 큰 더하기 기호로 변경되고 아래 요소가 강조 표시됩니다.
마우스 포인터를 이동할 때는
원본 보기의 콘텐츠가 변경되어 페이지에서 선택한 요소에 해당하는 태그가 표시됩니다. 관련 태그가 강조 표시됩니다. 원본이 다른 파일에 있는 경우 해당 파일이 원본 보기에서 열리고 관련 태그가 강조 표시됩니다.
페이지 검사기 HTML 탭에 표시되는 태그도 페이지에서 선택한 요소에 맞게 변경됩니다. HTML 탭에서 관련 태그가 설명되어 있습니다.
스타일 탭에는 현재 선택 영역과 관련된 CSS 규칙이 표시됩니다.
페이지 검사기 사용하여 태그 변경
이제 페이지 검사기 사용하여 위치가 즉시 명확하지 않을 수 있는 태그 또는 텍스트를 찾아서 변경하는 방법을 확인할 수 있습니다.
페이지 검사기 검사 모드로 전환한 다음 홈페이지 아래쪽으로 스크롤합니다.
바닥글 영역을 입력하는 즉시 페이지 검사기 다른 탭의 오른쪽에 있는 임시 탭의 원본 보기에서 Site.Master 레이아웃 파일을 열고 선택한 master 페이지의 섹션을 강조 표시합니다. 이는 페이지 검사기 원래 열었던 파일과 다른 파일에서 실제로 제공되는 콘텐츠를 페이지에서 찾고 표시하는 방법을 보여줍니다.
페이지 검사기 브라우저 창에서 저작권 알림이 포함된 줄 위로 마우스 포인터를 이동합니다.
Site.Master 페이지에서 해당 줄이 강조 표시됩니다.
Site.Master 파일의 줄 끝에 텍스트를 추가합니다.
<p>&복사; <%: DateTime.Now.Year %> - ASP.NET Application Rocks!</P>
이제 Ctrl+Alt+Enter를 누르거나 업데이트 표시줄을 클릭하여 페이지 검사기 브라우저 창에서 결과를 확인합니다.
바닥글이 Default.aspx 페이지에 있다고 생각했지만 master 레이아웃 페이지에 있는 것으로 밝혀졌고 페이지 검사기 찾을 수 있습니다.
검사 모드 및 HTML 창
다음으로 HTML 창과 요소를 매핑하는 방법을 간단히 살펴보겠습니다.
페이지 검사기 검사 모드로 전환합니다.
"여기 로고"라고 표시된 페이지의 위쪽 부분을 클릭합니다. 특정 요소를 더 자세히 검사하므로 마우스 포인터를 이동할 때 브라우저 창의 표시가 더 이상 변경되지 않습니다.
이제 마우스 포인터를 HTML 창으로 이동합니다. 마우스 포인터를 이동할 때 페이지 검사기 HTML 창 내의 요소를 윤곽선으로 표시하고 브라우저 창에서 해당 요소를 강조 표시합니다.
이전과 마찬가지로 페이지 검사기 임시 탭에서 Site.Master 파일을 엽니다. Site.Master 탭을 클릭하면 해당 태그가 머리글> 섹션에서 강조 표시됩니다<.
스타일 창에서 CSS 변경 내용 미리 보기
다음으로 페이지 검사기 스타일 창을 사용하여 CSS에 대한 변경 내용을 미리 보는 방법을 알아보세요.
검사 단추를 클릭하여 페이지 검사기 검사 모드로 전환합니다.
페이지 검사기 브라우저 창에서 div.content-wrapper 레이블이 나타날 때까지 마우스 포인터를 "홈 페이지" 섹션 위로 이동합니다.
div.content-wrapper 섹션 내에서 한 번 클릭한 다음 마우스 포인터를 스타일 창으로 이동합니다. .featured .content-wrapper 클래스 선택기에서 배경색 속성에 대한 확인란의 선택을 취소하고 선택합니다.
변경 내용이 페이지 검사기 브라우저 창에서 즉시 미리 보기되는 방식을 확인합니다.
확인란을 다시 선택한 다음 속성 값을 두 번 클릭하고 으로 red변경합니다. 변경 내용은 즉시 표시됩니다.
스타일 창을 사용하면 스타일시트 자체에 변경 내용을 커밋하기 전에 CSS 변경 내용을 쉽게 테스트하고 미리 볼 수 있습니다.
CSS 자동 동기화
참고
이 기능을 사용하려면 버전 1.3의 페이지 검사기 필요합니다.
CSS 자동 동기화 기능을 사용하면 CSS 파일을 직접 편집하고 페이지 검사기 브라우저에서 즉시 변경 내용을 볼 수 있습니다.
검사를 클릭하여 페이지 검사기 검사 모드로 전환합니다.
페이지 검사기 브라우저에서 div.content-wrapper 레이블이 나타날 때까지 마우스 포인터를 "홈 페이지" 섹션 위로 이동합니다. 한 번 클릭하여 이 요소를 선택합니다.
스타일 창에는 이 요소에 대한 모든 CSS 규칙이 표시됩니다. 아래로 스크롤하여 .featured .content-wrapper 클래스 선택기를 찾습니다. ".featured .content-wrapper"를 클릭합니다. 페이지 검사기 이 스타일(Site.css)을 정의하고 해당 CSS 스타일을 강조 표시하는 CSS 파일을 엽니다.
이제 의 값을 background-color "빨강"으로 변경합니다. 변경 내용은 페이지 검사기 브라우저에 즉시 표시됩니다.
CSS 색 선택기 사용
다음으로, 페이지 검사기 사용하여 기본 애플리케이션에서 강조 표시된 텍스트에 대한 CSS를 빠르게 찾고 변경하는 방법을 알아봅니다. 이 예제에서는 파란색 강조 표시가 마음에 들지 않고 다른 색으로 변경하기로 결정했습니다.
검사 단추를 클릭합니다.
페이지 검사기 브라우저 창에서 강조 표시된 "비디오, 자습서 및 샘플" 텍스트 위로 마우스 포인터를 이동하여 CSS "표시" 레이블이 표시되도록 합니다.
텍스트를 클릭하여 선택합니다. 해당 CSS 표시 선택기가 스타일 창의 아래쪽에 나타납니다.
표시 선택기를 클릭합니다. 그러면 웹 애플리케이션에 대한 Site.css 파일이 열립니다. Site.css 탭을 클릭하면 선택기에서 해당 CSS가 강조 표시됩니다.
배경색 속성을 사용하여 줄을 선택하고 제거합니다.
이제 새 Visual Studio 2012 CSS 색 선택기를 사용하여 배경색 표시 속성에 대한 새 색을 선택합니다.
Visual Studio 2012 CSS 색 선택기 사용
Visual Studio 2012의 CSS 편집기에는 색을 쉽게 선택하고 삽입할 수 있는 색 선택기가 있습니다. 간단한 색 막대와 보다 세밀한 컨트롤을 제공하는 "팝다운" 선택기가 있습니다.
색 선택기는 표준 색상표를 포함하고, 표준 색 이름, 해시 코드, RGB, RGBA, HSL 및 HSLA 색을 지원하며, 문서에서 가장 최근에 사용한 색 목록을 유지 관리합니다.
배경색 속성이 있던 줄에서 "bc"를 입력하고 아래쪽 화살표를 한 번 누릅니다.
"배경색"처럼 하이픈으로 구분된 속성에 각 단어의 첫 문자를 입력하면 IntelliSense는 일치하는 속성만 표시하도록 목록을 필터링합니다.
이제 콜론을 입력합니다. 이렇게 하면 전체 배경색 속성 이름이 삽입됩니다. 또는 rgb(를 입력 # 하면 색 선택기 막대가 나타납니다.
색 선택기 막대의 작동 방식을 확인하려면 마우스 포인터로 색을 클릭하거나 아래쪽 화살표 키를 누른 다음 왼쪽 및 오른쪽 화살표 키를 사용하여 색을 트래버스합니다. 색을 방문하면 배경색 속성에 해당하는 값이 미리 보기로 표시됩니다.
이때 Enter 키를 눌러 값을 선택한 다음 세미콜론(;)을 눌러 CSS 항목을 완료할 수 있습니다. 지금은 색 선택기 팝업의 작동 방식을 확인할 수 있도록 다음 섹션으로 이동합니다.
색 선택기 Pop-Down 사용
색 막대에 원하는 정확한 색이 없으면 색 선택기 팝업을 사용할 수 있습니다.
열려면 색 막대 오른쪽 끝에 있는 이중 펼침 단추를 클릭하거나 키보드에서 아래쪽 화살표를 한두 번 누릅니다.
오른쪽의 세로 막대에서 색을 클릭합니다. 기본 창에서 해당 색의 그라데이션을 표시합니다. Enter 키를 눌러 세로 막대에서 직접 색을 선택하거나 기본 창에서 아무 점이나 클릭하여 더 정밀하게 선택합니다.
사용하려는 색이 컴퓨터 화면에 있는 경우(Visual Studio 사용자 인터페이스 내에 있을 필요는 없음) 오른쪽 아래에 있는 스포이트 도구를 사용하여 해당 값을 캡처할 수 있습니다.
색 선택기 아래쪽의 슬라이더를 이동하여 색의 불투명도를 변경할 수도 있습니다. 이렇게 하면 RGBA 형식이 불투명도를 나타낼 수 있으므로 색 값이 RGBA 값으로 변경되었습니다.
색을 선택한 후 Enter 키를 누른 다음 세미콜론을 입력하여 Site.css 파일에서 배경색 항목을 완료합니다.
페이지 검사기 업데이트 표시줄
페이지 검사기 Site.css 파일(또는 애플리케이션의 모든 파일)에 대한 변경 내용을 즉시 검색하고 업데이트 표시줄에 경고를 표시합니다.
모든 파일을 저장하고 페이지 검사기 브라우저를 새로 고치려면 Ctrl+Alt+Enter를 누르거나 업데이트 표시줄을 클릭합니다. 강조 색의 변경 내용이 브라우저에 표시됩니다.
Visual Studio 환경 내에서 바로 페이지 검사기 브라우저를 편리하게 새로 고칩니다. 외부 브라우저 대신 페이지 검사기 사용하면 웹 애플리케이션을 개발할 때 편집기를 계속 사용할 수 있습니다.
참고 항목
페이지 검사기 소개(채널 9 비디오)
페이지 검사기 오류 메시지(MSDN)