다음을 통해 공유


기능별 컨트롤(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.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

단추

모음/데이터 컨트롤

  • 대칭 이동 보기
    모음을 한 번에 한 항목씩 표시합니다.

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

진행률 컨트롤

평가 컨트롤

  • 등급(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 변경 사항