Visual Web Developer의 HTML 편집기에서 요소의 서식 지정
업데이트: 2007년 11월
HTML 디자이너에서 작업하는 경우 편집기를 사용하여 요소의 서식을 지정할 수 있습니다. 이 항목에서는 태그 요소에 적용할 수 있는 편집기의 서식 지정 기능에 대해 설명합니다.
기본 서식
기본적으로 HTML 편집기를 사용하면 태그 서식을 원하는 대로 지정할 수 있으며 줄 바꿈과 들여쓰기도 사용자가 입력하는 그대로 유지할 수 있습니다. HTML 편집기에는 요소의 서식을 지정하는 데 사용할 수 있는 여러 가지 기능이 있습니다. 예를 들어 Tab 키를 눌러 줄을 들여쓰면 다음에 나오는 줄에도 들여쓰기가 적용됩니다. Shift+Tab을 사용하면 줄 들여쓰기를 제거할 수 있습니다. 페이지에 적용된 서식은 소스 뷰와 디자인 뷰 간을 전환할 때 그대로 유지됩니다.
소스 뷰의 편집기에서 탭을 처리하는 방식에 대한 기본 옵션을 설정할 수 있습니다. 자세한 내용은 옵션 대화 상자, 텍스트 편집기, HTML, 탭을 참조하십시오.
또한 사용자가 입력할 때 편집기에서 따옴표와 닫는 태그를 자동으로 삽입하는 옵션을 설정할 수 있습니다. 자세한 내용은 옵션 대화 상자, 텍스트 편집기, HTML, 서식을 참조하십시오.
서식과 현재 스키마
대문자 표시 및 특성에 따옴표 사용 등과 같은 특정 서식 옵션은 편집기에 대해 선택한 스키마로 재정의할 수 있습니다. 예를 들어 소문자 이름만 허용하는 XHTML 1.1 Strict 스키마를 선택하면 편집기에서는 대문자로 된 태그와 특성 이름을 소문자로 변환합니다.
서식 옵션 지정
요소를 만들 때 디자이너에서는 사용자가 설정할 수 있는 특정 옵션을 사용하여 새 요소의 서식을 지정합니다. 예를 들어 HTML 태그와 같은 클라이언트 요소는 기본적으로 소문자 태그 이름으로 만들어집니다. 다음과 같은 경우 서식 옵션이 적용됩니다.
도구 상자의 컨트롤을 페이지로 끌어 오는 경우
IntelliSense를 사용하여 소스 뷰에서 태그를 만드는 경우
속성 창 또는 속성 작성기에서 값을 설정하는 경우
클립보드의 요소를 붙여넣는 경우
디자인 뷰에서 표 삽입 대화 상자와 같은 대화 상자를 사용하여 태그를 생성하는 경우
선택 영역 또는 문서의 서식을 수동으로 지정하는 경우
서식 옵션을 설정하는 방법에 대한 자세한 내용은 옵션 대화 상자, 텍스트 편집기, HTML, 서식 및 기타, HTML, 텍스트 편집기, 옵션 대화 상자를 참조하십시오.
개별 태그에 대한 서식 옵션
태그에 대한 서식 옵션을 개별적으로 설정하여 HTML 디자이너에서 개별 태그의 서식을 지정하는 방식을 사용자 지정할 수도 있습니다. 태그 관련 서식을 사용하면 다음을 설정할 수 있습니다.
태그를 닫는 방식(예: 닫지 않음, 자동 닫기 또는 별도의 닫는 태그 사용)
태그 주위 및 태그 내부의 줄 바꿈
태그 들여쓰기 방식
개요 옵션
편집기의 태그 색 지정
자세한 내용은 태그별 옵션을 참조하십시오.
요청 시 서식 지정
바로 가기 메뉴 또는 편집 메뉴의 문서 서식 명령을 사용하여 언제든지 문서 또는 선택 영역의 서식을 지정할 수 있습니다. 이 메뉴의 다른 서식 지정 옵션에는 선택 영역을 대문자 또는 소문자로 변환하고 공백을 탭으로 변환(선택 영역의 공백을 탭으로)하거나 탭을 공백으로 변환(선택 영역의 탭을 공백으로)하는 옵션이 있습니다. 수동으로 서식을 지정하는 경우, 대/소문자를 변환하는 경우와 같이 규칙을 명시적으로 재정의하지 않으면 편집기에서는 사용자가 설정한 서식 지정 옵션을 사용합니다. 서식 지정 옵션을 변경하는 경우 문서의 서식을 다시 설정하여 기존 태그에 이 옵션을 적용할 수 있습니다.
공백 유지 규칙
편집기의 서식 지정 과정은 HTML이 브라우저에서 공백을 렌더링하는 방식과 관련이 있습니다. 따라서 편집기는 페이지의 렌더링 방식에 영향을 주는 요소의 서식을 변경하지 않습니다. 특히 각 태그 사이에 공백이 없는 태그로 작업하는 경우 편집기에서 이를 확인할 수 있습니다.
예를 들어 다음과 같이 두 개의 HTML 단추에 대한 태그가 페이지에 포함되어 있는 경우를 가정해 봅니다.
<input type="button" id="b1"><input type="button" id="b2">
페이지를 렌더링하면 두 개의 단추가 사이에 공백이 없는 상태로 표시됩니다. 편집기에서 문서의 서식을 지정하는 경우 두 태그를 각각 별도의 줄에 배치할 수 있습니다. 그러나 태그를 두 줄에 배치하면 페이지를 렌더링할 때 단추 사이에 공백이 나타날 수 있으므로 편집기는 태그를 이동하지 않습니다. 태그 사이에 수동으로 공백을 삽입하면 서식을 다시 적용해도 브라우저에서 단추가 렌더링되는 방식에 영향을 주지 않으므로 서식 지정을 통해 공백을 줄 바꿈으로 변경할 수 있습니다.
또한 내용과 닫는 태그 사이에서도 공백 규칙이 서식을 재정의합니다. 예를 들어 문서에 다음과 같은 table 요소가 모두 한 줄에 포함되어 있을 수 있습니다.
<table><tr><td>Hello, World</td></tr></table>
문서의 서식을 수동으로 다시 지정하면 다음과 같은 결과가 나타납니다.
<table>
<tr>
<td>
Hello, World</td>
</tr>
</table>
셀이 렌더링되는 방식에 영향을 줄 수 있으므로 닫는 </td> 태그가 다음 줄로 이동하지 않습니다. 그러나 "Hello, World"와 </td> 태그 사이에 수동으로 공백을 삽입하고 문서의 서식을 다시 지정하면 편집기에서 닫는 태그가 다음 줄로 이동됩니다.
인라인 코드 서식 지정
일반적으로 ASP.NET 웹 페이지의 서버 코드와 클라이언트 스크립트는 언어 편집기의 규칙에 따라 서식이 지정됩니다. 캐리지 리턴 동작, 줄 바꿈 생성, 들여쓰기 등은 모두 각 언어 포맷터의 영향을 받습니다. 예를 들어 Visual Basic 언어 포맷터는 Function 선언 다음에 나오는 줄을 자동으로 들여씁니다.
소스 뷰에서는 부모 요소를 기준으로 스크립트 블록을 한 수준 들여씁니다. <%#, <%$ 또는 <%= 태그로 시작하는 인라인 식은 서식이 지정되지 않고 사용자가 입력하는 그대로 유지됩니다. 그러나 <% %> 구분 기호를 사용하여 구분된 문 블록을 개별적으로 입력하면 편집기에서는 이 블록이 특정 언어의 들여쓰기 규칙을 사용하는 하나의 블록인 것처럼 서식을 지정합니다.