언어: HTML | XAML

기능별 컨트롤(HTML)

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

참조: 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;">
    <!-- 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

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;">
    <!-- Contents -->
</div>

참조: overflow

스크롤 뷰

사용자가 확대/축소할 수 있는 콘텐츠 보기를 표시하고 환경을 개선하는 추가 기능(예: 끌기 지점)을 제공합니다.


<div style=overflow:scroll;-ms-content-zooming:zoom>>
    <!-- Contents to edit. -->
</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 />

참조: 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만 해당)
DatePicker 밝은 스타일

날짜를 설정합니다.


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

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

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

관련 항목

컨트롤 목록
try.buildwinjs.com
빠른 시작: 컨트롤 추가
빠른 시작: WinJS 컨트롤 및 스타일 추가
Windows Phone의 WinJS API 변경 사항

 

 

표시:
© 2015 Microsoft