도구 상자, HTML 탭Toolbox, HTML tab

도구 상자의 HTML 탭에서는 웹 페이지와 Web Forms에서 유용한 구성 요소를 제공합니다.The HTML tab of the Toolbox provides components that are useful on Web pages and Web forms. 이 탭을 보려면 먼저 HTML 디자이너에서 편집할 문서를 엽니다.To view this tab, first open a document for editing in the HTML designer. 보기 메뉴에서 도구 상자를 클릭하고 도구 상자의 HTML 탭을 클릭합니다.On the View menu, click Toolbox, and then click the HTML tab of the Toolbox.

HTML 탭에서 도구 인스턴스를 만들려면 도구를 두 번 클릭하여 현재 삽입 지점에 있는 문서에 추가하거나 도구를 선택하고 편집 화면의 원하는 위치로 끌어다 놓습니다.To create an instance of a tool on the HTML tab, either double-click the tool to add it to your document at the current insertion point, or select the tool and drag it to the desired position on the editing surface.

UI 요소UI elements

다음 도구는 [HTML] 탭에서 기본적으로 사용할 수 있습니다.The following tools are available by default on the HTML tab.

포인터Pointer

ASP.NET 모바일 디자이너 HTMLpage 포인터

[도구 상자] 탭이 열리면 이 도구가 기본적으로 선택됩니다.This tool is selected by default when any Toolbox tab opens. 이 도구는 삭제할 수 없습니다.It cannot be deleted. 포인터를 사용하여 개체를 디자인 보기 화면에 끌어다 놓고, 크기를 조정하고, 페이지 또는 양식에서 위치를 변경합니다.The pointer enables you to drag objects onto the Design view surface, resize them, and reposition them on the page or form. 자세한 내용은 도구 상자를 참조하세요.For more information, see Toolbox.

Input (Button)Input (Button)

HTML 웹 페이지 단추

type="button"input 요소를 삽입합니다.Inserts an input element of type="button". 표시되는 텍스트를 변경하려면 name 속성을 편집합니다.To change the text that is displayed, edit the name property. 기본적으로 id="Button1"은 첫 번째 단추로 삽입되고, id="Button2"는 두 번째 단추로 삽입되는 식으로 항목이 삽입됩니다.By default, id="Button1" is inserted for the first button, id="Button2" for the second, and so on.

Input (Button) 를 디자인 보기 화면으로 끌어다 놓으면 다음과 같은 HTML 태그가 문서에 삽입됩니다.When you drag Input (Button) onto the Design view surface, HTML markup like the following is inserted into your document:

<input id="Button1" type="button" value="Button" name="Button1">

Input (Reset)Input (Reset)

HTMLpageResetButton 스크린샷

type="reset"input 요소를 삽입합니다.Inserts an input element of type="reset". 표시되는 텍스트를 변경하려면 name 속성을 편집합니다.To change the text that is displayed, edit the name property. 기본적으로 id="Reset1"은 첫 번째 다시 설정 단추로 삽입되고, id="Reset2"는 두 번째 다시 설정 단추로 삽입되는 식으로 항목이 삽입됩니다.By default, id="Reset1" is inserted for the first reset button, id="Reset2" for the second, and so on.

Input (Reset) 를 디자인 보기 화면으로 끌어다 놓으면 다음과 같은 HTML 태그가 문서에 삽입됩니다.When you drag Input (Reset) onto the Design view surface, HTML markup like the following is inserted into your document:

<input id="Reset1" type="reset" value="Reset" name="Reset1">

Input (Submit)Input (Submit)

HTMLpageToolbarSubmitButton 스크린샷

type="submit"input 요소를 삽입합니다.Inserts an input element of type="submit". 표시되는 텍스트를 변경하려면 name 속성을 편집합니다.To change the text that is displayed, edit the name property. 기본적으로 id="Submit1"은 첫 번째 제출 단추로 삽입되고, id="Submit2"는 두 번째 제출 단추로 삽입되는 식으로 항목이 삽입됩니다.By default, id="Submit1" is inserted for the first submit button, id="Submit2" for the second, and so on.

Input (Submit) 를 디자인 보기 화면으로 끌어다 놓으면 다음과 같은 HTML 태그가 문서에 삽입됩니다.When you drag Input (Submit) onto the Design view surface, HTML markup like the following is inserted into your document:

<input id="Submit1" type="submit" value="Submit" name="Submit1">

Input (Text)Input (Text)

HTMLpageToolbarTextField 스크린샷

type="text"input 요소를 문서에 삽입합니다.Inserts an input element of type="text" in your document. 표시되는 기본 텍스트를 변경하려면 value 특성을 편집합니다.To change the default text that is displayed, edit the value attribute. 기본적으로 id="Text1"은 첫 번째 텍스트 필드로 삽입되고, id="Text2"는 두 번째 텍스트 필드로 삽입되는 식으로 항목이 삽입됩니다.By default, id="Text1" is inserted for the first text field, id="Text2" for the second, and so on.

Input (Text) 를 디자인 보기 화면으로 끌어다 놓으면 다음과 같은 HTML 태그가 문서에 삽입됩니다.When you drag Input (Text) onto the Design view surface, HTML markup like the following is inserted into your document:

<input id="Text1" TYPE="text" value="Text Field" name="Text1">

중요

모든 사용자 입력의 유효성을 검사하는 것이 좋습니다.It is recommended that you validate all user input. 자세한 내용은 Validating User Input in ASP.NET Web Pages (Razor) Sites(ASP.NET 웹 페이지(Razor) 사이트에서 사용자 입력 유효성 검사)를 참조하세요.For more information, see Validating User Input in ASP.NET Web Pages (Razor) Sites.

Input (File)Input (File)

HTML 페이지 파일 필드

type="file"input 요소를 문서에 삽입합니다.Inserts an input element of type="file" in your document. 기본적으로 id="File1"은 첫 번째 파일 필드로 삽입되고, id="File2"는 두 번째 파일 필드로 삽입되는 식으로 항목이 삽입됩니다.By default, id="File1" is inserted for the first file field, id="File2" for the second, and so on.

Input (File) 를 디자인 보기 화면으로 끌어다 놓으면 다음과 같은 HTML 태그가 문서에 삽입됩니다.When you drag Input (File) onto the Design view surface, HTML markup like the following is inserted into your document:

<input id="File1" type="file" name="File1">

중요

모든 사용자 입력의 유효성을 검사하는 것이 좋습니다.It is recommended that you validate all user input. 자세한 내용은 Validating User Input in ASP.NET Web Pages (Razor) Sites(ASP.NET 웹 페이지(Razor) 사이트에서 사용자 입력 유효성 검사)를 참조하세요.For more information, see Validating User Input in ASP.NET Web Pages (Razor) Sites.

Input (Password)Input (Password)

Visual Studio 암호 필드

type="password"input 요소를 삽입합니다.Inserts an input element of type="password". 기본적으로 id="Password1"은 첫 번째 암호 필드로 삽입되고, id="Password2"는 두 번째 암호 필드로 삽입되는 식으로 항목이 삽입됩니다.By default, id="Password1" is inserted for the first password field, id="Password2" for the second, and so on.

Input (Password) 를 디자인 보기 화면으로 끌어다 놓으면 다음과 같은 HTML 태그가 문서에 삽입됩니다.When you drag Input (Password) onto the Design view surface, HTML markup like the following is inserted into your document:

<input id="Password1" type="password" name="Password1">

중요

응용 프로그램에서 사용자 이름과 암호를 전송할 경우 SSL(Secure Sockets Layer)을 사용하여 전송을 암호화하도록 웹 사이트를 구성해야 합니다.If your application transmits user names and passwords, you should configure your Web site to use Secure Sockets Layer (SSL) to encrypt the transmission. 자세한 내용은 IIS Operations Guide(IIS 작업 가이드)에서 "Securing Connections with SSL(SSL을 사용하여 연결 보호)"을 참조하세요.For more information, see "Securing Connections with SSL" in the IIS Operations Guide. 또한 모든 사용자 입력의 유효성을 검사하는 것이 좋습니다.Additionally, it is recommended that you validate all user input. 자세한 내용은 Validating User Input in ASP.NET Web Pages (Razor) Sites(ASP.NET 웹 페이지(Razor) 사이트에서 사용자 입력 유효성 검사)를 참조하세요.For more information, see Validating User Input in ASP.NET Web Pages (Razor) Sites.

Input (Check box)Input (Check box)

HTML 웹 페이지 도구 상자 확인란 옵션

type="checkbox"input 요소를 삽입합니다.Inserts an input element of type="checkbox". 표시되는 텍스트를 변경하려면 name 속성을 편집합니다.To change the text that is displayed, edit the name property. 기본적으로 id="Checkbox1"은 첫 번째 확인란으로 삽입되고, id="Checkbox2"는 두 번째 확인란으로 삽입되는 식으로 항목이 삽입됩니다.By default, id="Checkbox1" is inserted for the first check box, id="Checkbox2" for the second, and so on.

Input (Check box) 를 디자인 보기 화면으로 끌어다 놓으면 다음과 같은 HTML 태그가 문서에 삽입됩니다.When you drag Input (Check box) onto the Design view surface, HTML markup like the following is inserted into your document:

<input id="Checkbox1" type="checkbox" name="Checkbox1">

Input (Radio)Input (Radio)

VisualStudioHTMLpageRadioButton 스크린샷

type="radio"input 요소를 삽입합니다.Inserts an input element of type="radio". 표시되는 텍스트를 변경하려면 name 속성을 편집합니다.To change the text that is displayed, edit the name property. 기본적으로 id="Radio1"은 첫 번째 라디오 단추로 삽입되고, id="Radio2"는 두 번째 라디오 단추로 삽입되는 식으로 항목이 삽입됩니다.By default, id="Radio1" is inserted for the first radio button, id="Radio2" for the second, and so on.

Input (Radio) 를 디자인 보기 화면으로 끌어다 놓으면 다음과 같은 HTML 태그가 문서에 삽입됩니다.When you drag Input (Radio) onto the Design view surface, HTML markup like the following is inserted into your document:

<input id="Radio1" type="radio" name="Radio1">

Input (Hidden)Input (Hidden)

HTML 페이지 숨겨진 항목

type="hidden"input 요소를 삽입합니다.Inserts an input element of type="hidden". 기본적으로 id="Hidden1"은 첫 번째 숨겨진 필드로 삽입되고, id="Hidden2"는 두 번째 숨겨진 필드로 삽입되는 식으로 항목이 삽입됩니다.By default, id="Hidden1" is inserted for the first hidden field, id="Hidden2" for the second, and so on.

Input (Hidden) 를 디자인 보기 화면으로 끌어다 놓으면 다음과 같은 HTML 태그가 문서에 삽입됩니다.When you drag Input (Hidden) onto the Design view surface, HTML markup like the following is inserted into your document:

<input id="Hidden1" type="hidden" name="Hidden1">

TextareaTextarea

HTMLpage 도구 모음 텍스트 영역

textarea 요소를 삽입합니다.Inserts a textarea element. 텍스트 영역의 크기를 조정하거나, 스크롤 막대를 사용하여 표시 영역을 벗어나는 텍스트를 볼 수 있습니다.You can resize the text area, or use its scroll bars to view text that extends beyond its display area. 표시되는 기본 텍스트를 변경하려면 value 특성을 편집합니다.To change the default text that is displayed, edit the value attribute. 기본적으로 id="textarea1"은 첫 번째 텍스트 영역으로 삽입되고, id=" textarea 2"는 두 번째 텍스트 영역으로 삽입되는 식으로 항목이 삽입됩니다.By default, id="textarea1" is inserted the first text area, id=" textarea 2" for the second, and so on.

Textarea를 디자인 보기 화면으로 끌어다 놓으면 다음과 같은 HTML 태그가 문서에 삽입됩니다.When you drag Textarea onto the Design view surface, HTML markup like the following is inserted into your document:

<textarea id=" textarea 1 name=" textarea 1" rows=2 cols=20></textarea>

중요

모든 사용자 입력의 유효성을 검사하는 것이 좋습니다.It is recommended that you validate all user input. 자세한 내용은 Validating User Input in ASP.NET Web Pages (Razor) Sites(ASP.NET 웹 페이지(Razor) 사이트에서 사용자 입력 유효성 검사)를 참조하세요.For more information, see Validating User Input in ASP.NET Web Pages (Razor) Sites.

TableTable

HTMLpageToolbarTable 스크린샷

table 요소를 삽입합니다.Inserts a table element.

Table을 디자인 보기 화면으로 끌어다 놓으면 다음과 같은 HTML 태그가 문서에 삽입됩니다.When you drag Table onto the Design view surface, HTML markup like the following is inserted into your document:

<table cellspacing="1" width="75%" border=1> <tr><td></td></tr></table>

ImageImage

HTML 페이지 이미지 항목

img 요소를 삽입합니다.Inserts an img element. 이 요소를 편집하여 해당 srcalt 텍스트를 지정합니다.Edit this element to specify its src and its alt text.

Image를 디자인 보기 화면으로 끌어다 놓으면 다음과 같은 HTML 태그가 문서에 삽입됩니다.When you drag Image onto the Design view surface, HTML markup like the following is inserted into your document:

<img alt="" src="">

선택Select

HTML 페이지 도구 상자 드롭다운

select 요소를 삽입합니다(size 특성 없음).Inserts a dropdown select element (without a size attribute). 기본적으로 id="select1"은 첫 번째 목록 상자로 삽입되고, id="select2"는 두 번째 목록 상자로 삽입되는 식으로 항목이 삽입됩니다.By default, id="select1" is inserted for the first list box, id="select2" for the second, and so on.

Select를 디자인 보기 화면으로 끌어다 놓으면 다음과 같은 HTML 태그가 문서에 삽입됩니다.When you drag Select onto the Design view surface, HTML markup like the following is inserted into your document:

<select id="select1" name="select1"><option selected></option></select>

size 속성 값을 늘려 여러 줄 select 요소를 만들 수 있습니다.You can create a multi-line select element by increasing the value of the size property.

Horizontal RuleHorizontal Rule

HTML 페이지 가로줄 항목

hr 요소를 삽입합니다.Inserts an hr element. 줄 두께를 늘리려면 size 특성을 편집합니다.To increase the thickness of the line, edit the size attribute.

Horizontal Rule을 디자인 보기 화면으로 끌어다 놓으면 다음과 같은 HTML 태그가 문서에 삽입됩니다.When you drag Horizontal Rule onto the Design view surface, HTML markup like the following is inserted into your document:

<hr width="100%" size=1>

DivDiv

HTML 페이지 레이블

ms_positioning="FlowLayout" 특성을 포함하는 div 요소를 삽입합니다.Inserts a div element that includes an ms_positioning="FlowLayout" attribute. 너비 및 높이를 제외하고 이 항목은 선형 레이아웃 패널과 동일합니다.Except for the width and height, this item is identical to a Flow Layout Panel. div 요소 내에 포함된 텍스트의 서식을 지정하려면 class="stylename" 특성을 여는 태그에 추가합니다.To format the text that is contained within the div element, add a class="stylename" attribute to the opening tag.

Div를 디자인 보기 화면으로 끌어다 놓으면 다음과 같은 HTML 태그가 문서에 삽입됩니다.When you drag Div onto the Design view surface, HTML markup like the following is inserted into your document:

<div ms_positioning="FlowLayout" style="width: 70px; position: relative; height: 15px">Label</div>

참고 항목See also