리치 텍스트 요소 개요 - Webflow 도움말

리치 텍스트 요소(RTE)를 사용하여 긴 형식의 콘텐츠를 만드세요.

리치 텍스트 요소(RTE)는 블로그 게시물, 소개 페이지, 전기 등과 같은 긴 형식의 콘텐츠를 만드는 데 완벽한 요소입니다. 개별 제목, 단락, 목록 또는 이미지 요소를 추가하는 대신, 리치 텍스트 요소를 더블 클릭하여 텍스트, 사용자 정의 코드 및 미디어 요소를 생성하고 형식화할 수 있습니다.

사이트에 리치 텍스트 요소를 추가하는 방법

리치 텍스트 요소는 추가 패널(A)에서 디자이너 캔버스로 드래그하여 추가할 수 있습니다. 내용을 추가하거나 편집하려면 리치 텍스트 요소를 더블 클릭하거나 요소를 선택하고 키보드에서 Enter 또는 Return을 누르세요.

리치 텍스트 요소 내에 다음 요소를 추가할 수 있습니다:

• 단락
• 제목 (H1-H6)
• 이미지
• 이미지 캡션
• 이미지 대체 속성
• 사용자 정의 코드
• 블록 인용
• 순서 없는 목록 (글머리 기호)
• 순서 있는 목록 (번호 매기기)
• 비디오 (YouTube, Vimeo)
• 리치 미디어 (Google 지도, SoundCloud, Imgur, Giphy, Codepen 등)

텍스트 요소에 추가 형식을 추가할 수도 있습니다:

• 링크 (URL, 페이지, 이메일 등)
• 굵은 텍스트
• 기울임꼴 텍스트
• 위첨자 및 아래첨자 텍스트
• 코드

슬래시 명령어

RTE 내에서 콘텐츠를 편집할 때 슬래시 명령어를 사용하여 Webflow AI Assistant를 통해 빠르게 복사본을 생성하거나 새로운 콘텐츠 요소를 추가할 수 있습니다. 슬래시 명령어를 사용하려면 키보드에서 / (슬래시)를 누르고 더 많은 복사본 생성을 클릭하여 AI Assistant를 사용하여 문맥에 맞는 텍스트를 추가하거나, 추가 메뉴에서 원하는 요소를 선택하거나, 요소 목록을 필터링하기 위해 입력을 시작하세요:

• 제목 (H1–H6)
• 번호 매기기 목록
• 글머리 기호 목록
• 단락
• 블록 인용
• 이미지
• 비디오
• 리치 콘텐츠
• HTML 임베드
• 코드 블록

텍스트 콘텐츠 추가 및 서식 지정 방법

RTE 안에 입력을 시작한 후 텍스트에 서식을 추가하여 제목, 인용구, 굵게 또는 기울임꼴 텍스트, 위첨자 또는 아래첨자 텍스트, 링크를 만들 수 있습니다.

Webflow AI Assistant를 사용하여 텍스트 콘텐츠 생성

AI Assistant를 사용하여 RTE에 맥락적으로 관련된 복사본을 빠르게 추가하려면:

1. RTE를 오른쪽 클릭합니다
2. 컨텍스트 메뉴에서 복사본 수정을 선택합니다
3. (선택 사항) 생성하고자 하는 복사본을 설명하는 프롬프트를 입력합니다
4. "프롬프트 제출" 아이콘을 클릭합니다
5. 생성된 복사본을 수락하려면 완료를 클릭합니다

Webflow AI Assistant를 사용하여 콘텐츠 생성 및 편집에 대해 자세히 알아보세요.

단락 추가 방법

다른 텍스트 편집기와 마찬가지로 키보드에서 Enter를 누르면 새 줄에 새 단락이 생성되어 계속 입력할 수 있습니다. 여러 단락을 추가하려면 단락 끝에서 Enter를 누르세요. 또한 Webflow AI Assistant를 사용하여 텍스트를 추가하고 다듬을 수 있습니다.

제목 및 인용구 추가 방법

제목을 만들려면 단락 안의 텍스트를 선택하고 제목 (H1-H6) 옵션을 선택하세요. 인용구를 만드는 경우도 마찬가지입니다.

텍스트 서식 지정 및 링크 추가 방법

텍스트 요소의 어느 부분(예: 제목, 단락, 캡션 등)이든 선택하여 굵게, 기울임꼴, 위첨자, 아래첨자, 링크로 서식 지정할 수 있습니다. 인라인 텍스트 서식에 대해 자세히 알아보세요.

RTE 내에서 링크를 생성할 때 URL, 페이지, 페이지 섹션, 이메일 또는 전화번호를 선택할 수 있습니다.

키보드 단축키

이 키보드 단축키는 리치 텍스트 콘텐츠를 빠르게 포맷하는 데 도움이 됩니다:

• 줄 바꿈 없는 공백 삽입: Shift + Space
• 줄 바꿈 삽입: Shift + Enter
• 텍스트 굵게: Command + B (Windows에서는 Control + B)
• 텍스트 기울임: Command + I (Windows에서는 Control + I)
• 하이퍼링크 삽입: Command + K (Windows에서는 Control + K)

RTE에서 편집할 때 슬래시 명령 단축키(“/**”)를 사용하여 콘텐츠 요소를 빠르게 추가할 수 있습니다. 또한 Markdown 단축키를 사용할 수 있습니다:

• 텍스트 기울임: *text* 또는 _text_
• 텍스트 굵게: **text** 또는 __text__
• 텍스트 굵게 및 기울임: ***text*** 또는 ___text___
• 하이퍼링크 삽입: [하이퍼링크 텍스트](https://www.url.com)
• 제목 1: # + Space
• 제목 2: ## + Space
• 제목 3: ### + Space
• 제목 4: #### + Space
• 제목 5: ##### + Space
• 제목 6: ###### + Space
• 인용문: > + Space
• 순서 없는 목록: - + Space
• 순서 있는 목록: 1. + Space

미디어 콘텐츠, 사용자 정의 코드 및 목록 추가 방법

텍스트 커서가 새 줄에 있을 때, “플러스” 버튼이 나타납니다. 이 버튼을 클릭하면 이미지, 비디오, 기타 리치 미디어, 사용자 정의 코드 및 글머리 기호 또는 번호 목록을 추가할 수 있는 삽입 메뉴가 표시됩니다.

이미지, 비디오 및 리치 미디어 추가

RTE의 모든 미디어 요소는 반응형이며 콘텐츠의 가로세로 비율을 준수합니다. YouTube, Vimeo 및 Dailymotion 비디오 지원이 개선되어 사용자 정의 시작 시간을 허용합니다. 지원되는 일부 리치 미디어 유형은 다음과 같습니다:

• YouTube
• Vimeo
• Instagram 게시물
• Facebook 게시물
• DailyMotion
• Kickstarter
• TED
• Wistia
• Livestream
• Twitch
• Hulu
• Imgur 앨범
• Google 지도
• JSFiddle
• Codepen
• Scribd
• SlideShare
• Spotify 재생 목록 및 차트
• Giphy
• SoundCloud
• 그리고 더 많은 것들!

미디어 설정

각 미디어 요소는 이미지 설정의 프리셋을 사용하여 크기를 조정하거나 툴바의 "렌치" 아이콘을 클릭하여 특정 픽셀 또는 백분율 값으로 설정할 수 있습니다. 선택적으로 이미지 아래에 캡션을 추가할 수도 있습니다.

대체 텍스트

이미지에 대체 텍스트를 추가하려면 이미지를 선택하고 "렌치" 아이콘을 클릭한 다음 대체 텍스트를 입력하세요. 설명적인 대체 텍스트 작성에 대해 더 알아보기.

사용자 정의 코드 추가 방법

삽입 메뉴에는 사용자 정의 코드를 추가하는 버튼이 포함되어 있습니다. 사용자 정의 코드를 사용하여 HTML로 표와 구분선을 만들고, CSS로 콘텐츠의 일부를 스타일링하며, JavaScript로 사이트의 기능을 확장하고, 타사 콘텐츠를 임베드할 수 있습니다.

단계:

1. 코드를 추가할 위치에 커서를 놓습니다.
2. "플러스" 아이콘을 클릭하여 삽입 메뉴를 열고 사용자 정의 코드 버튼을 클릭합니다.
3. 코드를 추가합니다.

목록 추가 방법

삽입 메뉴는 순서 없는 목록(불릿)과 순서 있는 목록(번호)을 추가하는 옵션을 제공합니다. 목록을 중첩하거나 중첩 해제할 수도 있습니다.

• 불릿 목록: 삽입 메뉴를 사용하거나 대시 -를 입력한 후 공백을 입력합니다.
• 번호 목록: 삽입 메뉴를 사용하거나 정수를 입력한 후 점과 공백을 입력합니다.
• 목록 중첩: 항목을 선택하고 Tab을 누릅니다. 중첩 해제: 선택하고 Shift + Tab을 누릅니다.

다른 소스에서 리치 텍스트 콘텐츠 추가 방법

다른 사이트나 워드 프로세서(예: Google Docs)에서 리치 텍스트를 붙여넣을 수 있습니다. 디자이너 또는 CMS 리치 텍스트 필드에 붙여넣으면 서식, 링크 및 이미지가 유지됩니다.

요소 재배치 및 삭제 방법

리치 텍스트 요소의 요소는 캔버스나 내비게이터에서 드래그 앤 드롭으로 재배치하거나 키보드 단축키를 통해 재배치할 수 있습니다. 요소는 선택 후 Backspace 또는 Command + X (Windows에서는 Control + X)를 눌러 삭제할 수 있습니다.

RTE 콘텐츠 스타일링 방법

리치 텍스트 요소 내 개별 요소 스타일링

리치 텍스트 요소 내의 요소를 Webflow 요소처럼 스타일링하세요: 캔버스에서 선택하고, 스타일 패널로 이동하여 클래스를 적용하거나 생성하고 스타일링합니다.

HTML 태그로 리치 텍스트 요소 내 요소 스타일링

RTE 요소는 HTML 태그에서 스타일을 상속받습니다. 중첩 선택자를 통해 스타일링하여 동일한 클래스의 RTE에 기본 스타일을 제한할 수 있습니다.

단계:

1. 캔버스에서 RTE 선택
2. RTE에 클래스 부여
3. RTE 내 요소 선택
4. 스타일 패널 (S)로 이동
5. 선택자 필드 클릭
6. HTML 태그 선택
7. "클래스 이름" 내 선택자 중첩 클릭
8. 원하는 대로 스타일링

동적 리치 텍스트 스타일링 방법

리치 텍스트 요소는 컬렉션의 리치 텍스트 필드에 바인딩할 수 있습니다. 스타일링은 연결을 끊고 스타일링한 후 다시 연결하거나, 클래스를 적용하고 스타일링한 상태로 유지하는 것이 가장 좋습니다. 동적 리치 텍스트에 대해 더 알아보기.

웹플로우 도움말로 돌아가기