다음을 통해 공유

도구 상자, HTML 탭

  • 아티클

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

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

작업

UI 요소

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

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

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

  • 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 Controls, HtmlInputButton 서버 컨트롤 선언 구문, How to: Create Scripts and Edit Event Handlers, Button Web Server Controls Overview, 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 Controls, 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 Controls, 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 Controls, HtmlInputText 서버 컨트롤 선언 구문, TextBox Web Server Control Overview, HtmlInputText 및 TextBox를 참조하십시오.

    보안 정보보안 정보

    모든 사용자 입력의 유효성을 검사하는 것이 좋습니다.자세한 내용은 Validating User Input in ASP.NET Web Pages를 참조하십시오.

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

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

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

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

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

    보안 정보보안 정보

    모든 사용자 입력의 유효성을 검사하는 것이 좋습니다.자세한 내용은 Validating User Input in ASP.NET Web Pages를 참조하십시오.

  • Input (Password)
    Visual Studio 암호 필드

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

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

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

    자세한 내용은 HTML Input Controls, HtmlInputPassword 서버 컨트롤 선언 구문, How to: Set a TextBox Web Server Control for Password Entry 및 Walkthrough: Validating User Input in a Web Forms Page를 참조하십시오.

    보안 정보보안 정보

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

  • 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 Controls, HtmlInputCheckBox 서버 컨트롤 선언 구문, CheckBox and CheckBoxList Web Server Controls Overview, 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 Controls, HtmlInputRadioButton 서버 컨트롤 선언 구문, RadioButton and RadioButtonList Web Server Controls Overview, HtmlInputRadioButton 및 RadioButton를 참조하십시오.

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

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

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

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

    자세한 내용은 HTML Input Controls, 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을 참조하십시오.

    보안 정보보안 정보

    모든 사용자 입력의 유효성을 검사하는 것이 좋습니다.자세한 내용은 Validating User Input in ASP.NET Web Pages를 참조하십시오.

  • 표
    HTMLpageToolbarTable 스크린 샷

    table 요소를 삽입합니다.

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

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

    자세한 내용은 HtmlTable 서버 컨트롤 선언 구문, Table, TableRow, and TableCell Web Server Control Overview, HtmlTable 및 Table를 참조하십시오.

  • Image
    HTML 페이지 이미지 항목

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

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

    <img alt="" src="">

    자세한 내용은 HtmlImage 서버 컨트롤 선언 구문, Image Web Server Control Overview, 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 서버 컨트롤 선언 구문, How to: Create Scripts and Edit Event Handlers, DropDownList Web Server Control Overview, ListBox Web Server Control Overview, HtmlSelect 및 DropDownList를 참조하십시오.

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

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

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

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

    자세한 내용은 HTML Horizontal Rule Control를 참조하십시오.

  • 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 Control, Label Web Server Control Overview 및 Label을 참조하십시오.

참고 항목

참조

도구 상자

도구 상자, 표준 탭

기타 리소스

HTML Controls for ASP.NET Web Pages