다음을 통해 공유

도구 상자, HTML 탭

  • 아티클

업데이트: 2007년 11월

도구 상자의 HTML 탭에는 웹 페이지와 Web Forms에 유용한 구성 요소가 있습니다. 이 탭을 보려면 먼저 HTML 디자이너에서 편집할 문서를 엽니다. 보기 메뉴에서 도구 상자를 클릭한 다음 도구 상자의 HTML 탭을 클릭합니다.

HTML 탭에서 도구의 인스턴스를 만들려면 도구를 두 번 클릭하여 현재 삽입 지점에 있는 문서에 해당 도구를 추가하거나, 도구를 선택한 다음 편집 화면의 원하는 위치로 끕니다.

작업

UI 요소

다음은 HTML 탭에서 기본적으로 사용할 수 있는 도구입니다.

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

    이 도구는 도구 상자 탭이 열릴 때 기본적으로 선택되어 있으며 삭제할 수 없습니다. 포인터를 사용하여 개체를 디자인 뷰 화면으로 끌고, 크기를 조정하며, 페이지나 폼에서 위치를 바꿀 수 있습니다. 자세한 내용은 방법: 도구 상자 창 관리 및 방법: 도구 상자 탭 조작을 참조하십시오.

  • Input (Button)
    HTML 웹 페이지 단추

    type="button"의 input 요소를 삽입합니다. 표시되는 텍스트를 변경하려면 name 속성을 편집합니다. 기본적으로 첫째 단추에는 id="Button1"이 삽입되고, 둘째 단추에는 id="Button2"가 삽입되는 식으로 진행됩니다.

    Input (Button)을 디자인 뷰 화면으로 끌어서 놓으면 다음과 같은 HTML 태그가 문서에 삽입됩니다.

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

    자세한 내용은 HTML Input 컨트롤, HtmlInputButton 서버 컨트롤 선언 구문, 방법: 스크립트 만들기 및 이벤트 처리기 편집, Button 웹 서버 컨트롤 개요, HtmlInputButton, HtmlButton 및 Button을 참조하십시오.

  • Input (Reset)
    HTMLpageResetButton 스크린 샷

    type="reset"의 input 요소를 삽입합니다. 표시되는 텍스트를 변경하려면 name 속성을 편집합니다. 기본적으로 첫째 다시 설정 단추에는 id="Reset1"이 삽입되고, 둘째 단추에는 id="Reset2"가 삽입되는 식으로 진행됩니다.

    Input (Reset)을 디자인 뷰 화면으로 끌어서 놓으면 다음과 같은 HTML 태그가 문서에 삽입됩니다.

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

    자세한 내용은 HTML Input 컨트롤, HtmlInputReset 서버 컨트롤 선언 구문, HtmlInputButton 및 Button를 참조하십시오.

  • Input (Submit)
    HTMLpageToolbarSubmitButton 스크린 샷

    type="submit"의 input 요소를 삽입합니다. 표시되는 텍스트를 변경하려면 name 속성을 편집합니다. 기본적으로 첫째 제출 단추에는 id="Submit1"이 삽입되고, 둘째 단추에는 id="Submit2"가 삽입되는 식으로 진행됩니다.

    Input (Submit)을 디자인 뷰 화면으로 끌어서 놓으면 다음과 같은 HTML 태그가 문서에 삽입됩니다.

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

    자세한 내용은 HTML Input 컨트롤, HtmlInputSubmit 서버 컨트롤 선언 구문, HtmlInputButton 및 Button를 참조하십시오.

  • Input (Text)
    HTMLpageToolbarTextField 스크린 샷

    문서에 type="text"의 input 요소를 삽입합니다. 표시된 기본 텍스트를 변경하려면 value 특성을 편집합니다. 기본적으로 첫째 텍스트 필드에는 id="Text1"이 삽입되고, 둘째 필드에는 id="Text2"가 삽입되는 식으로 진행됩니다.

    Input (Text)을 디자인 뷰 화면으로 끌어서 놓으면 다음과 같은 HTML 태그가 문서에 삽입됩니다.

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

    자세한 내용은 HTML Input 컨트롤, HtmlInputText 서버 컨트롤 선언 구문, TextBox 웹 서버 컨트롤 개요, HtmlInputText 및 TextBox를 참조하십시오.

    보안 정보:

    모든 사용자 입력의 유효성을 검사하는 것이 좋습니다. 자세한 내용은 ASP.NET 웹 페이지에서 사용자 입력 유효성 검사를 참조하십시오.

  • Input (File)
    HTML 페이지 파일 필드

    문서에 type="file"의 input 요소를 삽입합니다. 기본적으로 첫째 파일 필드에는 id="File1"이 삽입되고, 둘째 필드에는 id="File2"가 삽입되는 식으로 진행됩니다.

    Input (File)을 디자인 뷰 화면으로 끌어서 놓으면 다음과 같은 HTML 태그가 문서에 삽입됩니다.

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

    자세한 내용은 HTML Input 컨트롤, HtmlInputFile 서버 컨트롤 선언 구문 및 HtmlInputFile을 참조하십시오.

    보안 정보:

    모든 사용자 입력의 유효성을 검사하는 것이 좋습니다. 자세한 내용은 ASP.NET 웹 페이지에서 사용자 입력 유효성 검사를 참조하십시오.

  • Input (Password)
    Visual Studio 암호 필드

    type="password"의 input 요소를 삽입합니다. 기본적으로 첫째 암호 필드에는 id="Password1"이 삽입되고, 둘째 필드에는 id="Password2"가 삽입되는 식으로 진행됩니다.

    Input (Password)을 디자인 뷰 화면으로 끌어서 놓으면 다음과 같은 HTML 태그가 문서에 삽입됩니다.

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

    자세한 내용은 HTML Input 컨트롤, HtmlInputPassword 서버 컨트롤 선언 구문, 방법: 암호 입력란으로 TextBox 웹 서버 컨트롤 설정 및 연습: Web Forms 페이지에서 사용자 입력 유효성 검사를 참조하십시오.

    보안 정보:

    응용 프로그램에서 사용자 이름과 암호를 전송하는 경우 SSL(Secure Sockets Layer)을 사용하여 전송을 암호화하도록 웹 사이트를 구성해야 합니다. 자세한 내용은 IIS Operations Guide의 "Securing Connections with SSL"을 참조하십시오. 또한 모든 사용자 입력의 유효성을 검사하는 것이 좋습니다. 자세한 내용은 ASP.NET 웹 페이지에서 사용자 입력 유효성 검사를 참조하십시오.

  • Input (Check box)
    HTML 웹 페이지 도구 상자 확인란 옵션

    type="checkbox"의 input 요소를 삽입합니다. 표시되는 텍스트를 변경하려면 name 속성을 편집합니다. 기본적으로 첫째 확인란에는 id="Checkbox1"이 삽입되고, 둘째 확인란에는 id="Checkbox2"가 삽입되는 식으로 진행됩니다.

    Input (Check box)을 디자인 뷰 화면으로 끌어서 놓으면 다음과 같은 HTML 태그가 문서에 삽입됩니다.

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

    자세한 내용은 HTML Input 컨트롤, HtmlInputCheckBox 서버 컨트롤 선언 구문, CheckBox 및 CheckBoxList 웹 서버 컨트롤 개요, HtmlInputCheckBox 및 CheckBox을 참조하십시오.

  • Input (Radio)
    VisualStudioHTMLpageRadioButton 스크린 샷

    type="radio"의 input 요소를 삽입합니다. 표시되는 텍스트를 변경하려면 name 속성을 편집합니다. 기본적으로 첫째 라디오 단추에는 id="Radio1"이 삽입되고, 둘째 단추에는 id="Radio2"가 삽입되는 식으로 진행됩니다.

    Input (Radio)을 디자인 뷰 화면으로 끌어서 놓으면 다음과 같은 HTML 태그가 문서에 삽입됩니다.

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

    자세한 내용은 HTML Input 컨트롤, HtmlInputRadioButton 서버 컨트롤 선언 구문, RadioButton 및 RadioButtonList 웹 서버 컨트롤 개요, HtmlInputRadioButton 및 RadioButton을 참조하십시오.

  • Input (Hidden)
    HTML 페이지 숨겨진 항목

    type="hidden"의 input 요소를 삽입합니다. 기본적으로 숨겨진 첫째 필드에는 id="Hidden1"이 삽입되고, 둘째 필드에는 id="Hidden2"가 삽입되는 식으로 진행됩니다.

    Input (Hidden)을 디자인 뷰 화면으로 끌어서 놓으면 다음과 같은 HTML 태그가 문서에 삽입됩니다.

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

    자세한 내용은 HTML Input 컨트롤, HtmlInputHidden 서버 컨트롤 선언 구문 및 HtmlInputHidden을 참조하십시오.

  • Textarea
    HTMLpage 도구 모음 텍스트 영역

    textarea 요소를 삽입합니다. 텍스트 영역의 크기를 변경하거나, 스크롤 막대를 사용하여 표시 영역 밖에 있는 텍스트를 볼 수 있습니다. 표시되는 기본 텍스트를 변경하려면 value 특성을 편집합니다. 기본적으로 첫째 텍스트 영역에는 id="textarea1"이 삽입되고, 둘째 영역에는 id=" textarea 2"가 삽입되는 식으로 진행됩니다.

    Textarea를 디자인 뷰 화면으로 끌어서 놓으면 다음과 같은 HTML 태그가 문서에 삽입됩니다.

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

    자세한 내용은 HtmlTextArea 서버 컨트롤 선언 구문, HtmlTextArea 및 TextBox를 참조하십시오.

    보안 정보:

    모든 사용자 입력의 유효성을 검사하는 것이 좋습니다. 자세한 내용은 ASP.NET 웹 페이지에서 사용자 입력 유효성 검사를 참조하십시오.

  • Table
    HTMLpageToolbarTable 스크린 샷

    table 요소를 삽입합니다.

    Table을 디자인 뷰 화면으로 끌어서 놓으면 다음과 같은 HTML 태그가 문서에 삽입됩니다.

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

    자세한 내용은 HtmlTable 서버 컨트롤 선언 구문, Table, TableRow 및 TableCell 웹 서버 컨트롤 개요, HtmlTable 및 Table를 참조하십시오.

  • Image
    HTML 페이지 이미지 항목

    img 요소를 삽입합니다. 이 요소를 편집하여 해당 src 및 alt 텍스트를 지정합니다.

    Image를 디자인 뷰 화면으로 끌어서 놓으면 다음과 같은 HTML 태그가 문서에 삽입됩니다.

    <img alt="" src="">

    자세한 내용은 HtmlImage 서버 컨트롤 선언 구문, Image 웹 서버 컨트롤 개요, HtmlImage, HtmlInputImage 및 Image을 참조하십시오.

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

    size 특성이 없는 Dropdown select 요소를 삽입합니다. 기본적으로 첫째 목록 상자에는 id="select1"이 삽입되고, 둘째 상자에는 id="select2"가 삽입되는 식으로 진행됩니다.

    Select를 디자인 뷰 화면으로 끌어서 놓으면 다음과 같은 HTML 태그가 문서에 삽입됩니다.

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

    크기 속성의 값을 증가시키면 여러 줄로 된 select 요소를 만들 수 있습니다.

    자세한 내용은 HtmlSelect 서버 컨트롤 선언 구문, 방법: 스크립트 만들기 및 이벤트 처리기 편집, DropDownList 웹 서버 컨트롤 개요, ListBox 웹 서버 컨트롤 개요, HtmlSelect 및 DropDownList를 참조하십시오.

  • Horizontal Rule
    HTML 페이지 단락 구분선 항목

    hr 요소를 삽입합니다. 선의 두께를 늘리려면 size 특성을 편집합니다.

    Horizontal Rule을 디자인 뷰 화면으로 끌어서 놓으면 다음과 같은 HTML 태그가 문서에 삽입됩니다.

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

    자세한 내용은 HTML Horizontal Rule 컨트롤을 참조하십시오.

  • Div
    HTML 페이지 레이블

    ms_positioning="FlowLayout" 특성을 포함하는 div 요소를 삽입합니다. 너비와 높이를 제외하고 이 항목은 Flow Layout Panel과 동일합니다. div 요소 내에 포함된 텍스트의 서식을 지정하려면 여는 태그에 class="stylename" 특성을 추가합니다.

    Div를 디자인 뷰 화면으로 끌어서 놓으면 다음과 같은 HTML 태그가 문서에 삽입됩니다.

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

    자세한 내용은 HTML Div 컨트롤, Label 웹 서버 컨트롤 개요 및 Label을 참조하십시오.

참고 항목

참조

도구 상자

도구 상자, 표준 탭

기타 리소스

ASP.NET 웹 페이지를 위한 HTML 컨트롤