# 서식 있는 텍스트

## Content



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

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

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


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

일반 구성에는 [기본 보고서 항목 속성](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Common-Properties#base-properties), [공통 스타일 속성](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Common-Properties#style-properties), [텍스트 속성의 하위 집합](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Common-Properties#text-properties) 및 [표시 여부](/activereportsjs/docs/v2.2/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://www.w3schools.com/tags/tag_b.asp) \- 굵은 텍스트
* [<em>](https://www.w3schools.com/tags/tag_em.asp) 또는 [<i>](https://www.w3schools.com/tags/tag_i.asp) \- 기울임꼴 텍스트
* [<sup>](https://www.w3schools.com/tags/tag_sup.asp) \- 위 첨자 텍스트
* [<sub>](https://www.w3schools.com/tags/tag_sub.asp) \- 아래 첨자 텍스트

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

* [글꼴 패밀리](https://www.w3schools.com/cssref/pr_font_font-family.asp) - [서식 있는 텍스트 보고서 항목](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Common-Properties#text-properties)의 ```글꼴 패밀리``` 속성을 재정의합니다.
* [글꼴 크기](https://www.w3schools.com/cssref/pr_font_font-size.asp) - [서식 있는 텍스트 보고서 항목](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Common-Properties#text-properties)의 ```글꼴 크기``` 속성을 재정의합니다.
* [글꼴 스타일](https://www.w3schools.com/cssref/pr_font_font-style.asp) - [서식 있는 텍스트 보고서 항목](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Common-Properties#text-properties)의 ```글꼴 스타일``` 속성을 재정의합니다.
* [글꼴 두께](https://www.w3schools.com/cssref/pr_font_weight.asp) - [서식 있는 텍스트 보고서 항목](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Common-Properties#text-properties)의 ```글꼴 두께``` 속성을 재정의합니다.
* [색](https://www.w3schools.com/cssref/pr_text_color.asp) - [보고서 항목](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Common-Properties#style-properties)의 ```색``` 속성을 재정의합니다.
* [배경색](https://www.w3schools.com/cssref/pr_background-color.asp) - [보고서 항목](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Common-Properties#style-properties)의 ```배경색``` 속성을 재정의합니다.
* [배경 이미지](https://www.w3schools.com/cssref/pr_background-image.asp) - [보고서 항목](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Common-Properties#style-properties)의 ```배경 이미지``` 속성을 재정의합니다.
* [텍스트 맞춤](https://www.w3schools.com/cssref/pr_text_text-align.asp) - [<p>](https://www.w3schools.com/tags/tag_p.asp) 태그에만 해당
* [텍스트 들여쓰기](https://www.w3schools.com/cssref/pr_text_text-indent.asp) - [<p>](https://www.w3schools.com/tags/tag_p.asp) 태그에만 해당
* [텍스트 장식](https://www.w3schools.com/cssref/pr_text_text-decoration.asp) - ```밑줄``` 및 ```가운데 줄``` 값이 지원됩니다.
* [선 스타일 유형](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type) - [<ol>](https://www.w3schools.com/tags/tag_ol.asp) 및 [<ul>](https://www.w3schools.com/tags/tag_ul.asp) 태그에만 해당

```값``` [식](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Common-Properties#expression)은 위 태그 및 스타일을 사용하여 혼합 서식 콘텐츠를 설정합니다. [보간 구문](/activereportsjs/docs/v2.2/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/v2.2/ReportAuthorGuide/Expressions/references#data-set-fields)이고 필드 값이 ```HTML``` 콘텐츠인 경우 지원되는 태그 및 스타일이 인식되어 이에 따라 렌더링됩니다.

### 레이아웃

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