연습: HTML 코드 조각 사용

아티클
11/15/2012

이 연습에서는 HTML 코드 조각을 사용하여 페이지에 태그를 추가하는 방법을 보여 줍니다. Visual Studio에서 HTML 코드 조각을 사용하면 시간을 절약하고 소스 보기에서 웹 페이지 태그를 작성할 때 한결 간편하게 입력할 수 있습니다.

참고

이 항목에서의 예제는 ASP.NET Web Forms 페이지에 적용됩니다.그러나, 웹 폼, ASP.NET MVC (모델 뷰 컨트롤러) 및, ASP.NET Web Pages 웹 응용 프로그램에 대해 만든 페이지의 HTML 코드 조각을 사용할 수 있습니다.

이 항목에는 다음과 같은 단원이 포함되어 있습니다.

사전 요구 사항
코드 조각 사용
기존 프로젝트 열기 또는 새 프로젝트 만들기
HTML 코드 조각 삽입
페이지 실행
다음 단계

사전 요구 사항

이 연습을 완료하려면 다음과 같은 요건이 필요합니다.

Visual Studio 또는 웹 용 Visual Studio Express

코드 조각 사용

Visual Studio에는 200개가 넘는 C#, Visual Basic, XML 및 HTML(ASP.NET 태그 포함)용 코드 조각이 포함되어 있습니다. 코드 조각은 미리 작성된 프로그래밍 코드 또는 태그로 구성됩니다. 경우에 따라 코드 조각에는 코드 조각을 삽입한 후 정보(속성 이름 등)를 지정할 수 있는 자리 표시자가 들어 있습니다. 코드 조각은 코드 편집기에서 그리고 웹 페이지를 작성할 때 HTML 편집기의 소스 보기에서 사용할 수 있습니다.

이 연습에서는 웹 폼 페이지에 HTML 및 ASP.NET 태그를 추가해 봅니다. 거의 모든 코드 조각은 코드를 삽입하는 간편한 방법을 제공합니다. 예를 들어 ASP.NET Button 서버 컨트롤을 웹 폼 페이지에 삽입하려면 <bu를 입력한 다음 Tab 키를 두 번 누르면 됩니다. 단추를 입력한 다음 Tab 키를 한 번 눌러도 됩니다. 이렇게 하면 편집기에서 다음 태그를 추가하여 Button 컨트롤에 대한 태그를 완성합니다.

<asp:Button Text="text" runat="server" />

이 연습에서는 코드 조각을 가장 빠르게 삽입할 수 있는 방법을 보여 줍니다. 하지만 다음과 같은 방법으로 코드 조각을 삽입할 수도 있습니다.

코드 조각을 삽입하여 나타내려는 위치에 커서를 놓고 페이지를 마우스 오른쪽 단추로 클릭한 다음 코드 조각 삽입을 선택합니다.
코드 조각을 삽입하여 나타내려는 위치에 커서를 놓은 다음 바로 가기 키 Ctrl+K, Ctrl+X를 누릅니다. 코드 조각을 선택할 수 있는 목록이 표시됩니다.
코드 조각을 사용하여 감쌀 단어를 선택한 다음 해당 단어를 마우스 오른쪽 단추로 클릭하고 코드 감싸기를 클릭합니다.
편집 메뉴에서 IntelliSense를 선택한 다음 코드 조각 삽입을 선택합니다.

Visual Studio에서 어떤 코드 조각을 사용할 수 있는지 보거나 코드 조각을 추가하기 위해 코드 조각 관리자를 사용할 수 있습니다.

참고

웹 용 Visual Studio Express에서는 코드 조각 관리자 기능을 사용할 수 없습니다.

다음 그림에서는 코드 조각 관리자 대화 상자를 보여 줍니다.

코드 조각 관리자 대화 상자

다음 절차에서는 HTML 요소에 사용 가능한 코드 조각을 살펴봅니다.

코드 조각 관리자를 사용하여 사용 가능한 HTML 코드 조각을 보려면

Visual Studio를 엽니다. 코드 조각 관리자를 보기 위해 프로젝트를 열 필요는 없습니다.
도구 메뉴에서 코드 조각 관리자를 선택합니다.

코드 조각 관리자 대화 상자가 표시됩니다.
언어 목록에서 HTML을 선택합니다.

ASP.NET, ASP.NET MVC, HTML 등과 같이 HTML 관련 코드 조각이 들어있는 여러 개의 폴더가 있습니다.
위치에서 HTML 폴더를 확장합니다.
div를 선택합니다.

다른 바로 가기 목록에 p, h1, h2 와 같은 연관된 HTML 요소가 포함되어 있는 것을 볼 수 있습니다. 관련된 요소는 또한 바로 가기 <div, <p, <h1 등을 사용하여 삽입할 수 있는 코드 조각을 가지고 있습니다.

기존 프로젝트 열기 또는 새 프로젝트 만들기

Visual Studio 또는 웹 응용 프로그램 프로젝트 용 Visual Studio Express가 아직 없는 경우 이 연습의 단계를 따라 프로젝트를 만듭니다. 이 연습에서는 Default.aspx 페이지에서 코드 조각을 사용해 볼 것이지만 기존 프로젝트의 페이지에서와 같은 단계를 수행할 수 있습니다.

웹 응용 프로그램 프로젝트를 만들기

파일 메뉴에서 새 프로젝트를 클릭합니다.

새 프로젝트 대화 상자가 표시됩니다.
웹 노드를 선택한 다음 Visual Studio에 설치되어 있는 템플릿에서 ASP.NET 웹 응용 프로그램을 선택합니다.
이름 필드에서 SnippetTest를 선택합니다.
확인을 클릭합니다.

Visual Studio에서 웹 응용 프로그램 프로젝트를 만듭니다.

HTML 코드 조각 삽입

IntelliSense는 다른 HTML 요소를 표시하는 것처럼 사용 가능한 HTML 코드를 보여 줍니다. 코드 조각을 간편하고 빠르게 삽입하고 편집할 수 있는 많은 기능이 제공됩니다. 또한 일부 코드 조각에는 특성으로 마우스 포인터를 옮길 필요 없이 값을 입력할 수 있는 자리 표시자가 들어 있습니다.

이 절차에서는 ASP.NET 요소를 삽입합니다. 이러한 요소는 코드 조각 관리자에서 HTML 섹션에 포함되어 있습니다.

태그에 HTML 코드 조각을 삽입하려면

Default.aspx 페이지가 열려 있지 않을 경우 페이지를 엽니다.
소스 뷰로 전환합니다.
닫는 </asp:Content> 태그 앞에 커서를 놓습니다.
형식 <che

드롭다운 목록에 요소 이름과 코드 조각이 나타납니다. 꺾쇠 괄호를 포함하는 아이콘은 다음 예시에서 보여지는 것처럼 HTML 요소를 나타냅니다.

용지의 아이콘은 다음 그림과 같이 코드 조각을 나타냅니다.

일부 코드 조각은 HTML 요소와 이름이 동일하며 코드 조각 아이콘과 태그 아이콘이 둘 다 표시됩니다.
Tab 키를 두 번 누릅니다.

CheckBox 컨트롤의 태그가 나타나고 text 속성 값이 강조 표시됩니다.

참고

커서가 요소의 여는 태그와 닫는 태그 사이에 있지 않을 경우 다른 결과가 가능합니다.
확인란을 입력하고 Enter 키를 눌러 요소를 완성합니다.

커서가 요소 끝으로 이동하며 Tab 키를 사용하여 요소를 완성할 필요가 없습니다.
Enter 키를 눌러 다음 줄로 이동합니다.
줄의 시작 부분에 커서를 놓고 페이지를 마우스 오른쪽 단추로 클릭합니다.
코드 조각 삽입을 선택하여 사용 가능한 코드 조각 폴더를 표시합니다.
HTML 코드 조각 폴더를 두 번 클릭합니다.
br을 입력하고 Tab 키를 누릅니다.

줄 바꿈 태그(br) 요소가 나타납니다.
Enter 키를 눌러 다음 줄로 이동합니다.
줄의 시작 부분에 커서를 놓고 바로 가기 키 Ctrl+K, Ctrl+X를 누릅니다.

코드 조각 폴더 목록이 나타납니다.
ASP.NET 코드 조각 폴더를 선택하려면 TAB을 누릅니다.
ra를 입력하고 TAB 키를 누릅니다.

RadioButton 컨트롤에 대한 태그가 나타나고 text가 강조 표시됩니다.
라디오 단추 입력 Enter 키를 눌러 요소를 완성합니다.
Enter 키를 눌러 다음 줄로 이동합니다.
<br을 입력하고 TAB을 두 번 누릅니다.
Enter 키를 눌러 다음 줄로 이동합니다.
편집 메뉴에서 IntelliSense를 선택한 다음 코드 조각 삽입을 선택합니다.

코드 조각 폴더 목록이 표시됩니다.
ASP.NET 코드 조각 폴더를 두 번 클릭합니다.
la를 입력하고 TAB을 두 번 누릅니다.

Label 컨트롤에 대한 태그가 표시됩니다. 속성 값 text가 강조 표시됩니다.
텍스트 상자를 입력하고 Enter 키를 누릅니다.
다음 줄로 이동합니다.
<textb를 입력하고 Tab 키를 두 번 누릅니다.

TextBox 컨트롤에 대한 태그가 나타납니다.

페이지 실행

마지막 단계에서는 페이지를 테스트합니다. 페이지를 테스트하기 위해, 로컬로 실행되며 IIS가 필요 없는 IIS Express를 사용할 수 있습니다.

페이지를 실행하려면

Ctrl+F5를 눌러 페이지를 실행합니다.
맨 아래까지 스크롤합니다. 확인란, 라디오 단추, 라벨, 및 텍스트 상자 컨트롤은 페이지의 아래쪽에 있습니다.

다음 단계

이 연습에서는 Visual Studio 프로젝트에 HTML 코드 조각을 추가하는 방법을 배웠습니다. 코드 조각을 사용한 작업 방법에 대한 자세한 내용은 코드 조각 페이지의 항목을 참조하십시오.