상세 텍스트 구성 요소(DTC)는 기사, 페이지 설명, 프로필 등과 같은 광범위한 콘텐츠를 작성하는 데 이상적인 요소입니다. 개별 제목, 섹션, 단락 또는 시각적 요소를 삽입하는 대신 자세한 텍스트 구성 요소를 두 번 탭하여 텍스트, 맞춤형 코드 및 미디어 구성 요소를 생성하고 스타일을 지정할 수 있습니다.
이 가이드에서는 다음 내용을 이해하게 됩니다.
- 플랫폼에 자세한 텍스트 구성 요소를 도입하는 방법
- 텍스트 콘텐츠를 삽입하고 디자인하는 방법
- 미디어 콘텐츠, 맞춤형 코드, 목록을 포함하는 방법
- 구성 요소를 재구성하고 지우는 방법
- DTC 콘텐츠를 사용자 정의하는 방법
플랫폼에 자세한 텍스트 구성 요소를 도입하는 방법
자세한 텍스트 구성요소를 다음에서 이동하여 통합할 수 있습니다. 패널 추가 (A) 디자이너에게 캔버스. 콘텐츠를 포함하거나 조정하려면 자세한 텍스트 구성 요소를 두 번 탭하거나 구성 요소를 선택하고 입력하다 또는 반품 키보드에서.
자세한 텍스트 구성 요소 내에 다음 구성 요소를 연결할 수 있습니다.
- 단락
- 제목(H1-H6)
- 비주얼
- 시각적 묘사
- 시각적 설명자
- 맞춤형 코드
- 블록 따옴표
- 무질서한 목록(글머리 기호)
- 순서가 지정된 목록(번호 매기기)
- 비디오(Youtube, Vimeo)
- 디테일이 풍부한 미디어(Google 지도, SoundCloud, Imgur, Giphy, Codepen 등)
텍스트 구성 요소에 추가 스타일을 구현할 수도 있습니다.
- 연결(URL, 페이지, 이메일 등)
- 강력한 텍스트
- 강조된 텍스트
- 상위 색인 및 하위 색인 텍스트
- 암호
텍스트 콘텐츠를 삽입하고 디자인하는 방법
DTC 내에서 입력을 시작한 다음 텍스트를 사용자 정의하여 제목, 블록 인용, 굵게 또는 강조된 텍스트 및 연결을 형성할 수 있습니다.
내부자 팁: Markdown을 사용하면 텍스트(예: 굵게, 기울임꼴, 하이퍼링크 첨부) 및 블록 구성 요소(예: 제목, 목록)를 신속하게 조정할 수 있습니다.
단락을 삽입하는 방법
텍스트 편집기와 마찬가지로 입력하다 키보드를 사용하면 계속해서 작성할 수 있는 새로운 줄에 새 단락이 만들어집니다. 여러 단락을 첨부하려면 입력하다 단락의 끝에서.
제목을 삽입하고 따옴표를 차단하는 방법
제목을 설정하려면 단락 내의 텍스트를 선택하고 표제 (H1-H6) 선택. 블록 인용문 생성에도 동일하게 적용됩니다.
텍스트 스타일을 지정하고 연결을 연결하는 방법
텍스트 부분을 선택하고 선택한 스타일 선택을 적용하여 텍스트 요소(예: 제목, 단락, 설명 등)의 모든 세그먼트에 강한 강조, 강조, 상위 색인, 하위 색인 및 연결 스타일을 적용할 수 있습니다. 인라인 텍스트 스타일 지정에 대한 자세한 내용을 알아보세요.
DTC 내에서 연결을 만들 때 URL, 페이지, 페이지 세그먼트, 이메일 또는 전화번호를 선택할 수 있습니다.
키보드 단축키
다음 키보드 단축키를 사용하면 콘텐츠 생성을 가속화할 수 있습니다.
- 삽입하다 중단되지 않는 공간 ( ): 옮기다 + 공간
- 삽입하다 줄 바꿈 (<br>): 옮기다 + 입력하다
- 강력한 텍스트: 명령 + 비 (제어 + 비 Windows의 경우)
- 강조된 텍스트: 명령 + 나 (제어 + 나 Windows의 경우)
- 하이퍼링크 첨부: 명령 + 케이 (제어 + 케이 Windows의 경우)
구현할 수도 있습니다. 가격 인하 입력할 때 신속하게 텍스트 스타일(예: 굵게, 기울임꼴, 하이퍼링크 첨부) 및 블록 구성 요소(예: 제목, 목록)를 지정하는 바로가기:
- 텍스트 강조: *텍스트* 또는 _텍스트_
- 강력한 텍스트: **텍스트** 또는 __텍스트__
- 텍스트 강조 및 강화: ***텍스트*** 또는 ___텍스트___
- 하이퍼링크 첨부: [하이퍼링크 텍스트](https://www.url.com)
- 제목 1을 첨부하세요: # + 공간
- 제목 2 첨부: ## + 공간
- 제목 3을 첨부하세요: ### + 공간
- 제목 4를 첨부하세요: #### + 공간
- 제목 5를 첨부하세요: ##### + 공간
- 제목 6을 첨부하세요: ###### + 공간
- 인용문 첨부: > + 공간
- 순서가 없는(예: 글머리 기호) 목록 첨부: – + 공간
- 순서가 지정된(예: 번호가 매겨진) 목록 첨부: 1. + 공간
미디어 콘텐츠, 맞춤형 코드, 목록을 삽입하는 방법
텍스트 커서가 새로운 줄에 있으면 "...을 더한"버튼이 나옵니다. 이 버튼을 누르면 시각 자료, 비디오, 다양한 리치 미디어, 맞춤형 코드, 글머리 기호 또는 번호 매기기 목록을 추가할 수 있는 옵션이 있는 삽입 메뉴가 표시됩니다.
시각 자료, 비디오, 리치 미디어 추가
DTC의 모든 미디어 기능은 적응형이며 콘텐츠의 가로 세로 비율을 유지합니다. YouTube, Vimeo 및 Dailymotion 비디오 지원이 향상되어 개인화된 시작 기간을 허용합니다. 다음은 지원되는 리치 미디어 변형 중 일부를 편집한 것입니다.
- 유튜브
- 비메오
- 인스타그램 게시물
- 페이스북 게시물
- 데일리모션
- 킥스타터
- TED
- 위스티아
- 실시간 스트리밍
- 경련
- 훌루
- Imgur 앨범
- Google 지도
- JSFiddle
- 코드펜
- 스크리브
- 슬라이드쉐어
- Spotify 재생 목록 및 차트
- 기피
- 사운드클라우드
- 그리고 더!
미디어 구성
각 미디어 기능은 이미지 설정의 사전 설정을 사용하여 크기를 조정하거나 "를 탭하여 특정 픽셀 또는 백분율 값으로 크기를 조정할 수 있습니다.렌치” 아이콘을 도구 모음에 표시하세요. 선택 사항 표제 아래에 묘사를 추가할 수 있습니다.
대체 텍스트
묘사에 대체 텍스트를 추가하려면 포함하려는 묘사를 선택하세요. 대체 텍스트 하려면 '를 탭하세요.렌치” 아이콘을 도구 모음에서 클릭한 다음 대체 텍스트를 삽입하세요. 설명적인 대체 텍스트 작성에 대해 자세히 알아보세요.
맞춤형 코드를 추가하는 방법
삽입 메뉴에는 맞춤형 코드를 포함하는 버튼이 포함되어 있습니다. 맞춤형 코드를 활용하여 HTML로 표와 구분선을 설정하고, 목표 CSS로 세부 텍스트 콘텐츠의 세그먼트 스타일을 지정하고, JavaScript(예: 맞춤형 Google 지도 또는 Google 애드센스 광고)로 플랫폼 기능을 확장하고, 대화형 제3자를 통해 잠재고객의 참여를 유도할 수 있습니다. 콘텐츠(예: Twitter, Soundcloud, Airtable 등의 삽입)
방법은 다음과 같습니다.
- 맞춤형 코드를 포함하려는 위치에 커서를 놓습니다.
- '를 탭하세요....을 더한” 아이콘을 클릭하여 삽입 메뉴를 표시하고 맞춤형 코드 버튼을 탭하세요.
- 코드 추가
목록을 추가하는 방법
삽입 메뉴에는 정렬되지 않은(글머리 기호) 목록과 정리된(번호가 매겨진) 목록을 포함하는 선택 항목이 포함되어 있습니다. 목록을 중첩하거나 중첩 해제할 수도 있습니다.
삽입 메뉴에서 또는 공백과 함께 대시(-)를 입력하여 글머리 기호 목록을 포함할 수 있습니다.
정리된 목록을 작성하려면 삽입 메뉴를 활용하거나 정수 뒤에 마침표와 공백을 입력하세요(예: 1. , 3. , 10. ). 이는 목록 항목 사이에 일부 미디어를 포함시킨 후 정리된 목록을 계속 유지하려는 경우에 특히 유용합니다. 순서대로 다음 숫자를 입력하고 마침표와 공백을 입력할 수 있습니다.
목록을 중첩하려면 중첩하려는 목록 항목을 선택한 다음 탭. 목록의 중첩을 해제하려면 추출하고 푸시하려는 항목을 선택하세요. 옮기다 + 탭.
외부 소스에서 풍부한 텍스트 자료를 삽입하는 단계
다양한 웹사이트나 Google Docs와 같은 워드 프로세서에서 풍부한 텍스트 자료를 삽입할 수 있는 옵션이 있습니다. 모든 스타일과 하이퍼링크는 강화된 텍스트 블록 내에 포함됩니다. 디자이너 또는 CMS의 텍스트 필드에 보강된 텍스트를 붙여 넣을 때도 그림이 표시됩니다.
중요 사항: 편집기의 텍스트 블록에 붙여넣은 풍부한 콘텐츠에서는 그림을 가져올 수 없습니다.
외부 소스에서 강화된 텍스트를 붙여넣으면 배경색이나 숨겨진 문자 등 원하지 않는 스타일을 가져올 수도 있다는 점을 기억하는 것이 중요합니다. 따라서 외부 소스에서 강화된 텍스트를 붙여넣을 때는 주의해야 합니다.
원치 않는 스타일을 가져오는 것을 방지하려면 처음에 보강된 텍스트 콘텐츠를 일반 텍스트 편집기에 붙여넣은 다음 복사하여 텍스트 블록에 붙여넣거나 키보드 단축키를 사용하여 스타일이 지정되지 않은 텍스트(명령 + 옵션 + 옮기다 + V 맥에서 또는 제어 + 옮기다 + V Windows에서). 이 키보드 단축키는 굵게, 기울임꼴, 하이퍼링크를 포함한 모든 스타일을 제거한다는 점을 명심하세요.
요소 조작 및 제거
텍스트 블록 내의 요소를 캔버스나 네비게이터로 끌거나 키보드 단축키를 사용하여 요소를 다시 정렬할 수 있습니다. 요소를 텍스트 블록 안팎으로 끌어다 놓을 수는 없습니다.
텍스트 블록 내의 다른 요소에 영향을 주지 않고 텍스트 블록에서 하위 요소를 제거할 수 있습니다. 캔버스에서 요소를 선택하고 역행 키이 키보드에서 또는 활용 명령 + 엑스 (제어 + 엑스 Windows에서).
RTE 컨텐츠 스타일 사용자 정의
메모: 콘텐츠 편집자 또는 팀원 편집 가능 역할은 텍스트 형식(예: 굵은 글꼴, 기울임꼴 등)을 지정하고 RTE 내에서 텍스트 및 미디어 요소를 생성 및 삭제할 수 있지만 RTE 내 요소의 스타일을 지정할 수는 없습니다.
텍스트 블록 내의 개별 요소에 스타일 지정
메모: 텍스트 블록 내의 개별 요소에 대해 조건부 표시 여부를 설정할 수도 있습니다.
HTML 태그를 사용하여 텍스트 블록 내의 요소 스타일 지정
텍스트 블록 요소는 해당 HTML 태그에서 스타일을 가져옵니다. HTML 태그를 사용하여 텍스트 블록 내 요소의 스타일을 지정하여 요소 그룹의 기본 스타일을 설정할 수 있습니다. HTML 태그에 적용된 스타일은 해당 HTML 태그가 있는 사이트의 모든 요소에 영향을 미칩니다.
그러나 텍스트 블록 요소에 클래스를 통합하면 중첩 선택기와 함께 HTML 태그를 활용하여 텍스트 블록과 동일한 클래스를 공유하는 텍스트 블록 내 요소에 대한 기본 스타일을 정의할 수 있습니다. 이 방법은 기본 스타일을 동일한 클래스의 텍스트 블록으로 제한하여 스타일이 사이트의 다른 요소에 계단식으로 적용되는 것을 방지하는 데 도움이 됩니다.
텍스트 블록 내에서 HTML 태그를 사용하여 스타일을 설정하려면:
- 캔버스에서 텍스트 블록을 선택합니다.
- 텍스트 블록에 클래스 할당
- 텍스트 블록에서 요소를 선택하세요.
- 로 이동 스타일 패널 (에스)
- 액세스 선택자 필드
- 메뉴에서 HTML 태그(예: 모든 단락)를 선택합니다.
- 딸깍 하는 소리 '클래스 이름' 내의 중첩 선택기
- 필요에 따라 요소 스타일 지정
메모: 중첩된 태그에 스타일을 적용하면 지정된 클래스가 있는 텍스트 블록뿐 아니라 동일한 적용된 클래스를 공유하는 요소 내의 요소에도 영향을 미칩니다. 특정 클래스가 있는 텍스트 블록 내의 중첩 태그 전용 스타일을 만들려면 텍스트 블록용으로 특별히 클래스를 만들거나 콤보 클래스를 사용하는 것이 좋습니다.
동적 보강 텍스트 사용자 정의
강화된 텍스트 요소는 컬렉션의 강화된 텍스트 필드에 연결될 수 있습니다. RTE가 바인딩(즉, 연결)되면 RTE 콘텐츠의 소스 역할을 하는 CMS 내를 제외하고 텍스트 요소 편집이 제한됩니다.
전문가 팁: 디자인 변경이 필요할 때마다 CMS에 연결하거나 연결을 끊을 필요 없이 RTE 내의 스타일링 요소에 대한 스타일 가이드 페이지에서 서식 있는 텍스트 요소를 설정합니다. 컬렉션 페이지와 마찬가지로 스타일 가이드의 RTE 클래스를 정렬합니다. 이후 컬렉션 페이지의 서식 있는 텍스트 요소 내 요소의 스타일을 업데이트할 때 스타일 가이드 페이지로 이동하여 해당 RTE 내에서 해당 요소의 스타일을 지정하세요.
- Workspace 스팟 및 멤버 포함 또는 제거 - 2024년 4월 15일
- 센터링 상자 요약 - 2024년 4월 15일
- 나중에 참조할 수 있도록 사이트 저장 - 2024년 4월 15일