연습: Visual Web Developer에서의 고급 HTML 편집

아티클
10/22/2014

업데이트: 2007년 11월

Microsoft Visual Web Developer 웹 개발 도구에서는 웹 페이지를 만들기 위한 다양한 HTML 편집 기능을 제공합니다. 이 연습에서는 Visual Web Developer의 고급 HTML 편집 기능을 소개합니다.

참고:
HTML 편집에 대한 소개를 보려면 연습: Visual Web Developer에서 기본 HTML 편집을 참조하십시오.

이 연습에서 수행할 작업은 다음과 같습니다.

HTML 편집기에서 페이지 요소의 서식을 지정하는 방법에 대한 옵션 지정
만드는 HTML 편집기가 특정 브라우저와 호환되도록 지정하는 옵션 선택
페이지 개요 표시, 즉 편집기에서 간단하게 표시하는 축소 가능한 영역 만들기

사전 요구 사항

이 연습을 따라 하려면 다음과 같은 요건을 갖추어야 합니다.

Visual Web Developer 작업에 대한 일반적인 이해

Visual Web Developer에 대한 개요는 연습: Visual Web Developer에서 기본 HTML 편집를 참조하십시오.

웹 사이트 및 페이지 만들기

연습: Visual Web Developer에서 기본 HTML 편집를 완료하여 Visual Web Developer에서 웹 사이트를 이미 만들었으면 다음 단원으로 이동합니다. 그렇지 않으면, 다음 단계를 따라 새 웹 사이트와 페이지를 만듭니다.

파일 시스템 웹 사이트를 만들려면

Visual Web Developer를 엽니다.
파일 메뉴에서 새로 만들기를 가리킨 다음 웹 사이트를 클릭합니다.

새 웹 사이트 대화 상자가 나타납니다.
Visual Studio에 설치되어 있는 템플릿에서 ASP.NET 웹 사이트를 클릭합니다.
위치 상자에 웹 사이트의 페이지를 보관할 폴더의 이름을 입력합니다.

예를 들어, 폴더 이름 C:\WebSites를 입력합니다.
언어 목록에서 작업할 프로그래밍 언어를 클릭합니다.

확인을 클릭합니다.

Visual Web Developer에서 해당 폴더와 Default.aspx라는 새 페이지를 만듭니다.

참고:
기본적으로 Visual Web Developer에서는 코드 숨김 모델을 사용하여 ASP.NET 웹 페이지를 만듭니다. 자세한 내용은 ASP.NET 웹 페이지 코드 모델을 참조하십시오. 이 연습에서는 코드 숨김 페이지를 사용하지 않습니다.

태그 서식 지정

HTML 편집기에서는 필요에 따라 페이지에 있는 태그의 서식을 지정할 수 있는 다양한 옵션을 제공합니다. 다음과 같은 서식 옵션을 사용할 수 있습니다.

태그 및 특성 이름이 대문자 또는 소문자로 표시되는지 여부. HTML 태그 및 ASP.NET 웹 서버 컨트롤에 대해 별도로 옵션을 지정할 수 있습니다.
특성을 추가할 때 따옴표로 묶는지 여부
편집기에서 요소가 자동으로 닫히는지 여부. 자체 닫는 태그(예: <br />) 만들기, 여는 태그와 닫는 태그(<p></p>) 만들기 및 닫는 태그 자동 삽입 중에서 선택할 수 있습니다.
태그의 자식 요소를 들여쓰는 방식
태그의 앞뒤에서 줄 바꿈이 있는 위치

어떤 서식 옵션을 설정하든 페이지에 있는 태그의 레이아웃과 모양을 아주 쉽게 제어할 수 있다는 점이 HTML 서식의 중요한 특징입니다. 요소를 들여쓰는 것과 같이 요소의 서식을 수동으로 지정할 수 있으며, 태그 서식을 다시 지정하도록 명시적으로 요청하지 않는 한 지정한 서식이 편집기에서 그대로 유지됩니다.

이 연습 부분에서는 여러 가지 서식 옵션을 탐색하고 서로 다른 설정의 효과를 확인합니다. 또한 전체 페이지 또는 페이지 내의 선택 영역에 서식을 적용하는 방법을 배웁니다.

참고:
이 연습에서는 HTML 작업에 고유한 서식 기능만 검토합니다. Visual Web Developer 텍스트 편집기와 마찬가지로 HTML 편집기에서도 탭 크기 및 줄 바꿈 설정과 같이 모든 텍스트 편집에 적용되는 여러 옵션을 지원합니다. 일반적인 텍스트 편집 옵션에 대한 자세한 내용은 텍스트, 코드 및 태그 편집을 참조하십시오.

이 연습에서는 HTML 작업에 고유한 서식 기능만 검토합니다. Visual Web Developer 텍스트 편집기와 마찬가지로 HTML 편집기에서도 탭 크기 및 줄 바꿈 설정과 같이 모든 텍스트 편집에 적용되는 여러 옵션을 지원합니다. 일반적인 텍스트 편집 옵션에 대한 자세한 내용은 텍스트, 코드 및 태그 편집을 참조하십시오.

이 연습 부분에서는 페이지에 몇 가지 간단한 HTML을 추가하고 서식 옵션을 변경한 다음 HTML을 좀 더 추가합니다. 이를 통해 설정한 사항에 따라 HTML 서식 지정 방법이 어떻게 변경되는지 설명합니다.

기본 서식 옵션을 갖는 HTML 요소를 추가하려면

디자인 뷰로 전환합니다.
표 메뉴에서 표 삽입을 클릭한 다음 확인을 클릭합니다.

대화 상자에서 기본 설정을 변경하지 마십시오.

디자이너에서 각각 두 개의 열과 행으로 구성된 HTML 표를 만듭니다.
표 아래에서 페이지를 클릭합니다.
Enter 키를 여러 번 눌러 공백을 만든 다음 도구 상자의 HTML 그룹에서 Image 컨트롤을 페이지로 끌어 옵니다.
소스 뷰로 전환합니다.

페이지에 <table>및 <img> 요소가 삽입되었습니다.

기본적으로 디자이너에서는 태그와 특성 이름이 소문자이고 특성이 따옴표로 묶인 요소를 만듭니다.

이제 서식 옵션을 변경할 수 있습니다.

사용자 서식 및 유효성 검사 옵션을 변경하려면

도구 메뉴에서 옵션을 클릭합니다.
텍스트 편집기를 클릭하고 HTML을 확장한 다음 유효성 검사를 클릭합니다.
대상 목록에서 XHTML 1.0 Transitional을 클릭합니다.
서식을 클릭합니다.

태그별 옵션 단추를 클릭하여 서버 태그(ASP.NET 서버 컨트롤)와 클라이언트 태그(HTML 요소)에 대해 별도로 몇 가지 옵션을 설정할 수 있습니다.
클라이언트 태그 목록에서 대문자로를 클릭합니다.
서식을 지정할 때 특성 값 따옴표 삽입 및 입력할 때 특성 값 따옴표 삽입 확인란의 선택을 취소합니다.
확인을 클릭하여 편집기로 돌아갑니다.

서식 옵션을 변경했지만 페이지의 기존 태그는 바뀌지 않습니다.

이제 새 요소를 추가할 수 있습니다.

새 서식 옵션을 사용하여 HTML 요소를 추가하려면

소스 뷰에서 페이지 맨 아래로 스크롤합니다.
도구 상자의 HTML 그룹에서 Table 컨트롤을 페이지로 끌어온 다음 </form> 태그 위에 놓습니다.

이번에는 <TABLE> 요소의 태그가 대문자로 표시됩니다.
방금 만든 표 아래에 삽입 지점을 놓고 오른쪽 꺾쇠괄호(<)를 입력하여 새 태그를 시작합니다.

서식에서 설정한 옵션 때문에 목록에서 모든 태그 이름이 대문자로 표시됩니다.
목록에서 IMG를 두 번 클릭한 다음 스페이스바를 누릅니다.

<img> 태그의 특성 목록이 나타납니다. 서식 옵션을 설정할 때 클라이언트 특성을 기본 설정인 소문자로로 두었기 때문에 특성은 소문자로 표시됩니다.
속성에서 Src를 만들어진 그래픽 파일 이름인 graphic.gif로 설정하고, 이제 태그가 다음과 같이 표시되는지 확인합니다.
```
<IMG src=graphic.gif 
```
이전 절차에서 입력할 때 특성 값 따옴표 삽입 옵션을 사용하지 않도록 설정했기 때문에 편집기에서 특성을 따옴표로 묶지 않습니다.

참고:

특성 값에 공백이 포함된 경우처럼 특성에 따옴표가 필요한 경우에는 편집기에서 옵션 설정과 상관없이 따옴표를 삽입합니다.
슬래시(/)와 오른쪽 꺾쇠괄호(>)를 입력하여 <img> 태그를 닫습니다.

참고:
특성 값에 공백이 포함된 경우처럼 특성에 따옴표가 필요한 경우에는 편집기에서 옵션 설정과 상관없이 따옴표를 삽입합니다.

이 단원의 앞부분에서 설명한 것처럼 설정한 서식 옵션이 페이지의 기존 태그에는 적용되지 않았습니다. 그러나 원하는 경우 서식 설정을 페이지나 페이지의 개별 요소에 적용할 수 있습니다.

기존 요소에 서식을 적용하려면

소스 뷰에서 만든 첫 번째 표를 강조 표시하여 선택합니다.

편집 메뉴에서 고급을 가리키고 선택 영역 서식을 클릭합니다.

태그 이름이 대문자로 바뀝니다.

참고:
옵션 설정을 변경하더라도 편집기에서 따옴표를 제거하지 않습니다. 마찬가지로 태그를 닫는 방법에 대한 옵션을 변경하더라도 편집기에서 기존 태그의 종료 부분을 변경하지 않습니다.

이 예제에서는 HTML 편집기에서 서식이 지정되는 방법을 확인할 수 있습니다. 도구 상자나 속성과 같은 편집 도구를 사용하여 요소를 편집할 때, 편집기에서는 현재 서식 옵션을 사용하여 태그를 생성합니다. 그러나 기존 태그가 변경되지는 않습니다. 기존 태그에 새 서식 옵션을 적용하려는 경우 편집 메뉴 명령을 사용하여 수동으로 적용할 수 있습니다.

태그 서식 옵션 설정

지금까지 작업한 서식 옵션은 페이지의 모든 요소에 적용됩니다. 원하는 경우 개별 태그에 대해 서식 옵션을 지정할 수도 있습니다. 이는 특정 태그를 자주 사용하고 이러한 태그에 대해 기본 서식이 아닌 서식을 사용하려는 경우에 유용합니다. 태그별 서식 지정을 사용하면 다음 서식 옵션을 설정할 수 있습니다.

태그를 닫는 방식(예: 닫지 않음, 자체 종료 또는 별도의 닫는 태그 사용)
태그 앞뒤 및 안에서 줄 바꿈을 사용하는 방식

태그의 자식 요소를 들여쓰는 방식

참고:
사용자가 지정하는 태그별 서식 규칙보다 HTML 편집기에서 태그 렌더링을 변경하지 않는다는 규칙이 우선할 수 있습니다. 태그 서식 규칙에서 태그가 렌더링되는 방법을 변경하는 경우에 해당 규칙은 무시됩니다.

이 연습 부분에서는 몇 가지 태그 서식 옵션을 설정하고 편집기에서 이 옵션이 처리되는 방법을 확인합니다. 지금까지는 <table> 요소와 같은 HTML 요소를 사용했습니다. 이제 몇 가지 ASP.NET 서버 컨트롤을 사용할 것이므로 서식 옵션이 컨트롤과 요소에 똑같이 적용됨을 확인할 수 있습니다.

먼저 특정 형식의 태그 모두에 적용되는 옵션을 설정합니다. 다음 형식의 요소에 대해 옵션을 설정할 수 있습니다.

br 및 input 등 콘텐츠가 없는 HTML 요소
table 및 span 등 콘텐츠를 가질 수 있는 HTML 요소
asp:image 등 콘텐츠를 가질 수 없는 서버 요소(asp:)
asp:textbox 등 콘텐츠를 가질 수 있는 서버 요소

보안 정보:
TextBox 컨트롤은 사용자 입력을 허용하므로 보안상 위험할 수 있습니다. 기본적으로 ASP.NET 페이지에서는 사용자 입력 내용에 스크립트나 HTML 요소가 포함되어 있지 않은지 유효성을 검사합니다. 자세한 내용은 스크립트 악용 개요를 참조하십시오.

이 단원에서는 먼저 HTML 표를 추가합니다. 그런 다음 테이블 요소의 태그 서식 규칙을 변경하고, 문서의 서식을 다시 지정하여 서식 규칙 변경의 효과를 확인합니다.

HTML 표의 태그 서식 규칙을 설정하려면

소스 뷰 창의 빈 부분에서 마우스 오른쪽 단추를 클릭한 다음 사용자 서식 및 유효성 검사를 클릭합니다.

옵션 대화 상자에 앞 단원에서 설정한 서식 옵션이 표시됩니다.
클라이언트 태그 목록에서 소문자로를 클릭하여 클라이언트 태그의 서식을 다시 설정합니다.
확인을 클릭하여 옵션 대화 상자를 닫습니다.
도구 상자의 HTML 그룹에서 Table 컨트롤을 페이지로 끌어 옵니다.

편집기에서 두 개의 행(<tr> 요소)과 각 행에 두 개의 셀(<td> 요소)이 있는 <table> 요소를 만듭니다. 각 태그가 별도의 줄에 표시됩니다.
```
<table>
    <tr>
        <td>
       </td>
    </tr>
```
창의 빈 부분에서 마우스 오른쪽 단추를 클릭한 다음 사용자 서식 및 유효성 검사를 클릭합니다.
태그별 옵션 단추를 클릭합니다.
기본 설정을 확장합니다.

**클라이언트 태그가 콘텐츠를 지원하지 않습니다.**로 시작하는 태그 형식 목록이 나타납니다. 목록에서 항목을 선택하여 클라이언트 및 서버 요소, 콘텐츠가 있는 요소(예: table 요소), 그리고 콘텐츠가 없는 요소(예: img 요소)에 대해 서로 다른 옵션을 설정할 수 있습니다.
**클라이언트 태그가 콘텐츠를 지원합니다.**를 클릭합니다.

태그에서 별도의 닫는 태그가 사용되고 태그의 앞뒤와 안쪽에 줄 바꿈이 포함되는 것이 기본 설정입니다.
클라이언트 HTML 태그를 확장합니다.
td를 클릭합니다.

td 태그의 서식이 지정되는 방법을 변경하는 옵션을 설정합니다.
줄 바꿈 목록에서 없음을 클릭합니다.
확인을 클릭하여 태그별 옵션 대화 상자를 닫은 후 확인을 클릭하여 옵션 대화 상자를 닫습니다.
편집 메뉴에서 고급을 가리키고 문서 서식을 클릭합니다.

문서의 서식이 다시 지정됩니다. 다음과 같이 표에서 추가된 <td> 태그가 같은 줄에 배치됩니다.
```
<table>
    <tr>
        <td></td><td></td><td></td>
```

ASP.NET 서버 컨트롤에 대해 태그별 옵션을 사용할 수 있습니다.

ASP.NET 서버 컨트롤의 서식 옵션을 설정하려면

디자인 뷰로 전환합니다.
도구 상자의 표준 그룹에서 ListBox 컨트롤을 페이지로 끌어 옵니다.
ListBox 작업 대화 상자에서 항목 편집을 클릭합니다.

ListItem 컬렉션 편집기 대화 상자가 나타납니다.
추가를 두 번 클릭하여 두 개의 항목을 추가합니다.
멤버 아래에서 첫 번째 ListItem을 클릭한 후, ListItem 속성에서 Text를 Item 1로 설정합니다.
멤버 아래에서 첫 번째 ListItem을 클릭한 후, ListItem 속성에서 Text를 Item 2로 설정합니다.
확인을 클릭하여 ListItem 컬렉션 편집기 대화 상자를 닫습니다.

소스 뷰로 전환합니다.

컨트롤 서식이 다음과 같이 지정되었습니다.

<asp:Listbox ID="ListBox1" >
   <asp:ListItem>Item 1</asp:Listitem>
   <asp:ListItem>Item 2</asp:Listitem>
</asp:Listbox>

창의 빈 부분에서 마우스 오른쪽 단추를 클릭한 다음 사용자 서식 및 유효성 검사를 클릭합니다.
태그별 옵션 단추를 클릭합니다.
태그별 옵션 대화 상자에서 ASP.NET 컨트롤을 클릭한 다음 새 태그를 클릭합니다.
태그 이름 상자에 asp:listitem을 입력합니다.

태그 이름 속에 오른쪽 및 왼쪽 꺾쇠괄호(< 및 >)를 입력하지 마십시오.

ListBox 컨트롤 내부에서 사용되는 asp:ListItem 요소의 옵션을 설정합니다. asp:ListBox 요소의 콘텐츠(자식) 서식을 지정하는 방법을 제어할 것이므로 asp:ListBox 요소의 옵션은 설정하지 않습니다.
확인을 클릭하여 새 태그 대화 상자를 닫습니다.
줄 바꿈 목록에서 없음을 클릭합니다.

그러면 컨트롤에 줄 바꿈이 포함되지 않습니다.
확인을 클릭하여 태그별 옵션 대화 상자를 닫은 후 확인을 클릭하여 옵션 대화 상자를 닫습니다. 이제 새 서식 옵션의 효과를 확인할 수 있습니다.

새 서식 옵션을 사용하여 ASP.NET 서버 컨트롤을 추가하려면

디자인 뷰로 전환합니다.
도구 상자의 표준 그룹에서 두 번째 ListBox 컨트롤을 페이지로 끌어 옵니다.
ListBox 작업 메뉴에서 항목 편집을 클릭합니다.
ListBox 컨트롤의 경우, 이전 단원에서처럼 두 개의 항목을 만듭니다.
소스 뷰로 전환합니다.

<asp:ListItem> 요소가 모두 한 줄에 표시됩니다. 태그 줄 바꿈이 80자로 설정되어 있으므로 </asp:ListBox> 요소는 다음 줄에 표시됩니다. 이 값은옵션 대화 상자에서 수정할 수 있습니다. 두 개의 컨트롤만 사용하고 하나의 서식 옵션(줄 바꿈)만 변경했지만 일반적으로 사용하는 요소에 옵션을 적용하는 방법을 알 수 있습니다.

요소 개요 표시

소스 뷰에서는 요소를 사용하지 않을 때 작업에 방해되지 않도록 요소를 축소 및 확장하여 개요를 표시할 수 있습니다. 이는 많은 공간을 차지하는 경우가 많은 표와 같은 요소에 특히 유용합니다. 또한 페이지의 모든 요소에 대해 축소 기능을 사용할 수 있습니다.

요소의 개요를 표시하려면

소스 뷰로 전환합니다.
앞에서 추가한 표 중 하나를 선택합니다.
- 표가 더 이상 없으면 도구 상자의 HTML 그룹에서 Table을 페이지로 끌어 옵니다.
편집 메뉴에서 개요를 가리킨 다음 선택 영역 숨기기를 클릭합니다.

<table> 태그가 축소되고 더하기 기호(+)가 여백에 표시됩니다.
더하기 기호를 클릭하여 표 요소를 확장합니다. 또한 요소가 특정 크기를 초과하면 더하기(+)와 빼기(-) 기호가 여백에 자동으로 표시되도록 요소를 구성할 수 있습니다.

요소의 개요가 자동으로 표시되는 방식을 구성하려면

페이지를 마우스 오른쪽 단추로 클릭하고 사용자 서식 및 유효성 검사, 서식 및 태그별 옵션 단추를 차례로 클릭합니다.
태그별 옵션 대화 상자에서 클라이언트 HTML 태그를 확장한 다음 table을 클릭합니다.
코드 편집기 개요에서 최소 줄 수 상자에 5를 입력합니다.
확인을 클릭한 후 확인을 다시 클릭합니다.

기존 표와 새로 추가된 표에서 줄이 다섯 개를 넘으면 개요가 자동으로 표시됩니다.

HTML 유효성 검사

HTML 편집기에서는 HTML의 유효성을 검사하거나 HTML이 특정 브라우저의 규칙이나 XHTML과 같은 표준에 맞는지 확인할 수 있습니다. 예를 들어, 편집기에서는 Netscape Navigator 4.0에서 허용하지 않거나 XHTML 표준에 맞지 않는 태그 및 특성을 찾을 수 있습니다. 이 연습 부분에서는 여러 가지 스키마(브라우저 형식 또는 표준)를 사용하고 여러 유형의 사소한 오류를 도입하여 편집기에서 오류에 플래그를 표시하는 방식을 확인합니다.

편집기에서 유효성을 검사하려면

소스 뷰에서 Default.aspx 페이지로 전환하거나 이 페이지를 엽니다.
HTML 소스 편집 도구 모음에서 Internet Explorer 3.02/Netscape Navigator 3.0을 클릭합니다.
페이지 맨 아래로 스크롤합니다.
</form> 태그 내부에 다음 HTML을 입력합니다.
```
<font face=arial>
<a href=Default.aspx >Default Page </a>
</font>
```
입력할 때 Microsoft IntelliSense 기술을 사용하여 태그를 완료하는 데 도움을 받을 수 있습니다.
HTML 소스 편집 도구 모음의 목록에서 **XHTML 1.0 Transitional (Netscape 7, Opera 7, Internet Explorer 6)**을 클릭합니다.

유효성 검사가 백그라운드 작업으로 수행되므로 잠깐 동안 일시 중지된 후 여러 태그 부분 밑에 물결 모양의 빨간색 선이 표시됩니다. 맞춤법 검사기와 마찬가지로 HTML 유효성 검사 기능은 페이지에서 현재 선택된 브라우저에 대해 허용되지 않는 태그를 찾아냅니다.
<font> 태그에서 마우스 포인터를 font라는 단어 위에 놓습니다.

font 요소가 오래된 항목으로 간주된다는 내용의 도구 설명이 표시됩니다. 현재 표준에 따르려면 텍스트 서식에 CSS 스타일시트를 사용하는 것이 좋습니다. 예를 들어, <span style="font-name:Arial;">을 입력합니다.
<a> 태그의 href 특성에서 마우스 포인터를 Default.aspx 위에 놓습니다

도구 설명에 현재 스키마에서는 특성을 따옴표로 묶어야 한다고 표시됩니다.
Default.aspx를 따옴표(" ")로 묶습니다.

href 특성의 값에는 더 이상 밑줄이 표시되지 않습니다. 앵커 태그나 URL이 필요한 다른 태그에 대해 상대 참조를 사용할 경우, 유효성 검사에서는 대상 요소를 사용할 수 있는지 여부를 확인합니다.
작업 중인 HTML의 아래 줄에서 오른쪽 꺾쇠괄호(<)를 입력합니다.

IntelliSense 드롭다운 목록이 나타나지만, XHTML 스키마에서 font 요소가 올바르지 않으므로 이 목록에 font 요소는 제공되지 않습니다.
오른쪽 꺾쇠괄호(<)를 삭제합니다.

유효성 검사 옵션 설정

유효성 검사에서 표시하는 오류 유형을 제어할 수 있습니다. 이는 특정 유형의 오류가 특정 스키마에서 허용되더라도 유효성 검사에서 이 오류를 찾도록 하려는 경우에 유용합니다.

유효성 검사 옵션을 설정하려면

소스 뷰에서 페이지의 아무 위치나 마우스 오른쪽 단추로 클릭한 후 사용자 서식 및 유효성 검사를 클릭합니다.

참고:

사용자 서식 및 유효성 검사 명령은 소스 뷰에서만 사용할 수 있습니다.
옵션 대화 상자에서 유효성 검사를 클릭합니다.

오류 표시 확인란의 선택 여부와 상관없이 확인란의 오류 표시는 사용되지 않습니다. 이는 현재 스키마가 XHTML이기 때문인데, 이 스키마에서는 일어날 수 있는 모든 유효성 검사 오류를 이미 표시하고 있습니다.
대상 목록에서 Internet Explorer 6을 클릭합니다.
오류 표시 확인란이 선택되었는지 확인한 다음 오류 표시 아래에서 모든 확인란을 선택합니다.
확인을 클릭하여 편집기로 돌아갑니다.
이전 절차에서 입력한 HTML을 선택하고 편집 메뉴에서 대문자로를 클릭합니다.

잠시 일시 중지된 후 태그 이름에 밑줄이 표시됩니다. 마우스 포인터를 태그 이름 위에 놓으면 이름에 대문자가 포함되어 있다는 도구 설명이 표시됩니다. 일반적으로 Internet Explorer 6에서 대문자 태그 이름을 사용할 수 있지만, 해당 스키마에 대한 유효성 검사 옵션을 변경했기 때문에 지금 이 유효성 검사 오류가 표시됩니다.

참고:
사용자 서식 및 유효성 검사 명령은 소스 뷰에서만 사용할 수 있습니다.

유효성 검사에서 중복된 컨트롤 ID, 교차된 여는 태그와 닫는 태그(예: <b><i></b></i>) 등과 같은 많은 다른 오류 유형도 찾을 수 있습니다. 그러나 편집기의 유효성 검사로 인해 원하는 HTML 코드를 작성할 수 없게 되지는 않습니다. 유효성 검사에서는 지정된 브라우저의 규칙에 맞지 않는 태그를 식별할 뿐입니다.

ASP.NET 페이지가 실행될 때, 결과 출력에는 만드는 HTML 요소뿐 아니라 ASP.NET 서버 컨트롤에서 렌더링되는 HTML과 페이지에 작성하는 모든 코드도 포함된다는 점에 유의해야 합니다. 유효성 검사에서 이러한 동적 요소의 출력을 검사할 수 없습니다. 즉, 편집기에서 생성된 출력의 유효성을 검사할 수 없습니다. 기본적으로 ASP.NET 컨트롤에서는 XHTML 1.1 표준에 맞는 출력을 생성합니다. 따라서 이 출력은 대부분의 브라우저에 적합합니다. ASP.NET 컨트롤에서 생성되는 태그에 대한 자세한 내용은 ASP.NET 및 XHTML을 참조하십시오.

다음 단계

이 연습에서는 HTML 편집기의 고급 기능에 대해 소개했습니다. 이 연습에서는 모든 기능을 보여준 것은 아니지만, 서식 옵션, 개요 및 유효성 검사를 사용하여 태그에 대한 제어 기능을 유지하면서도 올바른 형식의 사용자 지정 서식 태그를 작성하는 방법에 대해 설명했습니다.

참고 항목

개념

Visual Web Developer의 XHTML

Visual Web Developer에서 태그 유효성 검사

기타 리소스

텍스트, 코드 및 태그 편집

기술 지원 및 내게 필요한 옵션

다음을 통해 공유