연습: Visual Web Developer에서 기본 HTML 편집

아티클
10/22/2014

업데이트: 2007년 11월

Microsoft Visual Web Developer 웹 개발 도구에서는 WYSIWYG 모드로 작업하여 웹 페이지를 시각화하고 HTML 태그를 직접 편집하여 웹 페이지를 세밀하게 조정할 수 있도록 해주는 강력한 HTML 편집 기능을 제공합니다. 이 연습에서는 Visual Web Developer의 HTML 편집 기능을 소개합니다.

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

디자인 뷰에서 HTML 만들기 및 편집
소스 뷰에서 HTML 만들기 및 편집
분할 뷰 사용
탐색 도구를 사용하여 HTML 태그 사이를 빠르게 이동

사전 요구 사항

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

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

Visual Web Developer에서 웹 페이지를 만드는 방법에 대한 소개는 연습: Visual Web Developer에서 기본 웹 페이지 만들기를 참조하십시오.

이 연습에서는 연습: Visual Web Developer에서 기본 웹 페이지 만들기에서 만든 것과 비슷한 웹 사이트와 단일 ASP.NET 웹 페이지를 사용합니다. 해당 연습을 완료한 경우 이 웹 사이트와 페이지를 사용할 수 있습니다.

웹 사이트 및 페이지 만들기

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

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

Visual Web Developer를 엽니다.
파일 메뉴에서 새 웹 사이트를 클릭합니다.

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

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

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

디자인 뷰에서 작업

이 연습 부분에서는 WYSIWYG와 유사한 페이지 뷰를 제공하는 디자인 뷰에서 작업하는 방법을 배웁니다. 워드 프로세서 프로그램에서처럼 텍스트를 입력하여 추가할 수 있습니다. 서식 명령을 직접 사용하거나 인라인 스타일을 만들어 텍스트 서식을 지정할 수 있습니다.

디자인 뷰와 브라우저에서 페이지가 표시되는 방식은 유사하지만 몇 가지 차이점이 있습니다. 첫 번째 차이는 디자인 뷰에서는 텍스트와 요소를 편집할 수 있다는 점입니다. 두 번째 차이는 디자인 뷰에서는 페이지 편집을 돕기 위해 브라우저에 나타나지 않은 몇 가지 요소와 컨트롤이 표시된다는 점입니다. 또한, HTML 표와 같은 일부 요소에는 편집기를 위한 별도의 공간을 추가하는 특수한 디자인 뷰 렌더링 기능이 있습니다. 결국 디자인 뷰는 페이지를 시각화하는 데는 유용하지만 페이지가 브라우저에서 렌더링되는 방식을 정확하게 나타내지는 않습니다.

디자인 뷰에서 정적 HTML을 추가하고 서식을 지정하려면

디자인 뷰에 있지 않은 경우 창의 왼쪽 아래에 있는 디자인을 클릭합니다.
페이지 맨 위에 ASP.NET 웹 페이지를 입력합니다.
텍스트를 선택하여 강조 표시한 후 스타일 적용 도구 모음에서 제목 1을 클릭합니다.
ASP.NET 웹 페이지 아래에 삽입 포인터를 놓고 이 페이지는 ASP.NET으로 구동됩니다.를 입력합니다.
텍스트를 선택하여 강조 표시한 후 서식 메뉴에서 새 스타일을 클릭합니다.

새 스타일 대화 상자가 나타납니다.
선택한 문서 영역에 새 스타일 적용 확인란을 클릭하여 선택합니다.
font-family 드롭다운 목록에서 글꼴을 선택한 다음 적용을 클릭합니다.

선택한 텍스트에 글꼴 패밀리가 적용됩니다.
범주에서 블록을 클릭한 다음 line-height 드롭다운 목록에서 **(값)**을 선택합니다. 줄 높이 값을 입력합니다.
letter-spacing 드롭다운 목록에서 **(값)**을 선택합니다. 문자 간격 값을 입력합니다. 적용을 클릭하여 선택한 텍스트에 값이 적용되는지 확인합니다.
확인을 클릭합니다.

태그 정보 보기

디자인 뷰에서 작업하면 div, span 및 비주얼 렌더링 기능이 없는 다른 태그와 같은 디자인 화면 태그를 표시하기에 편리합니다.

디자인 뷰에서 HTML 디자인 화면 태그를 보려면

보기 메뉴에서 시각 보조 기능을 가리킨 다음 ASP.NET 비시각적 컨트롤을 클릭합니다.

디자이너에서 단락 기호, 줄 바꿈 및 텍스트를 렌더링하지 않는 기타 태그가 표시됩니다.

컨트롤 및 요소 추가

디자인 뷰에서는 컨트롤을 도구 상자에서 페이지로 끌어다 놓을 수 있습니다. 대화 상자를 사용하여 HTML 표와 같은 일부 요소를 추가할 수 있습니다. 이 단원에서는 연습의 뒷부분에서 작업할 요소를 준비하기 위해 컨트롤 몇 개와 표 하나를 추가합니다.

컨트롤과 표를 추가하려면

**이 페이지는 ASP.NET으로 구동됩니다.**의 닫는 단락 기호 오른쪽에 삽입 포인터를 놓고 Enter 키를 누릅니다.
도구 상자의 표준 그룹에서 TextBox 컨트롤을 페이지로 끌어 옵니다.

참고:

컨트롤을 두 번 클릭하여 추가할 수도 있습니다.
Button 컨트롤을 페이지로 끌어 옵니다.

TextBox 및 Button 컨트롤은 HTML 요소가 아니라 ASP.NET 웹 서버 컨트롤입니다.
표 메뉴에서 표 삽입을 클릭합니다.

표 삽입 대화 상자가 표시됩니다.
확인을 클릭합니다.

표 삽입 대화 상자에는 만들려는 표를 구성하는 옵션이 있습니다. 그러나 이 연습에서는 기본 표 레이아웃을 사용해도 됩니다.

참고:
컨트롤을 두 번 클릭하여 추가할 수도 있습니다.

하이퍼링크 만들기

디자인 뷰에서는 속성을 설정해야 하는 HTML 요소를 만드는 데 도움이 되는 작성기와 기타 도구를 제공합니다.

하이퍼링크를 만들려면

텍스트 **이 페이지는 ASP.NET으로 구동됩니다.**에서 ASP.NET을 강조 표시하여 선택합니다.
서식 메뉴에서 하이퍼링크로 변환을 클릭합니다.

하이퍼링크 대화 상자가 표시됩니다.
URL 상자에 https://www.asp.net을 입력합니다.
확인을 클릭합니다.

속성 창에서 속성 설정

속성에서 값을 설정하여 페이지에 있는 요소의 모양과 동작을 변경할 수 있습니다.

속성 창을 사용하여 속성을 설정하려면

이 연습의 앞부분에 있는 "컨트롤 및 요소 추가"에서 추가한 Button 컨트롤을 클릭합니다.
속성에서 Text를 Click Here로, ForeColor를 다른 색으로, Bold를 true로 설정합니다.
앞 단원에서 만든 ASP.NET 하이퍼링크에 삽입 지점을 놓습니다.

속성에서 a 요소의 HRef 속성은 하이퍼링크에 지정한 URL로 설정됩니다.

페이지 테스트

브라우저에서 페이지를 보면 편집 결과를 확인할 수 있습니다.

외부 브라우저에서 페이지를 시작하려면

페이지를 마우스 오른쪽 단추로 클릭한 다음 브라우저에서 보기를 클릭합니다.
- 변경 내용을 저장할지 확인하는 메시지가 나타나면 예를 클릭합니다.
Visual Web Developer에서 Visual Web Developer Web Server를 시작합니다. 이 서버는 IIS를 사용하지 않고 페이지를 테스트하는 데 사용할 수 있는 로컬 웹 서버입니다.

기본 뷰 변경

기본적으로 Visual Web Developer에서는 새 페이지가 소스 뷰에서 열립니다.

기본 페이지 뷰를 디자인 뷰로 변경하려면

도구 메뉴에서 옵션을 클릭합니다.
옵션 대화 상자에서 일반을 클릭한 후 시작 페이지에서 디자인 뷰를 클릭합니다.

참고:
몇 가지 방식으로 페이지를 실행할 수 있습니다. Ctrl+F5를 누르면, Visual Web Developer는 시작 옵션의 속성 페이지에 구성된 시작 작업을 수행합니다. Ctrl+F5의 기본 시작 옵션은 현재 페이지, 즉 소스 또는 디자인 뷰에서 현재 활성 상태인 페이지를 실행하는 것입니다. 페이지를 디버거에서 실행할 수도 있습니다. 자세한 내용은 연습: Visual Web Developer에서 웹 페이지 디버깅을 참조하십시오.

몇 가지 방식으로 페이지를 실행할 수 있습니다. Ctrl+F5를 누르면, Visual Web Developer는 시작 옵션의 속성 페이지에 구성된 시작 작업을 수행합니다. Ctrl+F5의 기본 시작 옵션은 현재 페이지, 즉 소스 또는 디자인 뷰에서 현재 활성 상태인 페이지를 실행하는 것입니다. 페이지를 디버거에서 실행할 수도 있습니다. 자세한 내용은 연습: Visual Web Developer에서 웹 페이지 디버깅을 참조하십시오.

소스 뷰에서 작업

소스 뷰에서는 페이지의 태그를 직접 편집할 수 있습니다. 소스 뷰 편집기에는 HTML 및 ASP.NET 컨트롤을 만들 때 사용할 수 있는 많은 기능이 있습니다. 디자인 뷰에서와 마찬가지로 소스 뷰의 도구 상자를 사용하여 페이지에 새 요소를 추가할 수 있습니다.

소스 뷰에서 요소를 추가하려면

창 왼쪽 아래에 있는 소스를 클릭하여 소스 뷰로 전환합니다.

추가한 컨트롤은 <asp:> 요소로 만들어집니다. 예를 들어, Button 컨트롤은 <asp:button> 요소가 됩니다. 지정한 속성 설정은 <asp:button> 태그의 특성 설정으로 유지됩니다.
도구 상자의 표준 그룹이 아닌 HTML 그룹에서 Table 컨트롤을 페이지로 끌어와 닫는 </form> 태그 바로 위에 놓습니다.

편집기는 태그를 수동으로 입력할 때도 도움이 됩니다. 예를 들어, 편집기에서는 입력하는 동안 상황에 맞는 완료 HTML 태그와 특성을 제공합니다. 또한 편집기에서는 의심스러운 태그에 물결선을 표시하여 오류 및 경고 정보를 나타냅니다. 태그 텍스트 위에 마우스를 놓으면 오류나 경고 정보를 볼 수 있습니다.

소스 뷰에서 HTML을 편집하려면

닫는 </form> 태그 위에 삽입 지점을 놓은 후 왼쪽 꺾쇠괄호(<)를 입력합니다.

현재 상황에 맞는 태그 목록이 편집기에 표시됩니다.
a를 강조 표시하여 선택한 후 스페이스바를 누릅니다.

앵커 태그에 맞는 특성 목록이 편집기에 표시됩니다.
목록에서 href를 클릭한 후 등호와 큰따옴표(=")를 입력합니다.

현재 링크할 수 있는 페이지의 목록과 Homepicker 대화 상자를 여는 옵션이 편집기에 표시됩니다.
파일 목록에서 Default.aspx를 두 번 클릭하고 스페이스바를 누른 다음 오른쪽 꺾쇠괄호(>)를 입력하여 태그를 닫습니다.

편집기에서 닫는 </a> 태그를 삽입합니다.
링크 텍스트 Home을 사용하여 Default.aspx 페이지에 링크되도록 앵커 요소를 완료합니다. 완료된 앵커 요소는 다음과 같습니다.
```
<a href="Default.aspx">Home</a>
```
a 태그에 삽입 지점을 놓습니다.

속성에 태그의 특성이 표시됩니다.
속성의 HRef 속성에서 줄임표(…) 단추를 클릭합니다.

프로젝트 항목 선택 대화 상자가 나타납니다.

이제 현재 웹 사이트의 페이지를 대상 페이지로 선택할 수 있습니다. 웹 사이트에 선택할 다른 페이지가 없는 경우에는 프로젝트 항목 선택 대화 상자를 닫고 속성 창의 Href 상자에 즐겨찾는 URL을 입력합니다.
닫는 </form> 태그 바로 위에 삽입 지점을 놓은 후 <invalid>를 입력합니다.

편집기에서 태그 밑에 물결선이 표시됩니다. 이는 태그가 인식할 수 있는 HTML 태그가 아님을 나타냅니다.
앞의 단계에서 만든 태그를 제거합니다.

HTML 서식 검사

페이지 디자이너의 중요한 기능은 편집기에서 문서 서식을 다시 지정하도록 명시적으로 지정하는 경우를 제외하고는 페이지에 적용한 HTML 서식을 유지하는 것입니다.

HTML 서식을 검사하려면

선언 구문이 다음과 같이 표시되도록 특성을 정렬하여 Button 컨트롤의 특성 서식을 다시 지정합니다.
```
<asp:Button
    id="Button1"        Font-Bold="True"    ForeColor="Blue"    Text="Click Here" />
```
첫 번째 특성을 들여쓴 후 태그에서 Enter 키를 누르면 후속 줄도 동일하게 들여쓰기됩니다.
디자인 뷰로 전환합니다.
새 Button 컨트롤을 마우스 오른쪽 단추로 클릭한 다음 복사를 클릭합니다.
새 Button 컨트롤 아래에 삽입 지점을 놓은 후 붙여넣기를 클릭합니다.

이렇게 하면 ID가 Button2인 단추가 만들어집니다.
도구 상자의 표준 그룹에서 세 번째 Button 컨트롤을 페이지로 끌어와 <Button3>을 만듭니다.
소스뷰로 전환합니다.

<Button2>의 서식은 <Button1> 서식을 지정한 것과 똑같은 방식으로 지정됩니다. 반면, <Button3>의 서식은 asp:button 요소의 기본 서식을 사용하여 지정됩니다.

참고:

개별 요소의 서식을 사용자 지정하는 방법에 대한 자세한 내용은 연습: Visual Web Developer에서의 고급 HTML 편집을 참조하십시오.
<Button1>과 <Button2>가 사이에 공백이 없이 같은 줄에 표시되도록 문서를 편집합니다.
```
<asp:Button ID="Button1"  Font-Bold="True" 
ForeColor="Blue" Text="Click Here" /><asp:Button ID="Button2" 
 Font-Bold="True" ForeColor="Blue" Text="Click Here"/>
```
요소가 줄 바꿈될 수 있지만 <Button1>의 끝 부분(/>) 바로 뒤에 <Button2>의 시작 부분(<asp:Button ID=)이 와야 합니다.
디자인 뷰로 전환합니다.

<Button1>과 <Button2>가 사이에 공백이 없는 상태로 나란히 표시됩니다.
소스 뷰로 전환합니다.
편집 메뉴에서 문서 서식을 클릭합니다.

문서 서식이 다시 지정되지만 <Button1>과 <Button2>는 계속 같은 줄에 있습니다. 편집기에서 이들 단추를 분리하려는 경우에는 렌더링하는 동안 공백을 넣습니다. 따라서 사용자가 만든 서식은 변경되지 않습니다.

참고:
개별 요소의 서식을 사용자 지정하는 방법에 대한 자세한 내용은 연습: Visual Web Developer에서의 고급 HTML 편집을 참조하십시오.

분할 뷰에서 작업

분할 뷰를 사용하면 디자인 뷰 창과 소스 뷰 창을 동시에 모두 볼 수 있습니다.

분할 뷰에서 페이지를 보려면

창 왼쪽 아래에 있는 분할을 클릭하여 분할 뷰로 전환합니다.

요소 사이 탐색

페이지가 크고 복잡해지면 태그를 빨리 찾고 페이지를 간단하게 표시하는 기능이 유용합니다. Visual Web Developer에세는 소스 뷰에서 작업할 때 이러한 작업에 도움이 되는 다음 도구를 제공합니다.

문서 개요 - 문서에 대한 전체 뷰를 제공합니다.
태그 탐색기 - 현재 선택한 태그에 관한 정보와 페이지 계층 구조에서 태그가 있는 위치를 제공합니다.

먼저 탐색 기능을 검사할 수 있도록 페이지에 요소를 더 추가합니다.

요소를 추가하려면

디자인 뷰로 전환합니다.
도구 상자의 HTML 그룹에서 Table 컨트롤을 이 연습 앞부분의 "소스 뷰에서 작업"에서 만든 테이블의 셀로 끌어 옵니다.
도구 상자의 표준 그룹에서 Button 컨트롤을 중첩된 테이블의 중간 셀로 끌어 옵니다.

페이지에 여러 중첩된 요소가 있는 경우 문서 개요를 통해 페이지에 있는 태그를 빠르게 탐색할 수 있는 방법을 확인할 수 있습니다.

문서 개요를 사용하여 탐색하려면

소스 뷰로 전환합니다.
보기 메뉴에서 문서 개요를 클릭합니다.
문서 개요에서 Button4를 클릭합니다.

앞의 절차에서 추가한 <Button4>컨트롤이 편집기에서 선택됩니다.

현재 선택한 태그에 관한 정보와 페이지 계층 구조에서 태그의 위치가 태그 탐색기에 표시됩니다.

태그 탐색기를 사용하여 탐색하려면

<asp:button> 태그에 삽입 지점을 놓습니다.

태그 탐색기의 창 아래쪽에는 <asp:button> 태그와 상위 태그가 표시됩니다. 태그 탐색기에는 표시된 요소를 확인할 수 있도록 요소의 ID(있는 경우)가 표시되며 Class 특성에 설정된 CSS 스타일시트(있는 경우)도 표시됩니다.
태그 탐색기에서 <asp:button#Button4> 태그에 가장 가까이 있는 <table> 태그를 클릭합니다.

태그 탐색기에서 안쪽 <table> 요소로 이동하여 이 요소를 선택합니다.

태그 탐색기에서 선택한 <table>의 왼쪽에 있는 <td> 태그를 클릭합니다.

중첩된 테이블이 있는 셀 전체가 선택됩니다.

참고:
태그 탐색기 태그의 드롭다운 목록을 사용하면 태그나 태그 콘텐츠를 클릭하여 선택할 수 있습니다. 기본적으로 태그 탐색기에서 태그를 클릭하면 태그와 해당 코텐츠가 선택됩니다.

또한 태그 탐색기를 사용하여 요소를 이동하거나 복사할 수 있습니다.

태그 탐색기를 사용하여 요소를 이동 또는 복사하려면

태그 탐색기를 사용하여 <Button4>가 있는 <tr> 태그를 선택합니다.
Ctrl+C를 눌러 태그를 복사합니다.
태그 탐색기를 사용하여 바깥쪽 테이블을 이동합니다.
소스 뷰에서 <table> 태그와 첫 번째 <tr> 태그 사이에 삽입 포인터를 놓습니다.
Ctrl+V를 눌러 복사한 행을 테이블에 붙여넣습니다.
디자인 뷰로 전환합니다.

Button 컨트롤이 포함된 새 행이 추가되었습니다.

텍스트 서식 지정

서식 도구 모음에서는 대부분의 설정에 인라인 스타일을 적용합니다. 굵게와 기울임꼴 서식은 b 및 i 태그를 사용하여 적용합니다. 단락 서식은 p(일반적인 경우), pre(서식 지정된 경우) 등의 블록 태그로 적용합니다. 단락 맞춤은 XHTML 1.1 표준에 맞는 인라인 스타일을 사용하여 적용합니다.
디자이너에서는 style 블록과 CSS 스타일시트에 대한 링크를 만들 수도 있습니다. 자세한 내용은 연습: CSS 파일 만들기 및 수정을 참조하십시오.
기본적으로 편집기에서는 XHTML 1.1 표준과 호환되는 태그를 만들고, 대문자로 입력된 것까지 포함하여 모든 HTML 태그 이름을 소문자로 변환합니다. 또한 편집기에서는 특성(속성) 값을 따옴표로 묶습니다. 자세한 내용은 연습: Visual Web Developer에서의 고급 HTML 편집을 참조하십시오.

기본 태그 유효성 검사를 변경하려면

소스 뷰에서 페이지를 마우스 오른쪽 단추로 클릭한 후 서식 및 유효성 검사를 클릭합니다.
옵션 대화 상자에서 텍스트 편집기, HTML을 차례로 확장한 다음 유효성 검사를 클릭합니다.
대상 목록에 유효성 검사 유형을 입력합니다.

다음 단계

이 연습에서는 웹 페이지 편집기의 HTML 기능에 대해 간략하게 설명했습니다. 여기에는 디자인 뷰와 소스 뷰에서 HTML을 만드는 방법, 기본 서식 및 탐색이 포함됩니다. Visual Web Developer의 편집 기능에 대해 더 자세히 알아 볼 수 있습니다. 예를 들어, 다음과 같은 작업을 할 수 있습니다.

사용자 지정 서식 옵션, 개요 및 HTML 유효성 검사를 포함하여 HTML 편집기의 추가 기능에 대해 배우기. 자세한 내용은 연습: Visual Web Developer에서의 고급 HTML 편집을 참조하십시오.
CSS 스타일시트 스타일로 작업하는 방법에 대해 배우기. 자세한 내용은 연습: CSS 파일 만들기 및 수정을 참조하십시오.

참고 항목

다음을 통해 공유