빠른 시작: 텍스트 표시(HTML)
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
JavaScript로 작성된 Windows 스토어 앱은 여러 가지 요소를 사용하여 텍스트를 표시할 수 있습니다. 읽기 전용 텍스트를 표시하기 위한 기본 요소에는 label, div, paragraph 및 heading이 포함됩니다. 이 빠른 시작에서는 이러한 요소를 사용하여 텍스트를 표시하는 방법을 보여 줍니다.
앱 기능 전체 프로세스 시리즈의 일부로 이 기능의 작동 방법을 살펴보세요.: Windows 스토어 앱 UI 전체 프로세스
사전 요구 사항
- 여기서는 JavaScript용 Windows 라이브러리 템플릿을 사용하여 JavaScript로 작성된 기본 Windows 스토어 앱을 만들 수 있다고 가정합니다. 첫 번째 앱을 만드는 자세한 내용은 JavaScript를 사용하여 첫 번째 Windows 스토어 앱 만들기를 참조하세요.
레이블, div, 단락 및 텍스트 영역
Label, div, paragraph 및 heading은 JavaScript로 작성된 Windows 스토어 앱에 읽기 전용 텍스트를 표시하기 위한 기본 컨트롤입니다. 이 HTML은 간단한 label 컨트롤을 정의하고 해당 텍스트를 설정하는 방법을 보여 줍니다.
<label>Hello, World!</label>
인라인 style 특성을 사용하여 다른 서식이 적용된 텍스트를 표시할 수 있습니다. 여기에서는 div, paragraph, label 및 heading 컨트롤과 함께 style 특성을 사용하여 다르게 서식이 지정된 여러 가지 텍스트 문자열을 정의하는 방법을 보여 줍니다.
참고 style 특성 대신 CSS 스타일시트를 사용하여 다른 서식이 적용된 텍스트를 표시할 수도 있습니다. 이렇게 하면 스타일을 한 번 정의한 다음 여러 컨트롤에서 이 스타일을 참조할 수 있습니다. 나중에 스타일 정의를 변경해야 할 경우에는 한 곳에서만 변경하면 됩니다. 자세한 내용은 CSS 스타일시트를 참조하세요.
<div style="font-family:Arial">Sample text formatting runs</div>
<!-- 'margin:0px' removes any default margins from the <p> element. -->
<p style="margin:0px; color:lightgray; font-family:'courier new'; font-size:24px">Courier New 24</p>
<label style="color:teal; font-family:'times new roman'; font-style:italic; font-size:18px">Times New Roman Italic 18</label><br />
<!-- 'padding:0px' remove any default padding from the <h1> element. -->
<h1 style="padding:0px; background-color:transparent; color:steelblue; font-family:Verdana; font-weight:bold; font-size:14px">Verdana Bold 14</h1>
다음은 결과입니다.
.png "run을 사용한 텍스트")
요약 및 다음 단계
label, div, paragraph 및 heading 요소를 만들어 앱에서 텍스트를 표시하는 방법을 알아보았습니다.