리치 텍스트 사용하기

## 학습 과정 소개

리치 텍스트를 사용할 수 있는 컴포넌트와 태그를 알아봅시다.

##### 참고 가이드

  * [말풍선 만들기](/docs?postId=119)
  * [TextRendererComponent](/apiReference/Components/TextRendererComponent)
  * [TextGUIRendererComponent](/apiReference/Components/TextGUIRendererComponent)
  * [ChatBalloonComponent](/apiReference/Components/ChatBalloonComponent)
  * [TextComponent](/apiReference/Components/TextComponent)



## 리치 텍스트

리치 텍스트에서 제공하는 다양한 태그를 사용해 글씨를 강조하거나, 편집할 수 있습니다. 메이플스토리 월드에서 리치 텍스트를 사용할 수 있는 컴포넌트는 총 4가지로, TextRendererComponent, TextGUIRendererComponent, ChatBalloonComponent, TextComponent입니다. 이 중 TextComponent에서는 일부 리치 텍스트 태그만 사용할 수 있습니다.

### 리치 텍스트 사용

TextRendererComponent, TextGUIRendererComponent, ChatBalloonComponent에서 사용할 수 있는 태그 목록입니다. IsRichText 프로퍼티를 활성화해야 리치 텍스트를 사용할 수 있습니다.

  * <태그이름="값">



여러 개의 태그를 사용할 때는 ``을 사용해 태그가 적용되는 범위를 제한할 수 있습니다. 예를 들어 `~~Maple StoryWorld~~`로 입력하면 아래와 같이 지정한 범위에서만 태그가 적용됩니다.

[png](1769416799792433bd6914b3c4446aeda6ebefe51379f)

### 리치 텍스트 태그 목록

[{"태그":"align","설명":"정렬을 변경합니다.","예시":"<\/align=\"center\">"},{"태그":"allcaps","설명":"영어 알파벳을 모두 대문자로 변환합니다.","예시":"<\/allcaps>"},{"태그":"alpha","설명":"불투명도를 변경합니다.","예시":"<\/alpha=#80>"},{"태그":"b","설명":"굵은 글씨로 나타냅니다.","예시":"글자 입력<\/b>"},{"태그":"br","설명":"문장을 줄 바꿈합니다.","예시":"첫 번째 문장두 번째 문장"},{"태그":"color","설명":"색상을 결정합니다. 색상은 헥스 코드(#00000000) 형식으로 입력합니다. 색상명으로 색을 표현할 수 있는 이름은 아래와 같습니다. black, blue, green, orange, purple, red, white, yellow","예시":"<\/color=#ff0000>,<\/color=green>"},{"태그":"cspace","설명":"문자의 자간을 조정합니다.","예시":"<\/cspace=10>"},{"태그":"i","설명":"기울임체로 변경합니다.","예시":"<\/i>"},{"태그":"indent","설명":"문단을 내어쓰기 합니다.","예시":"<\/indent=20%>"},{"태그":"line-height","설명":"줄 간격을 조정합니다.","예시":"<\/line-height=150%>"},{"태그":"line-indent","설명":"문단의 첫 번째 줄을 들여쓰기 합니다.","예시":"<\/line-indent=20%>"},{"태그":"lowercase","설명":"소문자로 변환합니다.","예시":"<\/lowercase>"},{"태그":"margin","설명":"여백을 부여합니다. 양쪽 여백을 함께 설정하거나 각 측면을 개별적으로 설정할 수 있습니다.","예시":"<\/margin=10>"},{"태그":"mark","설명":"지정한 색상으로 강조 표시합니다.","예시":"<\/mark=#ffff0080>"},{"태그":"mspace","설명":"문자의 폭을 문자 크기와 관계 없이 지정한 값으로 고정합니다.","예시":"<\/mspace=20>"},{"태그":"nobr","설명":"태그 안의 문자들을 하나의 묶음으로 취급해 줄 바꿈합니다. 묶인 문자끼리는 최대한 줄 바꿈을 줄이게 됩니다. 입력 영역보다 문자가 길 경우 줄 바꿈 처리됩니다.","예시":"<\/nobr>"},{"태그":"noparse","설명":"작성한 태그를 그대로 보여줍니다.","예시":"보여질 문장<\/rotate=50><\/i><\/noparse>"},{"태그":"page","설명":"페이지를 나누어 보여줍니다. Overflow 프로퍼티가 Page로 설정되어 있어야 합니다.","예시":"첫 페이지둘째 페이지<\/page>"},{"태그":"pos","설명":"태그 뒤의 문자가 입력한 값만큼 벌어져서 보입니다.","예시":"<\/pos=50>,<\/pos=30%>"},{"태그":"rotate","설명":"입력한 글자를 기준으로 지정한 값만큼 회전시킵니다.","예시":"<\/rotate=45>"},{"태그":"s","설명":"취소선입니다.","예시":"~~< \/s>"},{"태그":"size","설명":"글자 크기를 조정합니다. 수가 클수록 크기가 커집니다.","예시":"<\/size=150%>"},{"태그":"smallcaps","설명":"영어 알파벳 중 소문자를 작은 대문자로 표시합니다. 대문자는 변하지 않습니다.","예시":"<\/smallcaps>"},{"태그":"space","설명":"설정한 값만큼 띄어쓰기를 합니다.","예시":"<\/space=50>"},{"태그":"sprite","설명":"기본 이모지 또는 TextSpriteSet에서 정의한 이미지를 사용할 수 있습니다. 기본 이모지는 1부터 16까지의 값을 사용합니다.","예시":"<\/sprite=1>, <\/sprite>"},{"태그":"strikethrough","설명":"취소선으로 표시합니다.","예시":"<\/strikethrough>"},{"태그":"style","설명":"기본 스타일 또는 TextStyleSheet에서 정의한 스타일을 사용할 수 있습니다. 사용 가능한 기본 스타일은 다음과 같습니다. * H1, H2, H3, C1, C2, C3, Quote, Link, Title, Normal","예시":"<\/style=\"h1\">, <\/style=\"my>"},{"태그":"sub","설명":"아래 첨자로 변환합니다.","예시":"<\/sub>"},{"태그":"sup","설명":"위 첨자로 변환합니다.","예시":"<\/sup>"},{"태그":"u","설명":"밑줄을 긋습니다.","예시":"<\/u>"},{"태그":"uppercase","설명":"영어 알파벳을 모두 대문자로 변환합니다.","예시":"<\/uppercase>"},{"태그":"voffset","설명":"세로 오프셋을 설정합니다.","예시":"<\/voffset=10>,<\/voffset=10em>"},{"태그":"width","설명":"가로 크기를 변경합니다.","예시":"<\/width=50%>"}]

## TextComponent 리치 텍스트 태그

TextComponent에서 사용 가능한 리치 텍스트 태그 목록입니다. IsRichText 프로퍼티를 활성화해야 리치 텍스트를 사용할 수 있습니다.

  * <태그이름 = 값> 글씨 입력 



[{"태그":"b","설명":"글씨를 굵게 표현합니다.","예시":"보여질 문장<\/b>"},{"태그":"i","설명":"글씨를 기울어지게 표현합니다.","예시":"보여질 문장<\/i>"},{"태그":"size","설명":"글씨의 크기를 결정합니다.","예시":"보여질 문장<\/size=70>"},{"태그":"color","설명":"색상을 결정합니다. 색상은 헥스 코드(#00000000) 형식으로 입력합니다. 색상명으로 색을 표현할 수 있는 이름은 아래와 같습니다. aqua, cyan, black, blue, brown, darkblue, fuchsia, green, grey, lightblue, lime, magenta, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow","예시":"보여질 문장<\/color=#ff1932>, 보여질 문장<\/color=olive>"}]