컨트롤 목록(HTML)
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
JavaScript로 작성한 Windows 런타임 앱은 UI(사용자 인터페이스) 개발을 지원하는 포괄적인 컨트롤 라이브러리에 액세스할 수 있도록 합니다. 자체의 시각적 표현이 있는 컨트롤도 있고 다른 컨트롤이나 콘텐츠(예: 이미지 및 미디어)에 대한 컨테이너로 작용하는 컨트롤도 있습니다.
이 항목에서는 JavaScript 컨트롤을 사용한 일반적인 Windows 런타임 앱의 사전순 목록을 제공합니다.
A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y, Z
A
a
하이퍼텍스트 링크의 시작이나 대상을 지정합니다.<a href="url">Your text</a>참조: a
앱 바
앱 특정 명령을 표시하는 도구 모음을 제공합니다.<div data-win-control="WinJS.UI.AppBar"></div>참조: WinJS.UI.AppBar
오디오
문서에서 재생할 소리 또는 오디오 콘텐츠(예: 음악 또는 효과)를 지정합니다.<audio> <source src="uri" type="audioType" /> </audio>참조: audio
B
뒤로 단추(Windows만 해당)
뒤로 탐색을 단추 형태로 제공합니다.<div><button data-win-control="WinJS.UI.BackButton"></button></div>단추
.png "단추 컨트롤")
단추 컨트롤을 표시합니다.
<button>A button</button>또는
<input type="button" value="A button" />참조: button, input type=button
C
캔버스
문서에서 이미지 및 그래픽 그리기, 렌더링, 조작 등에 사용되는 개체를 제공합니다.<canvas />참조: canvas
확인란
.png "여러 확인란 컨트롤")
선택 또는 선택 취소할 수 있는 확인란을 표시합니다.
<input type="checkbox" />콤보 상자
"select"에 대한 항목을 참조하세요.콘텐츠 대화 상자
사용자의 주의 또는 명시적 동작이 필요하거나 앱의 다른 요소 조작을 일시적으로 차단하는 중요한 정보를 표시합니다.<div data-win-control="WinJS.UI.ContentDialog"> <!-- Content --> </div참조: ContentDialog
상황에 맞는 메뉴
Windows 스토어 앱의 텍스트 또는 UI 개체에서 작업(예: 클립보드 명령)에 액세스할 수 있는 경량 메뉴를 제공합니다.var menu = new Windows.UI.Popups.PopupMenu();
D
날짜 선택(Windows만 해당)
.png "DatePicker 밝은 스타일")
날짜를 설정합니다.
<div data-win-control="WinJS.UI.DatePicker"></div>참조: DatePicker
드롭다운 목록
"select"에 대한 항목을 참조하세요.
E
메일 입력 상자
하나 이상의 메일 주소를 수락하는 한 줄 입력 컨트롤입니다.<input type="email" />참조: input type=email
F
파일 업로드
입력 상자와 찾아보기 단추가 있는 파일 업로드 개체를 만듭니다.<input type="file" />참조: input type=file
가변 상자
상자 크기를 정의할 때 사용 가능한 공간을 고려하여 상대적인 크기와 위치를 사용하는 레이아웃을 정의합니다.<div style="display: -ms-box;"> <!-- Child elements --> </div>참조: display
대칭 이동 보기
모음을 한 번에 한 항목씩 표시합니다.<div data-win-control="WinJS.UI.FlipView"></div>플라이아웃(Windows만 해당)
사용자의 조작이 필요한 메시지를 표시합니다. 대화 상자와 달리 플라이아웃은 별도의 창을 만들지 않으며 다른 사용자 조작을 차단하지 않습니다.<div data-win-control="WinJS.UI.Flyout"></div>참조: WinJS.UI.Flyout
G
그리드
열과 행으로 구성되는 가변 그리드 영역을 정의하는 CSS 레이아웃입니다.<div style="{display: -ms-grid}"> <!-- Child elements --> </div>참조: display
그리드 보기
그리드 레이아웃이 있는 ListView입니다. 자세한 내용은 "list view" 항목을 참조하세요.<div data-win-control="WinJS.UI.ListView" data-win-options="{layout: {type: WinJS.UI.GridLayout}}"></div>
H
Html 컨트롤
HTML 페이지의 콘텐츠를 표시합니다.<div data-win-control="WinJS.UI.HtmlControl"></div>허브(Windows만 해당)
탐색할 수 있는 섹션으로 구성된 허브 탐색 패턴을 만듭니다. 각 섹션은 허브 섹션으로 정의됩니다.<div data-win-control="WinJS.UI.Hub"></div>참조: WinJS.UI.Hub
허브 섹션(Windows만 해당)
허브 섹션을 정의합니다.<div data-win-control="WinJS.UI.HubSection"></div>하이퍼링크
"a"에 대한 항목을 참조하세요.
I
iframe
다른 문서를 표시할 수 있는 인라인 부동 프레임입니다.<iframe src="url" />참조: iframe
img
이미지를 표시합니다.<img src="url" />참조: img
항목 컨테이너
누르고, 살짝 밀고, 끌 수 있는 항목을 정의합니다.<div data-win-control="WinJS.UI.ItemContainer"></div>
J
- 점프 뷰(jump view)
"semantic zoom"에 대한 항목을 참조하세요.
L
레이블
페이지에 있는 다른 요소에 대한 레이블을 지정합니다.<label for="otherControl">Label text</label> <input type="text" id="otherControl" />참조: label
목록 상자
"select"에 대한 항목을 참조하세요.목록 보기
데이터 모음을 목록 또는 그리드 레이아웃으로 표시합니다.<div data-win-control="WinJS.UI.ListView"></div>
M
미디어 요소
"audio" 및 "video"에 대한 항목을 참조하세요.미디어 플레이어
"audio" 및 "video"에 대한 항목을 참조하세요.메뉴
메뉴를 표시합니다. (Windows만 해당)<div data-win-control="WinJS.UI.Menu"></div>참조: WinJS.UI.Menu
메뉴 명령(Windows만 해당)
Menu 개체에 표시할 명령을 나타냅니다.<button data-win-control="WinJS.UI.MenuCommand" />메시지 대화 상자
사용자의 즉각적인 응답이 필요한 메시지를 표시합니다.여러 줄 입력 상자
"textarea"에 대한 항목을 참조하세요.
N
탐색 모음(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>숫자 입력 상자
숫자 값을 수락하는 한 줄 입력 컨트롤입니다.<input type="number" />
P
페이지 컨트롤
탐색 앱의 사용자 지정 컨트롤 또는 페이지를 나타냅니다.이동 스크롤 뷰
"scroll view"에 대한 항목을 참조하세요.암호 입력 상자
사용자가 입력할 때 텍스트가 표시되지 않는다는 점만 제외하고 텍스트 입력 컨트롤과 비슷한 한 줄 텍스트 입력 컨트롤입니다.<input type="password" />피벗
여러 항목을 표시하는 탭 컨트롤을 만듭니다.<div data-win-control='WinJS.UI.Pivot'></div>참조: WinJS.UI.Pivot
피벗 항목
탭 컨트롤 내에 탭을 만듭니다.<div data-win-control='WinJS.UI.PivotItem'></div>팝업 메뉴
"상황에 맞는 메뉴"에 대한 항목을 참조하세요.진행률 표시줄
.png "Progress 컨트롤 스타일")
작업이 진행 중임을 나타내는 표시줄을 표시합니다. 확정되지 않은 링은 Windows Phone 8.1에서 지원되지 않습니다.
<progress />참조: progress
진행률 링(Windows만 해당)
작업이 진행 중임을 나타내는 신호음을 표시합니다.<progress class="win-ring" style="width: 20px; height: 20px" />참조: progress
누름 단추
"button"에 대한 항목을 참조하세요.
R
라디오 단추
값 집합 내의 단일 값으로 사용자의 선택을 제한하는 선택 컨트롤 형식입니다. 이렇게 하려면 각 단추에 동일한 이름을 할당하여 라디오 단추 집합의 각 단추를 함께 연결해야 합니다.<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만 해당)
.png "평가 컨트롤")
사용자가 항목의 등급을 지정하거나 기존 등급을 볼 수 있게 합니다.
<div data-win-control="WinJS.UI.Rating"></div>참조: WinJS.UI.Rating
반복기
데이터 집합에서 HTML을 생성합니다. 이 컨트롤을 사용하여 항목 목록을 생성할 수 있습니다.<div data-win-control="WinJS.UI.Repeater"></div>다시 설정 단추
.png "다시 설정 단추")
양식의 데이터를 다시 설정합니다.
<button type="reset">Reset</button>참조: button, input type=reset
서식 있는 편집 상자/RTF 상자
텍스트 입력 상자와 비슷하지만 자식 요소를 포함하는 콘텐츠를 처리할 수 있는 텍스트 입력 기능을 제공하는 컨트롤입니다. RTF 상자를 만들려면 편집할 요소의 contentEditable 속성을 설정합니다.<div contentEditable="true"> <!-- Elements to edit. --> </div>참조: contentEditable
S
스크롤 막대
콘텐츠를 스크롤할 수 있는 컨테이너입니다. 요소의 overflow 스타일을 scroll 또는 auto로 설정하여 이 스크롤 기능을 추가합니다.<div style="overflow:scroll;"> <!-- Contents --> </div>참조: overflow
스크롤 뷰
사용자가 확대/축소할 수 있는 콘텐츠 보기를 표시하고 환경을 개선하는 추가 기능(예: 끌기 지점)을 제공합니다.<div style=overflow:scroll;-ms-content-zooming:zoom>> <!-- Contents to edit. --> </div>검색 상자(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
시맨틱 줌
두 항목 모음 보기를 확대/축소할 수 있습니다.<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>설정 플라이아웃(Windows만 해당)
앱 설정에 액세스할 수 있습니다.<div data-win-control="WinJS.UI.SettingsFlyout"></div>참조: SettingsFlyout
한 줄 입력란
"text box"에 대한 항목을 참조하세요.슬라이더
숫자 값을 선택할 수 있는 범위 슬라이더를 제공합니다.<input type="range" />참조: input type=range
분할 보기
가장자리에서 나타나는 창과 사용 가능한 공간을 채우는 콘텐츠 영역의 두 부분으로 영역을 분할합니다.<div data-win-control="WinJS.UI.SplitView"> </div>참조: SplitView
전송 단추
.png "전송 단추 컨트롤")
클릭하면 양식을 제출하는 단추를 만듭니다.
<button type="submit">Submit</button>참조: button, input type=submit
SVG
벡터 그래픽을 렌더링할 수 있는 SVG 문서 또는 문서 조각을 정의합니다.<svg xmlns="http://www.w3.org/2000/svg"></svg>참조: svg
T
텍스트 상자
한 줄 텍스트 입력 컨트롤입니다.<input type="text" />참조: input type=text
텍스트 영역
여러 줄 텍스트 입력 컨트롤입니다.<textarea></textarea>참조: textarea
시간 선택(Windows만 해당)
.png "TimePicker 밝은 스타일")
사용자가 시간을 지정할 수 있습니다.
<div data-win-control="WinJS.UI.TimePicker"></div>토글 스위치
두 상태 간을 전환할 수 있는 스위치를 나타냅니다.<div data-win-control="WinJS.UI.ToggleSwitch"></div>참조: ToggleSwitch
도구 모음
명령 집합을 표시합니다. Toolbar은(는) Flyout 또는 AppBar을(를) 포함하여 모든 위치에 나타날 수 있습니다.<div data-win-control="WinJS.UI.Toolbar"> </div>참조: Toolbar
도구 설명(Windows만 해당)
이미지, 서식 있는 텍스트 등과 같은 다양한 콘텐츠를 지원하여 항목에 대한 자세한 정보를 보여주는 도구 설명을 표시합니다.<div data-win-control="WinJS.UI.ToolTip"></div>참조: WinJS.UI.Tooltip
도구 설명, 단순
요소에 대한 간단한 텍스트 전용 도구 설명을 표시합니다.<element title="tooltip text" />참조: title
U
URL 입력 상자
URL을 수락하는 한 줄 텍스트 입력 컨트롤입니다.<input type="url" />참조: input type=url
V
동영상
문서에서 재생할 동영상 콘텐츠를 지정합니다.<video controls="controls"> <source src="url" type="videoType" /> </video>참조: video
Viewbox
단일 자식 요소를 확대하여 크기 조정 없이 사용 가능한 공간을 채웁니다. 이 컨트롤은 컨테이너의 크기 변화와 자식 요소의 크기 변화에 반응합니다. 예를 들어 미디어 쿼리를 수행하면 가로 세로 비율이 바뀔 수 있습니다.<div data-win-control="WinJS.UI.ViewBox"></div>참조: WinJS.UI.ViewBox
W
- 웹 뷰
"iframe"에 대한 항목을 참조하세요.
Z
- 확대/축소 가능한 스크롤 뷰
"scroll view"에 대한 항목을 참조하세요.