소스 뷰
업데이트: 2007년 11월
소스 뷰에는 웹 페이지의 편집 가능한 HTML 태그가 표시됩니다. 기본적으로 소스 뷰를 처음 선택하면 모든 HTML 요소와 스크립트가 표시됩니다. 디자인 뷰에서 웹 페이지를 편집할 때처럼 도구 상자에서 요소를 끌어 온 다음 문서에 삽입된 태그를 확인할 수 있습니다.
소스 뷰를 선택하려면 HTML 디자이너 창의 아래쪽에 있는 소스 탭을 클릭합니다.
소스 뷰를 사용하면 디자인 뷰를 사용할 경우와 비교하여 다음과 같은 이점이 있습니다.
요소 및 컨트롤의 태그를 세부적으로 조정할 수 있습니다.
문서의 서식을 원하는 대로 지정할 수 있습니다.
본문에 없는 요소를 편집할 수 있습니다. 디자인 뷰에는 body 요소 사이에 있는 요소만 표시됩니다. 예를 들어 소스 뷰에서 작업 중인 경우에는 head 요소를 직접 편집할 수 있습니다.
페이지 지시문을 편집할 수 있습니다.
클라이언트 스크립트를 만들고 편집할 수 있습니다.
코드 숨김 파일이 포함된 페이지와 달리 단일 파일 페이지로 작업하는 경우 페이지의 서버 코드를 편집할 수 있습니다.
디자인 뷰로 전환하면 소스 뷰에서 변경한 모든 내용이 즉시 반영됩니다.
.gif "참고") 참고: |
|---|
일부 태그 오류가 발생하면 데이터 손실 등을 포함하여 편집기에 문제가 나타날 수 있으므로 디자인 뷰로 전환하지 못할 수 있습니다. 예를 들어 닫는 태그가 누락된 경우에는 편집기에 오류가 표시되고 뷰 전환이 중지됩니다. 오류에 대한 자세한 정보가 오류 목록 창에 표시됩니다. 디자인 뷰로 전환할 수 없더라도 페이지를 실행하여 미리 볼 수 있습니다. |
소스 뷰에서 탐색
소스 뷰에서는 요소 간에 이동하고 요소를 선택하는 데 사용할 수 있도록 다음과 같은 옵션을 제공합니다.
태그 탐색기 태그 탐색기에는 현재 요소 및 이 요소가 포함된 부모 요소의 계층 구조가 표시됩니다. 태그 탐색기를 사용하면 포커스가 있는 요소를 확인하고 현재 요소에서 계층 구조의 상위 요소로 이동할 수 있습니다. 자세한 내용은 Visual Web Developer에서 HTML 편집기 태그 탐색을 참조하십시오.
문서 개요 문서 개요 창을 사용하면 표시되지 않는 요소를 포함하여 문서의 모든 요소를 찾아서 선택할 수 있습니다. 자세한 내용은 방법: Visual Web Developer의 HTML 편집기에서 탐색을 참조하십시오.
유효성 검사
소스 뷰에서 편집기는 문서의 잘못된 구문과 marks 태그, 특성 또는 값을 자동으로 검사합니다. 브라우저(예: Microsoft Internet Explorer) 또는 표준(예: XHTML 1.1 Strict) 형식의 유효성 검사 스키마를 선택할 수 있습니다. 자세한 내용은 Visual Web Developer에서 태그 유효성 검사를 참조하십시오.
IntelliSense
IntelliSense는 입력을 완성하는 데 필요한 키워드가 포함된 드롭다운 목록을 표시하는 Visual Studio 기능입니다. 예를 들어 클래스 이름의 시작 부분을 입력하면 사용자가 입력한 문자로 시작하는 모든 클래스 이름이 포함된 드롭다운 목록이 표시됩니다.
소스 뷰에서는 ASP.NET 웹 서버 컨트롤, 태그, 페이지 지시문 및 클라이언트 스크립트를 포함하여 거의 모든 요소에 대한 IntelliSense가 편집기에 표시됩니다. 편집기에서 제공하는 IntelliSense는 현재 유효성 검사 스키마에 의해 제어되므로 현재 스키마에서 사용할 수 없는 태그, 특성 또는 값에 대해서는 IntelliSense가 제공되지 않습니다.
| 참고: |
|---|
문 완성 기능을 해제할 수 있습니다. 자세한 내용은 옵션 대화 상자, 텍스트 편집기, HTML, 일반을 참조하십시오. |
서식 지정
편집기에서는 문서 및 개별 태그의 서식을 지정할 수 있도록 다음과 같은 옵션을 제공합니다.
요소 끌기 또는 붙여넣기 도구 상자의 요소를 끌거나 클립보드의 요소를 붙여넣는 경우 편집기에서는 사용자가 지정한 옵션에 따라 요소의 서식을 다시 설정하거나 이전에 설정된 서식 그대로 요소를 만들 수 있습니다. 자세한 내용은 기타, HTML, 텍스트 편집기, 옵션 대화 상자를 참조하십시오.
따옴표 또는 닫는 태그 추가 편집기에서 특성 값 주위에 자동으로 따옴표를 삽입하고, 시작 태그가 끝나면 자동으로 닫는 태그를 작성하도록 옵션을 설정할 수 있습니다. 자세한 내용은 옵션 대화 상자, 텍스트 편집기, HTML, 서식을 참조하십시오.
태그 서식 지정 요소를 만들 때 편집기에서 태그 서식을 지정하는 방식에 대한 규칙을 지정할 수 있습니다. 이러한 옵션에는 태그와 특성을 대문자로 바꾸는 방법과 줄 바꿈 위치 등이 포함됩니다. 자세한 내용은 태그별 옵션을 참조하십시오.
요소 또는 문서 서식 지정 선택한 섹션 또는 문서 전체에 현재 서식 규칙을 적용할 수 있습니다.
문서 개요 표시 요소를 확장/축소하여 편집기에서 추가 작업 공간을 만들 수 있습니다. 예를 들어 table 요소를 축소하여 표의 모든 행과 셀을 숨긴 다음 편집할 때 다시 확장할 수 있습니다. 요소를 수동으로 확장/축소하거나, 편집기에서 요소에 자동으로 개요를 추가하기 전의 요소 크기에 대한 규칙을 지정할 수 있습니다. 자세한 내용은 방법: Visual Web Developer에서 HTML 요소 확장 및 축소를 참조하십시오.
클라이언트 스크립트 및 서버 코드 작성
소스 뷰에서는 브라우저에서 실행되는 클라이언트 스크립트를 만들 수 있습니다. 단일 파일로 구성된 ASP.NET 웹 페이지로 작업 중인 경우에는 소스 뷰에서 페이지의 서버 코드를 편집할 수도 있습니다. ASP.NET 페이지의 클라이언트 스크립트에 대한 내용은 ASP.NET 웹 페이지의 클라이언트 스크립트를 참조하십시오. 단일 파일로 구성된 ASP.NET 페이지에 대한 내용은 ASP.NET 웹 페이지 코드 모델을 참조하십시오.
클라이언트 스크립트
다른 편집기를 사용할 때와 마찬가지로 클라이언트 스크립트를 요소의 일부로 또는 고유한 <script> 블록에 포함하여 작성할 수 있습니다. 스크립트 블록 내부에서 편집기는 현재 문서의 개체 모델 및 스크립트 블록에 대해 지정한 클라이언트 스크립팅 언어에 맞는 IntelliSense를 제공합니다. 언어를 지정하지 않으면 편집기에서 ECMAScript를 기본 언어로 가정합니다.
| 참고: |
|---|
편집기에서는 클라이언트 스크립트의 유효성을 검사하지 않습니다. |
편집기 창의 맨 위에는 드롭다운 목록이 두 개 표시됩니다. 클라이언트 스크립팅의 경우 왼쪽에 있는 드롭다운 목록에는 이벤트 처리기를 작성할 수 있는 문서 개체 목록이 표시되고 오른쪽에 있는 드롭다운 목록에는 선택한 개체에 대한 이벤트가 표시됩니다. 먼저 개체를 선택한 다음 이벤트를 선택하여 새 처리기를 만들 수 있습니다. 이미 처리기가 있는 이벤트는 굵게 표시됩니다.
클라이언트 스크립트를 탐색할 수 있도록 왼쪽 드롭다운 목록에 클라이언트 스크립트 옵션도 표시됩니다. 클라이언트 스크립트를 선택하면 오른쪽 드롭다운 목록에 클라이언트 스크립트 이벤트 처리기 목록이 표시됩니다. 처리기를 선택하여 해당 처리기로 바로 이동할 수 있습니다.
서버 코드
단일 파일 코드 모델을 사용하는 ASP.NET 웹 페이지에서 작업 중인 경우, 소스 뷰에서는 특성이 포함된 스크립트 블록에 페이지의 서버 코드가 표시됩니다.
| 참고: |
|---|
서버 코드에는 언어 특성이 필요하지 않으며 @ Page 지시문에 페이지의 서버 코드 언어가 설정되어 있습니다. |
서버 코드의 경우 페이지의 왼쪽 위에 있는 드롭다운 목록에는 코드를 작성할 수 있는 서버 컨트롤이 표시되고 오른쪽에 있는 드롭다운 목록에는 현재 선택한 컨트롤에 대한 이벤트 목록이 표시됩니다. 먼저 개체를 선택한 다음 이벤트를 선택하여 새 이벤트 처리기를 만들 수 있습니다. 이미 처리기가 있는 이벤트는 굵게 표시됩니다.