기능별 컨트롤(HTML)
[ 이 문서는 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만 해당)
메뉴를 표시합니다.<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
탐색 모음 명령(Windows만 해당)
탐색 모음 컨테이너에 있는 탐색 명령을 나타냅니다.<div data-win-control="WinJS.UI.NavBarCommand"></div>
탐색 모음 컨테이너(Windows만 해당)
탐색 모음에 탐색 모음 명령 그룹을 포함합니다.<div data-win-control="WinJS.UI.NavBarContainer"></div>
팝업 메뉴
"상황에 맞는 메뉴"에 대한 항목을 참조하세요.도구 모음
명령 집합을 표시합니다. Toolbar은(는) Flyout 또는 AppBar을(를) 포함하여 모든 위치에 나타날 수 있습니다.<div data-win-control="WinJS.UI.Toolbar"> </div>
참조: Toolbar
단추
뒤로 단추(Windows만 해당)
뒤로 탐색을 단추 형태로 제공합니다.<div><button data-win-control="WinJS.UI.BackButton"></div>
단추
단추 컨트롤을 표시합니다.
<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>
그리드 보기
그리드 레이아웃이 있는 ListView입니다. 자세한 내용은 "list view" 항목을 참조하세요.<div data-win-control="WinJS.UI.ListView" data-win-options="{layout: {type: WinJS.UI.GridLayout}}"></div>
점프 뷰어(jump viewer)
시맨틱 줌 참조반복기
데이터 집합에서 HTML을 생성합니다. 이 컨트롤을 사용하여 항목 목록을 생성할 수 있습니다.<div data-win-control="WinJS.UI.Repeater"></div>
시맨틱 줌
두 항목 모음 보기를 확대/축소할 수 있습니다.<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>
플라이아웃
콘텐츠 대화 상자
사용자의 주의 또는 명시적 동작이 필요하거나 앱의 다른 요소 조작을 일시적으로 차단하는 중요한 정보를 표시합니다.<div data-win-control="WinJS.UI.ContentDialog"> <!-- Content --> </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" />
메시지 대화 상자
사용자의 즉각적인 응답이 필요한 메시지를 표시합니다.팝업 메뉴
상황에 맞는 메뉴를 나타냅니다.var popupMenu = new 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;"> <!-- Child elements --> </div>
참조: display
그리드
열과 행으로 구성되는 가변 그리드 영역을 정의하는 CSS 레이아웃입니다.<div style="{display: -ms-grid}"> <!-- Child elements --> </div>
참조: display
허브(Windows만 해당)
탐색할 수 있는 섹션으로 구성된 허브 탐색 패턴을 만듭니다. 각 섹션은 허브 섹션으로 정의됩니다.<div data-win-control="WinJS.UI.Hub"></div>
참조: WinJS.UI.Hub
허브 섹션(Windows만 해당)
허브 섹션을 정의합니다.<div data-win-control="WinJS.UI.HubSection"></div>
항목 컨테이너
누르고, 살짝 밀고, 끌 수 있는 항목을 정의합니다.<div data-win-control="WinJS.UI.ItemContainer"></div>
이동 스크롤 뷰
"scroll view"에 대한 항목을 참조하세요.피벗
여러 항목을 표시하는 탭 컨트롤을 만듭니다.<div data-win-control='WinJS.UI.Pivot'></div>
참조: WinJS.UI.Pivot
피벗 항목
탭 컨트롤 내에 탭을 만듭니다.<div data-win-control='WinJS.UI.PivotItem'></div>
스크롤 막대
콘텐츠를 스크롤할 수 있는 컨테이너입니다. 요소의 overflow 스타일을 scroll 또는 auto로 설정하여 이 스크롤 기능을 추가합니다.<div style="overflow:scroll;"> <!-- Contents --> </div>
참조: overflow
스크롤 뷰
사용자가 확대/축소할 수 있는 콘텐츠 보기를 표시하고 환경을 개선하는 추가 기능(예: 끌기 지점)을 제공합니다.<div style=overflow:scroll;-ms-content-zooming:zoom>> <!-- Contents to edit. --> </div>
분할 보기
가장자리에서 나타나는 창과 사용 가능한 공간을 채우는 콘텐츠 영역의 두 부분으로 영역을 분할합니다.<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>
iframe
다른 문서를 표시할 수 있는 인라인 부동 프레임입니다.<iframe src="url" />
참조: iframe
페이지 컨트롤
탐색 앱의 사용자 지정 컨트롤 또는 페이지를 나타냅니다.분할 보기
가장자리에서 나타나는 창과 사용 가능한 공간을 채우는 콘텐츠 영역의 두 부분으로 영역을 분할합니다.<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" />
콤보 상자
"select"에 대한 항목을 참조하세요.날짜 선택(Windows만 해당)
날짜를 설정합니다.
<div data-win-control="WinJS.UI.DatePicker"></div>
참조: DatePicker
파일 업로드
입력 상자와 찾아보기 단추가 있는 파일 업로드 개체를 만듭니다.<input type="file" />
참조: input type=file
목록 상자
"select"에 대한 항목을 참조하세요.목록 보기
데이터 모음을 목록 또는 그리드 레이아웃으로 표시합니다.<div data-win-control="WinJS.UI.ListView"></div>
라디오 단추
값 집합 내의 단일 값으로 사용자의 선택을 제한하는 선택 컨트롤 형식입니다. 이렇게 하려면 각 단추에 동일한 이름을 할당하여 라디오 단추 집합의 각 단추를 함께 연결해야 합니다.<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>
선택
목록 상자, 콤보 상자 또는 드롭다운 목록을 나타냅니다.<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>
토글 스위치
두 상태 간을 전환할 수 있는 스위치를 나타냅니다.<div data-win-control="WinJS.UI.ToggleSwitch"></div>
참조: ToggleSwitch
텍스트 컨트롤
메일 입력 상자
하나 이상의 메일 주소를 수락하는 한 줄 입력 컨트롤입니다.<input type="email" />
참조: input type=email
여러 줄 입력 상자
"textarea"에 대한 항목을 참조하세요.숫자 입력 상자
숫자 값을 수락하는 한 줄 입력 컨트롤입니다.<input type="number" />
암호 입력 상자
사용자가 입력할 때 텍스트가 표시되지 않는다는 점만 제외하고 텍스트 입력 컨트롤과 비슷한 한 줄 텍스트 입력 컨트롤입니다.<input type="password" />
서식 있는 편집 상자/RTF 상자
텍스트 입력 상자와 비슷하지만 자식 요소를 포함하는 콘텐츠를 처리할 수 있는 텍스트 입력 기능을 제공하는 컨트롤입니다. RTF 상자를 만들려면 편집할 요소의 contentEditable 속성을 설정합니다.<div contentEditable="true"> <!-- Elements to edit. --> </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