기능별 컨트롤(HTML)

아티클
03/04/2016

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

JavaScript로 작성한 Windows 런타임 앱은 많은 기능을 수행하는 컨트롤을 제공합니다. 비슷한 기능을 제공하는 컨트롤을 비교하여 시나리오에 적합한 컨트롤을 선택할 수 있습니다. 컨트롤의 사전순 목록을 보려면 컨트롤 목록을 참조하세요.

앱 기능 전체 프로세스 시리즈의 일부로서 작업에서 이 기능을 살펴보세요. : Windows 스토어 앱 UI 전체 프로세스

앱 바 및 명령

앱 바
앱 특정 명령을 표시하는 도구 모음을 제공합니다.
```
<div data-win-control="WinJS.UI.AppBar"></div>
```
참조: WinJS.UI.AppBar

빠른 시작: 앱 바 추가
상황에 맞는 메뉴
JavaScript로 작성한 Windows 런타임 앱의 텍스트 또는 UI 개체에서 작업(예: 클립보드 명령)에 액세스할 수 있는 경량 메뉴를 제공합니다.
```
var menu = new Windows.UI.Popups.PopupMenu();
```
참조: Windows.UI.Popups.PopupMenu
메뉴(Windows만 해당)
메뉴를 표시합니다.
```
<div data-win-control="WinJS.UI.Menu"></div>
```
참조: Menu
메뉴 명령(Windows만 해당)
Menu 개체에 표시할 명령을 나타냅니다.
```
<button data-win-control="WinJS.UI.MenuCommand" />
```
참조: MenuCommand
탐색 모음(Windows만 해당)
도구 모음에 사용자가 표시하거나 숨길 수 있는 탐색 명령을 표시합니다.
```
<div data-win-control="WinJS.UI.NavBar"></div>
```
참조: WinJS.UI.NavBar

HTML NavBar 컨트롤 샘플
탐색 모음 명령(Windows만 해당)
탐색 모음 컨테이너에 있는 탐색 명령을 나타냅니다.
```
<div data-win-control="WinJS.UI.NavBarCommand"></div>
```
참조: WinJS.UI.NavBarCommand

HTML NavBar 컨트롤 샘플
탐색 모음 컨테이너(Windows만 해당)
탐색 모음에 탐색 모음 명령 그룹을 포함합니다.
```
<div data-win-control="WinJS.UI.NavBarContainer"></div>
```
참조: WinJS.UI.NavBarContainer

HTML NavBar 컨트롤 샘플
팝업 메뉴
"상황에 맞는 메뉴"에 대한 항목을 참조하세요.
도구 모음
명령 집합을 표시합니다. Toolbar은(는) Flyout 또는 AppBar을(를) 포함하여 모든 위치에 나타날 수 있습니다.
```
<div data-win-control="WinJS.UI.Toolbar">
</div>
```
참조: Toolbar

단추

뒤로 단추(Windows만 해당)
뒤로 탐색을 단추 형태로 제공합니다.
```
<div><button data-win-control="WinJS.UI.BackButton"></div>
```
참조: WinJS.UI.WinJS.UI.BackButton
단추

단추 컨트롤을 표시합니다.
```
<button>A button</button>
```
또는
```
<input type="button" value="A button" />
```
참조: button, input type=button

빠른 시작: 단추 추가
누름 단추
단추 참조
다시 설정 단추

양식의 데이터를 다시 설정합니다.
```
<button type="reset">Reset</button>
```
참조: button, input type=reset

빠른 시작: 단추 추가
전송 단추

클릭하면 양식을 제출하는 단추를 만듭니다.
```
<button type="submit">Submit</button>
```
참조: button, input type=submit

빠른 시작: 단추 추가

모음/데이터 컨트롤

대칭 이동 보기
모음을 한 번에 한 항목씩 표시합니다.
```
<div data-win-control="WinJS.UI.FlipView"></div>
```
참조: WinJS.UI.FlipView

빠른 시작: FlipView 추가
그리드 보기
그리드 레이아웃이 있는 ListView입니다. 자세한 내용은 "list view" 항목을 참조하세요.
```
<div data-win-control="WinJS.UI.ListView" 
    data-win-options="{layout: {type: WinJS.UI.GridLayout}}"></div>
```
참조: WinJS.UI.ListView

빠른 시작: ListView 추가
점프 뷰어(jump viewer)
시맨틱 줌 참조
반복기
데이터 집합에서 HTML을 생성합니다. 이 컨트롤을 사용하여 항목 목록을 생성할 수 있습니다.
```
<div data-win-control="WinJS.UI.Repeater"></div>
```
참조: WinJS.UI.Repeater

HTML Repeater 컨트롤 샘플

시맨틱 줌
두 항목 모음 보기를 확대/축소할 수 있습니다.

<div data-win-control="WinJS.UI.SemanticZoom">

  <!-- Control that provides the zoomed-in view. -->
  <div id="zoomedInView" data-win-control="WinJS.UI.ListView"></div>

  <!-- Control that provides the zoomed-out view. -->
  <div id="zoomedOutView" data-win-control="WinJS.UI.ListView"></div>

</div>

참조: WinJS.UI.SemanticZoom

플라이아웃

콘텐츠 대화 상자
사용자의 주의 또는 명시적 동작이 필요하거나 앱의 다른 요소 조작을 일시적으로 차단하는 중요한 정보를 표시합니다.
```
<div 
  data-win-control="WinJS.UI.ContentDialog">
  
</div
```
참조: ContentDialog
상황에 맞는 메뉴
"popup menu"를 참조하세요.
플라이아웃(Windows만 해당)
사용자의 조작이 필요한 메시지를 표시합니다. 메시지 대화 상자와 달리 플라이아웃은 별도의 창을 만들지 않으며 다른 사용자 조작을 차단하지 않습니다.
```
<div data-win-control="WinJS.UI.Flyout"></div>
```
참조: WinJS.UI.Flyout

빠른 시작: 플라이아웃 추가
메뉴(Windows만 해당)
메뉴를 표시합니다.
```
<div data-win-control="WinJS.UI.Menu"></div>
```
참조: WinJS.UI.Menu
메뉴 명령(Windows만 해당)
Menu 개체에 표시할 명령을 나타냅니다.
```
<button data-win-control="WinJS.UI.MenuCommand" />
```
참조: WinJS.UI.MenuCommand
메시지 대화 상자
사용자의 즉각적인 응답이 필요한 메시지를 표시합니다.

참조: Windows.UI.Popups.MessageDialog

빠른 시작: 메시지 대화 상자 추가
팝업 메뉴
상황에 맞는 메뉴를 나타냅니다.
```
var popupMenu = new Windows.UI.Popups.PopupMenu();
```
참조: Windows.UI.Popups.PopupMenu
설정 플라이아웃(Windows만 해당)
앱 설정에 액세스할 수 있습니다.
```
<div data-win-control="WinJS.UI.SettingsFlyout"></div>
```
참조: SettingsFlyout
도구 설명(Windows만 해당)
이미지, 서식 있는 텍스트 등과 같은 다양한 콘텐츠를 지원하여 항목에 대한 자세한 정보를 보여주는 도구 설명을 표시합니다.
```
<div data-win-control="WinJS.UI.ToolTip"></div>
```
참조: WinJS.UI.Tooltip
도구 설명, 단순
요소에 대한 간단한 텍스트 전용 도구 설명을 표시합니다.
```
<element title="tooltip text" />
```
참조: title

그래픽

캔버스
문서에서 이미지 및 그래픽 그리기, 렌더링, 조작 등에 사용되는 개체를 제공합니다.
```
<canvas />
```
참조: canvas

빠른 시작: 캔버스에 그리기
SVG
벡터 그래픽을 렌더링할 수 있는 SVG 문서 또는 문서 조각을 정의합니다.
```
<svg xmlns="http://www.w3.org/2000/svg"></svg>
```
참조: svg

이미지

img
이미지를 표시합니다.
```
<img src="url" />
```
참조: img

레이아웃 컨트롤

가변 상자
상자 크기를 정의할 때 사용 가능한 공간을 고려하여 상대적인 크기와 위치를 사용한다는 점에서 CSS 레이아웃에 해당합니다.
```
<div style="display: -ms-box;">
    
</div>
```
참조: display
그리드
열과 행으로 구성되는 가변 그리드 영역을 정의하는 CSS 레이아웃입니다.
```
<div style="{display: -ms-grid}">
    
</div>
```
참조: display
허브(Windows만 해당)
탐색할 수 있는 섹션으로 구성된 허브 탐색 패턴을 만듭니다. 각 섹션은 허브 섹션으로 정의됩니다.
```
<div data-win-control="WinJS.UI.Hub"></div>
```
참조: WinJS.UI.Hub

HTML 허브 컨트롤 샘플
허브 섹션(Windows만 해당)
허브 섹션을 정의합니다.
```
<div data-win-control="WinJS.UI.HubSection"></div>
```
참조: WinJS.UI.HubSection

HTML 허브 컨트롤 샘플
항목 컨테이너
누르고, 살짝 밀고, 끌 수 있는 항목을 정의합니다.
```
<div data-win-control="WinJS.UI.ItemContainer"></div>
```
참조: WinJS.UI.WinJS.UI.ItemContainer

HTML ItemContainer 샘플
이동 스크롤 뷰
"scroll view"에 대한 항목을 참조하세요.
피벗
여러 항목을 표시하는 탭 컨트롤을 만듭니다.
```
<div data-win-control='WinJS.UI.Pivot'></div>
```
참조: WinJS.UI.Pivot
피벗 항목
탭 컨트롤 내에 탭을 만듭니다.
```
<div data-win-control='WinJS.UI.PivotItem'></div>
```
참조: WinJS.UI.PivotItem
스크롤 막대
콘텐츠를 스크롤할 수 있는 컨테이너입니다. 요소의 overflow 스타일을 scroll 또는 auto로 설정하여 이 스크롤 기능을 추가합니다.
```
<div style="overflow:scroll;">
    
</div>
```
참조: overflow
스크롤 뷰
사용자가 확대/축소할 수 있는 콘텐츠 보기를 표시하고 환경을 개선하는 추가 기능(예: 끌기 지점)을 제공합니다.
```
<div style=overflow:scroll;-ms-content-zooming:zoom>>
    
</div>
```
참조: overflow, ms-content-zooming
분할 보기
가장자리에서 나타나는 창과 사용 가능한 공간을 채우는 콘텐츠 영역의 두 부분으로 영역을 분할합니다.
```
<div data-win-control="WinJS.UI.SplitView">
</div>
```
참조: SplitView
Viewbox
단일 자식 요소를 확대하여 크기 조정 없이 사용 가능한 공간을 채웁니다. 이 컨트롤은 컨테이너의 크기 변화와 자식 요소의 크기 변화에 반응합니다. 예를 들어 미디어 쿼리를 수행하면 가로 세로 비율이 바뀔 수 있습니다.
```
<div data-win-control="WinJS.UI.ViewBox"></div>
```
참조: WinJS.UI.ViewBox
확대/축소 가능한 스크롤 뷰
"scroll view"에 대한 항목을 참조하세요.

미디어 컨트롤

오디오
문서에서 재생할 소리 또는 오디오 콘텐츠(예: 음악 또는 효과)를 지정합니다.
```
<audio>
    <source src="uri" type="audioType" />
</audio>
```
참조: audio
미디어 요소
"audio" 및 "video"에 대한 항목을 참조하세요.
미디어 플레이어
"audio" 및 "video"에 대한 항목을 참조하세요.
동영상
문서에서 재생할 동영상 콘텐츠를 지정합니다.
```
<video controls="controls">
   <source src="url" type="videoType" />
</video> 
```
참조: video

탐색

Html 컨트롤
HTML 페이지의 콘텐츠를 표시합니다.
```
<div data-win-control="WinJS.UI.HtmlControl"></div>
```
참조: WinJS.UI.HtmlControl
iframe
다른 문서를 표시할 수 있는 인라인 부동 프레임입니다.
```
<iframe src="url" />
```
참조: iframe
페이지 컨트롤
탐색 앱의 사용자 지정 컨트롤 또는 페이지를 나타냅니다.

참조: WinJS.UI.Pages.PageControl

빠른 시작: 단일 페이지 탐색 사용
분할 보기
가장자리에서 나타나는 창과 사용 가능한 공간을 채우는 콘텐츠 영역의 두 부분으로 영역을 분할합니다.
```
<div data-win-control="WinJS.UI.SplitView">
</div>
```
참조: SplitView
웹 뷰
"iframe"에 대한 항목을 참조하세요.

진행률 컨트롤

진행률 표시줄

작업이 진행 중임을 나타내는 표시줄을 표시합니다.
```
<progress />
```
참조: progress

빠른 시작: 진행률 컨트롤 추가
진행률 링(Windows만 해당)
작업이 진행 중임을 나타내는 신호음을 표시합니다.
```
<progress class="win-ring" style="width: 20px; height: 20px" />
```
참조: progress

빠른 시작: 진행률 컨트롤 추가

평가 컨트롤

등급(Windows만 해당)

사용자가 항목의 등급을 지정하거나 기존 등급을 볼 수 있게 합니다.
```
<div data-win-control="WinJS.UI.Rating"></div>
```
참조: WinJS.UI.Rating

빠른 시작: 등급 추가

선택 컨트롤

확인란

선택 또는 선택 취소할 수 있는 확인란을 표시합니다.
```
<input type="checkbox" />
```
참조: input type=checkbox

빠른 시작: 확인란 추가
콤보 상자
"select"에 대한 항목을 참조하세요.
날짜 선택(Windows만 해당)

날짜를 설정합니다.
```
<div data-win-control="WinJS.UI.DatePicker"></div>
```
참조: DatePicker

빠른 시작: DatePicker 추가
파일 업로드
입력 상자와 찾아보기 단추가 있는 파일 업로드 개체를 만듭니다.
```
<input type="file" />
```
참조: input type=file
목록 상자
"select"에 대한 항목을 참조하세요.
목록 보기
데이터 모음을 목록 또는 그리드 레이아웃으로 표시합니다.
```
<div data-win-control="WinJS.UI.ListView"></div>
```
참조: WinJS.UI.ListView

빠른 시작: ListView 추가
라디오 단추
값 집합 내의 단일 값으로 사용자의 선택을 제한하는 선택 컨트롤 형식입니다. 이렇게 하려면 각 단추에 동일한 이름을 할당하여 라디오 단추 집합의 각 단추를 함께 연결해야 합니다.
```
<input type="radio" id="redRadio" name="colorRadio" /><label for="redRadio">Red</label>   
<input type="radio" id="greedRadio" name="colorRadio" /><label for="greedRadio">Green</label>
<input type="radio" id="blueRadio" name="colorRadio" /><label for="blueRadio">Blue</label>
```
참조: input type=radio
범위
"slider"에 대한 항목을 참조하세요.
검색 상자(Windows만 해당)
사용자가 검색 쿼리를 수행하고 검색 제안을 선택할 수 있게 해 줍니다.
```
<div data-win-control="WinJS.UI.SearchBox"></div>
```
참조: WinJS.UI.SearchBox

SearchBox 컨트롤 샘플

선택
목록 상자, 콤보 상자 또는 드롭다운 목록을 나타냅니다.

<select>
    <option>Apple</option>
    <option>Banana</option>
    <option>Grape</option>
    <option>Orange</option>
    <option>Pear</option>
    <option>Watermelon</option>
</select>

참조: select

슬라이더
숫자 값을 선택할 수 있는 범위 슬라이더를 제공합니다.
```
<input type="range" />
```
참조: input type=range
시간 선택(Windows만 해당)

사용자가 시간을 지정할 수 있습니다.
```
<div data-win-control="WinJS.UI.TimePicker"></div>
```
참조: WinJS.UI.TimePicker

빠른 시작: TimePicker 추가
토글 스위치
두 상태 간을 전환할 수 있는 스위치를 나타냅니다.
```
<div data-win-control="WinJS.UI.ToggleSwitch"></div>
```
참조: ToggleSwitch

텍스트 컨트롤

메일 입력 상자
하나 이상의 메일 주소를 수락하는 한 줄 입력 컨트롤입니다.
```
<input type="email" />
```
참조: input type=email
여러 줄 입력 상자
"textarea"에 대한 항목을 참조하세요.
숫자 입력 상자
숫자 값을 수락하는 한 줄 입력 컨트롤입니다.
```
<input type="number" />
```
참조: input type=number
암호 입력 상자
사용자가 입력할 때 텍스트가 표시되지 않는다는 점만 제외하고 텍스트 입력 컨트롤과 비슷한 한 줄 텍스트 입력 컨트롤입니다.
```
<input type="password" />
```
참조: input type=password
서식 있는 편집 상자/RTF 상자
텍스트 입력 상자와 비슷하지만 자식 요소를 포함하는 콘텐츠를 처리할 수 있는 텍스트 입력 기능을 제공하는 컨트롤입니다. RTF 상자를 만들려면 편집할 요소의 contentEditable 속성을 설정합니다.
```
<div contentEditable="true">
    
</div>
```
참조: contentEditable
한 줄 입력란
"text box"에 대한 항목을 참조하세요.
텍스트 상자
한 줄 텍스트 입력 컨트롤입니다.
```
<input type="text" />
```
참조: input type=text
텍스트 영역
여러 줄 텍스트 입력 컨트롤입니다.
```
<textarea></textarea>
```
참조: textarea
URL 입력 상자
URL을 수락하는 한 줄 텍스트 입력 컨트롤입니다.
```
<input type="url" />
```
참조: input type=url

사용자 도움말

레이블
페이지에 있는 다른 요소에 대한 레이블을 지정합니다.
```
<label for="otherControl">Label text</label>
<input type="text" id="otherControl" />
```
참조: label
도구 설명(Windows만 해당)
이미지, 서식 있는 텍스트 등과 같은 다양한 콘텐츠를 지원하여 항목에 대한 자세한 정보를 보여주는 도구 설명을 표시합니다.
```
<div data-win-control="WinJS.UI.ToolTip"></div>
```
참조: WinJS.UI.Tooltip
도구 설명, 단순
요소에 대한 간단한 텍스트 전용 도구 설명을 표시합니다.
```
<element title="tooltip text" />
```
참조: title