# 서식 있는 텍스트

## Content

`서식 있는 텍스트` 보고서 항목은 보고서에 정적 또는 동적 혼합 서식 텍스트를 표시합니다. 이 항목을 사용하여 메일 병합 보고서, 레이블을 만들거나 데이터 소스의 서식이 적용된 콘텐츠를 표시합니다.

### 서식 있는 텍스트 추가

[도구 상자](/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface#toolbox)에서 해당 항목을 두 번 클릭하거나 보고서 페이지 영역 또는 다른 컨테이너(예: [밴드 목록 섹션](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/BandedList))로 끌어 놓아 보고서에 `서식 있는 텍스트`를 추가할 수 있습니다.

### 일반 서식 있는 텍스트 구성

일반 구성에는 [기본 보고서 항목 속성](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#base-properties), [공통 스타일 속성](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#style-properties), [텍스트 속성의 하위 집합](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#text-properties) 및 [표시 여부](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#visibility)가 있습니다.

### 내용

`마크업 유형` 속성은 혼합 서식 콘텐츠의 언어를 설정합니다. 현재 유일하게 지원되는 언어는 `HTML`입니다. `값` 속성에서 다음 HTML 태그를 사용할 수 있습니다.

* [`<p>`](https://www.w3schools.com/tags/tag_p.asp) \- 단락
* [`<span>`](https://www.w3schools.com/tags/tag_span.asp) \- 일반적인 인라인 컨테이너
* [`<h1>` - `<h6>`](https://www.w3schools.com/tags/tag_hn.asp) \- 섹션 제목
* [`<ul>`](https://www.w3schools.com/tags/tag_ul.asp) \- 순서가 없는 목록
* [`<ol>`](https://www.w3schools.com/tags/tag_ol.asp) \- 정렬된 목록
* [`<li>`](https://www.w3schools.com/tags/tag_li.asp) \- 순서가 있거나 순서가 없는 목록의 항목
* [`<a>`](https://www.w3schools.com/tags/tag_a.asp) - [href 속성](https://www.w3schools.com/tags/att_a_href.asp)이 포함된 하이퍼링크
* [`<strong>`](https://www.w3schools.com/tags/tag_strong.asp) 또는 [`<b>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b) \- 굵은 글씨
* [`<em>`](https://www.w3schools.com/tags/tag_em.asp) 또는 [`<i>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i) \- 이탤릭체 텍스트
* [`<sup>`](https://www.w3schools.com/tags/tag_sup.asp) \- 위 첨자 텍스트
* [`<sub>`](https://www.w3schools.com/tags/tag_sub.asp) \- 아래 첨자 텍스트
* [`<img>`](https://www.w3schools.com/tags/tag_img.asp) \- 이미지

위 태그에는 다음 CSS 스타일이 지원됩니다.

* [font-family](https://www.w3schools.com/cssref/pr_font_font-family.asp) - [서식 있는 텍스트 보고서 항목](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#text-properties)의 `글꼴 패밀리` 속성을 재정의합니다.
* [font-size](https://www.w3schools.com/cssref/pr_font_font-size.asp) - [서식 있는 텍스트 보고서 항목](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#text-properties)의 `글꼴 크기` 속성을 재정의합니다.
* [font-style](https://www.w3schools.com/cssref/pr_font_font-style.asp) - [서식 있는 텍스트 보고서 항목](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#text-properties)의 `글꼴 스타일` 속성을 재정의합니다.
* [font-weight](https://www.w3schools.com/cssref/pr_font_weight.asp) - [서식 있는 텍스트 보고서 항목](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#text-properties)의 `글꼴 두께` 속성을 재정의합니다.
* [color](https://www.w3schools.com/cssref/pr_text_color.asp) - [보고서 항목](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#style-properties)의 `색` 속성을 재정의합니다.
* [background-color](https://www.w3schools.com/cssref/pr_background-color.asp) - [보고서 항목](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#style-properties)의 `배경색` 속성을 재정의합니다.
* [background-image](https://www.w3schools.com/cssref/pr_background-image.asp) - [보고서 항목](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#style-properties)의 `배경 이미지` 속성을 재정의합니다.
* [text-align](https://www.w3schools.com/cssref/pr_text_text-align.asp) \- 지원되는 [블록 수준 요소](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements)에서만 작동합니다.
* [text-indent](https://www.w3schools.com/cssref/pr_text_text-indent.asp) \- 지원되는 [블록 수준 요소](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements)에서만 작동합니다.
* [text-decoration](https://www.w3schools.com/cssref/pr_text_text-decoration.asp) - `underline (밑줄)` 및 `line-through(가운데 줄)` 값이 지원됩니다.
* [line-height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) - `pt`, `pc`, `in`, `mm`, `cm`, `em` [길이 단위](https://developer.mozilla.org/en-US/docs/Web/CSS/length), `normal` 키워드, 그리고 [백분율](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage), [숫자](https://developer.mozilla.org/en-US/docs/Web/CSS/number) 값이 지원됩니다.
* [list-style-type](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type) - `<ul>` 또는 `<ol>` 요소에만 적용됩니다.
* [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width)와 [height](https://developer.mozilla.org/en-US/docs/Web/CSS/height) - `<img>` 요소에만 적용됩니다.

`img` 요소는 외부 이미지의 URL로 설정할 수 있는 [src](https://www.w3schools.com/tags/att_img_src.asp) 속성을 지원합니다. 만약 [내장된 이미지](/activereportsjs/docs/ReportAuthorGuide/보고서-구성/Report-Layouts)나 데이터 세트의 이미지 데이터를 표시하려는 경우, `img` 태그에 대해서 다음 `data-*` 속성을 사용할 수 있습니다:

* `data-source` 속성은 `Embedded` 및 `Database` 값을 허용합니다.
* `data-value` 속성은 내장된 이미지의 이름이나 이미지 데이터가 포함된 데이터 세트 필드를 허용합니다.
* `data-mime-type` 속성은 이미지의 MIME 유형을 허용합니다. 지원되는 유형은 `image/jpeg`, `image/png` 및 `image/svg+xml` 입니다.

`값` [표현식](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#expression)은 위 태그 및 스타일을 사용하여 혼합 서식 콘텐츠를 설정합니다. [보간 구문](/activereportsjs/docs/ReportAuthorGuide/Expressions)을 사용하면 서식 있는 텍스트의 동적 콘텐츠를 설정할 수 있습니다. 예를 들어 다음과 같습니다.

```html
<p>Thank you for your purchase {name}!</p>
<p>Your order number is: #{orderID}</p>
<p>If you require any changes to your order or delivery address you must <a href="https://tradecompany/changeorder/{orderID}">contact us</a>
<span style="color:red;font-weight:bold">as soon as possible</span> and it might not be possible if your order has already gone through to fulfilment.</p>
```

런타임 시 이 `값` 속성이 있는 서식 있는 텍스트는 다음 출력을 생성합니다.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/RichTextOutput.png)

`값` 속성이 [바인딩된 필드 참조](/activereportsjs/docs/ReportAuthorGuide/Expressions/references#data-set-fields)이고 필드 값이 `HTML` 콘텐츠인 경우 지원되는 태그 및 스타일이 인식되어 이에 따라 렌더링됩니다.

### 레이아웃

* `함께 유지` 플래그는 서식 있는 텍스트가 맞는 경우 항상 단일 페이지에 나타나도록 합니다.
* `확장 가능` 플래그는 늘어나는 콘텐츠를 수용하기 위해 서식 있는 텍스트가 높이를 늘릴 수 있는지 여부를 나타냅니다.