소스 뷰

Visual Studio 2010

업데이트: 2007년 11월

소스 뷰에는 웹 페이지의 편집 가능한 HTML 태그가 표시됩니다. 기본적으로 소스 뷰를 처음 선택하면 모든 HTML 요소와 스크립트가 표시됩니다. 디자인 뷰에서 웹 페이지를 편집할 때처럼 도구 상자에서 요소를 끌어 온 다음 문서에 삽입된 태그를 확인할 수 있습니다.

소스 뷰를 선택하려면 HTML 디자이너 창의 아래쪽에 있는 소스 탭을 클릭합니다.

소스 뷰를 사용하면 디자인 뷰를 사용할 경우와 비교하여 다음과 같은 이점이 있습니다.

  • 요소 및 컨트롤의 태그를 세부적으로 조정할 수 있습니다.

  • 문서의 서식을 원하는 대로 지정할 수 있습니다.

  • 본문에 없는 요소를 편집할 수 있습니다. 디자인 뷰에는 body 요소 사이에 있는 요소만 표시됩니다. 예를 들어 소스 뷰에서 작업 중인 경우에는 head 요소를 직접 편집할 수 있습니다.

  • 페이지 지시문을 편집할 수 있습니다.

  • 클라이언트 스크립트를 만들고 편집할 수 있습니다.

  • 코드 숨김 파일이 포함된 페이지와 달리 단일 파일 페이지로 작업하는 경우 페이지의 서버 코드를 편집할 수 있습니다.

디자인 뷰로 전환하면 소스 뷰에서 변경한 모든 내용이 즉시 반영됩니다.

dke0646y.alert_note(ko-kr,VS.100).gif참고:

일부 태그 오류가 발생하면 데이터 손실 등을 포함하여 편집기에 문제가 나타날 수 있으므로 디자인 뷰로 전환하지 못할 수 있습니다. 예를 들어 닫는 태그가 누락된 경우에는 편집기에 오류가 표시되고 뷰 전환이 중지됩니다. 오류에 대한 자세한 정보가 오류 목록 창에 표시됩니다. 디자인 뷰로 전환할 수 없더라도 페이지를 실행하여 미리 볼 수 있습니다.

소스 뷰에서는 요소 간에 이동하고 요소를 선택하는 데 사용할 수 있도록 다음과 같은 옵션을 제공합니다.

  • 태그 탐색기   태그 탐색기에는 현재 요소 및 이 요소가 포함된 부모 요소의 계층 구조가 표시됩니다. 태그 탐색기를 사용하면 포커스가 있는 요소를 확인하고 현재 요소에서 계층 구조의 상위 요소로 이동할 수 있습니다. 자세한 내용은 Visual Web Developer에서 HTML 편집기 태그 탐색을 참조하십시오.

  • 문서 개요   문서 개요 창을 사용하면 표시되지 않는 요소를 포함하여 문서의 모든 요소를 찾아서 선택할 수 있습니다. 자세한 내용은 방법: Visual Web Developer의 HTML 편집기에서 탐색을 참조하십시오.

소스 뷰에서 편집기는 문서의 잘못된 구문과 marks 태그, 특성 또는 값을 자동으로 검사합니다. 브라우저(예: Microsoft Internet Explorer) 또는 표준(예: XHTML 1.1 Strict) 형식의 유효성 검사 스키마를 선택할 수 있습니다. 자세한 내용은 Visual Web Developer에서 태그 유효성 검사를 참조하십시오.

IntelliSense는 입력을 완성하는 데 필요한 키워드가 포함된 드롭다운 목록을 표시하는 Visual Studio 기능입니다. 예를 들어 클래스 이름의 시작 부분을 입력하면 사용자가 입력한 문자로 시작하는 모든 클래스 이름이 포함된 드롭다운 목록이 표시됩니다.

소스 뷰에서는 ASP.NET 웹 서버 컨트롤, 태그, 페이지 지시문 및 클라이언트 스크립트를 포함하여 거의 모든 요소에 대한 IntelliSense가 편집기에 표시됩니다. 편집기에서 제공하는 IntelliSense는 현재 유효성 검사 스키마에 의해 제어되므로 현재 스키마에서 사용할 수 없는 태그, 특성 또는 값에 대해서는 IntelliSense가 제공되지 않습니다.

dke0646y.alert_note(ko-kr,VS.100).gif참고:

문 완성 기능을 해제할 수 있습니다. 자세한 내용은 옵션 대화 상자, 텍스트 편집기, HTML, 일반을 참조하십시오.

편집기에서는 문서 및 개별 태그의 서식을 지정할 수 있도록 다음과 같은 옵션을 제공합니다.

  • 요소 끌기 또는 붙여넣기   도구 상자의 요소를 끌거나 클립보드의 요소를 붙여넣는 경우 편집기에서는 사용자가 지정한 옵션에 따라 요소의 서식을 다시 설정하거나 이전에 설정된 서식 그대로 요소를 만들 수 있습니다. 자세한 내용은 기타, HTML, 텍스트 편집기, 옵션 대화 상자를 참조하십시오.

  • 따옴표 또는 닫는 태그 추가   편집기에서 특성 값 주위에 자동으로 따옴표를 삽입하고, 시작 태그가 끝나면 자동으로 닫는 태그를 작성하도록 옵션을 설정할 수 있습니다. 자세한 내용은 옵션 대화 상자, 텍스트 편집기, HTML, 서식을 참조하십시오.

  • 태그 서식 지정   요소를 만들 때 편집기에서 태그 서식을 지정하는 방식에 대한 규칙을 지정할 수 있습니다. 이러한 옵션에는 태그와 특성을 대문자로 바꾸는 방법과 줄 바꿈 위치 등이 포함됩니다. 자세한 내용은 태그별 옵션을 참조하십시오.

  • 요소 또는 문서 서식 지정   선택한 섹션 또는 문서 전체에 현재 서식 규칙을 적용할 수 있습니다.

  • 문서 개요 표시   요소를 확장/축소하여 편집기에서 추가 작업 공간을 만들 수 있습니다. 예를 들어 table 요소를 축소하여 표의 모든 행과 셀을 숨긴 다음 편집할 때 다시 확장할 수 있습니다. 요소를 수동으로 확장/축소하거나, 편집기에서 요소에 자동으로 개요를 추가하기 전의 요소 크기에 대한 규칙을 지정할 수 있습니다. 자세한 내용은 방법: Visual Web Developer에서 HTML 요소 확장 및 축소를 참조하십시오.

소스 뷰에서는 브라우저에서 실행되는 클라이언트 스크립트를 만들 수 있습니다. 단일 파일로 구성된 ASP.NET 웹 페이지로 작업 중인 경우에는 소스 뷰에서 페이지의 서버 코드를 편집할 수도 있습니다. ASP.NET 페이지의 클라이언트 스크립트에 대한 내용은 ASP.NET 웹 페이지의 클라이언트 스크립트를 참조하십시오. 단일 파일로 구성된 ASP.NET 페이지에 대한 내용은 ASP.NET 웹 페이지 코드 모델을 참조하십시오.

클라이언트 스크립트

다른 편집기를 사용할 때와 마찬가지로 클라이언트 스크립트를 요소의 일부로 또는 고유한 <script> 블록에 포함하여 작성할 수 있습니다. 스크립트 블록 내부에서 편집기는 현재 문서의 개체 모델 및 스크립트 블록에 대해 지정한 클라이언트 스크립팅 언어에 맞는 IntelliSense를 제공합니다. 언어를 지정하지 않으면 편집기에서 ECMAScript를 기본 언어로 가정합니다.

dke0646y.alert_note(ko-kr,VS.100).gif참고:

편집기에서는 클라이언트 스크립트의 유효성을 검사하지 않습니다.

편집기 창의 맨 위에는 드롭다운 목록이 두 개 표시됩니다. 클라이언트 스크립팅의 경우 왼쪽에 있는 드롭다운 목록에는 이벤트 처리기를 작성할 수 있는 문서 개체 목록이 표시되고 오른쪽에 있는 드롭다운 목록에는 선택한 개체에 대한 이벤트가 표시됩니다. 먼저 개체를 선택한 다음 이벤트를 선택하여 새 처리기를 만들 수 있습니다. 이미 처리기가 있는 이벤트는 굵게 표시됩니다.

클라이언트 스크립트를 탐색할 수 있도록 왼쪽 드롭다운 목록에 클라이언트 스크립트 옵션도 표시됩니다. 클라이언트 스크립트를 선택하면 오른쪽 드롭다운 목록에 클라이언트 스크립트 이벤트 처리기 목록이 표시됩니다. 처리기를 선택하여 해당 처리기로 바로 이동할 수 있습니다.

서버 코드

단일 파일 코드 모델을 사용하는 ASP.NET 웹 페이지에서 작업 중인 경우, 소스 뷰에서는 runat="server" 특성이 포함된 스크립트 블록에 페이지의 서버 코드가 표시됩니다.

dke0646y.alert_note(ko-kr,VS.100).gif참고:

서버 코드에는 언어 특성이 필요하지 않으며 @ Page 지시문에 페이지의 서버 코드 언어가 설정되어 있습니다.

서버 코드의 경우 페이지의 왼쪽 위에 있는 드롭다운 목록에는 코드를 작성할 수 있는 서버 컨트롤이 표시되고 오른쪽에 있는 드롭다운 목록에는 현재 선택한 컨트롤에 대한 이벤트 목록이 표시됩니다. 먼저 개체를 선택한 다음 이벤트를 선택하여 새 이벤트 처리기를 만들 수 있습니다. 이미 처리기가 있는 이벤트는 굵게 표시됩니다.

표시: