컨트롤 목록
언어: HTML | XAML

컨트롤 목록(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>

참조: WinJS.UI.BackButton

단추

단추 컨트롤

단추 컨트롤을 표시합니다.


<button>A button</button>

또는


<input type="button" value="A button" />

참조: button, input type=button

빠른 시작: 단추 추가

C

캔버스

문서에서 이미지 및 그래픽 그리기, 렌더링, 조작 등에 사용되는 개체를 제공합니다.


<canvas />

참조: canvas

빠른 시작: 캔버스에 그리기

확인란

여러 확인란 컨트롤

선택 또는 선택 취소할 수 있는 확인란을 표시합니다.


<input type="checkbox" />

참조: input type=checkbox

빠른 시작: 확인란 추가

콤보 상자

"select"에 대한 항목을 참조하세요.

콘텐츠 대화 상자

사용자의 주의 또는 명시적 동작이 필요하거나 앱의 다른 요소 조작을 일시적으로 차단하는 중요한 정보를 표시합니다.


<div 
  data-win-control="WinJS.UI.ContentDialog">
  <!-- Content -->
</div


참조: ContentDialog

상황에 맞는 메뉴

Windows 스토어 앱의 텍스트 또는 UI 개체에서 작업(예: 클립보드 명령)에 액세스할 수 있는 경량 메뉴를 제공합니다.


var menu = new Windows.UI.Popups.PopupMenu();


참조: Windows.UI.Popups.PopupMenu

D

날짜 선택(Windows만 해당)
DatePicker 밝은 스타일

날짜를 설정합니다.


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

참조: DatePicker

빠른 시작: 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>

참조: WinJS.UI.FlipView

빠른 시작: FlipView 추가

플라이아웃(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>

참조: WinJS.UI.ListView

빠른 시작: ListView 추가

H

Html 컨트롤

HTML 페이지의 콘텐츠를 표시합니다.


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

참조: WinJS.UI.HtmlControl

허브(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 허브 컨트롤 샘플

하이퍼링크

"a"에 대한 항목을 참조하세요.

I

iframe

다른 문서를 표시할 수 있는 인라인 부동 프레임입니다.


<iframe src="url" />

참조: iframe

img

이미지를 표시합니다.


<img src="url" />

참조: img

항목 컨테이너

누르고, 살짝 밀고, 끌 수 있는 항목을 정의합니다.


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

참조: WinJS.UI.ItemContainer

HTML ItemContainer 샘플

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>

참조: WinJS.UI.ListView

빠른 시작: ListView 추가

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" />

참조: WinJS.UI.MenuCommand

메시지 대화 상자

사용자의 즉각적인 응답이 필요한 메시지를 표시합니다.

참조: Windows.UI.Popups.MessageDialog

빠른 시작: 메시지 대화 상자 추가

여러 줄 입력 상자

"textarea"에 대한 항목을 참조하세요.

N

탐색 모음(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 컨트롤 샘플

숫자 입력 상자

숫자 값을 수락하는 한 줄 입력 컨트롤입니다.


<input type="number" />

참조: input type=number

P

페이지 컨트롤

탐색 앱의 사용자 지정 컨트롤 또는 페이지를 나타냅니다.

참조: WinJS.UI.Pages.PageControl

빠른 시작: 단일 페이지 탐색 사용

이동 스크롤 뷰

"scroll view"에 대한 항목을 참조하세요.

암호 입력 상자

사용자가 입력할 때 텍스트가 표시되지 않는다는 점만 제외하고 텍스트 입력 컨트롤과 비슷한 한 줄 텍스트 입력 컨트롤입니다.


<input type="password" />

참조: input type=password

피벗

여러 항목을 표시하는 탭 컨트롤을 만듭니다.


<div data-win-control='WinJS.UI.Pivot'></div>

참조: WinJS.UI.Pivot

피벗 항목

탭 컨트롤 내에 탭을 만듭니다.


<div data-win-control='WinJS.UI.PivotItem'></div>

참조: WinJS.UI.PivotItem

팝업 메뉴

"상황에 맞는 메뉴"에 대한 항목을 참조하세요.

진행률 표시줄

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만 해당)

평가 컨트롤

사용자가 항목의 등급을 지정하거나 기존 등급을 볼 수 있게 합니다.


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

참조: WinJS.UI.Rating

빠른 시작: 등급 추가

반복기

데이터 집합에서 HTML을 생성합니다. 이 컨트롤을 사용하여 항목 목록을 생성할 수 있습니다.


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

참조: WinJS.UI.Repeater

HTML Repeater 컨트롤 샘플

다시 설정 단추

다시 설정 단추

양식의 데이터를 다시 설정합니다.


<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>

참조: overflow, ms-content-zooming

검색 상자(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

시맨틱 줌

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


<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

설정 플라이아웃(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

전송 단추
전송 단추 컨트롤

클릭하면 양식을 제출하는 단추를 만듭니다.


<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만 해당)
TimePicker 밝은 스타일

사용자가 시간을 지정할 수 있습니다.


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

참조: WinJS.UI.TimePicker

빠른 시작: TimePicker 추가

토글 스위치

두 상태 간을 전환할 수 있는 스위치를 나타냅니다.


<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"에 대한 항목을 참조하세요.

관련 항목

try.buildwinjs.com

 

 

표시:
© 2017 Microsoft