윅스 (Wix) 코딩 - 텍스트 요소 서식 지정 (Wix Code: About Formatting Text Elements)
설명)
윅스 코드(Wix Code)를 사용하여 텍스트 요소를 데이터에 연결할 때 텍스트의 서식은 여러 요소의 영향을 받습니다. 데이터를 연결한 방법, 데이터를 연결한 대상 및 서식을 설정한 방법은 모두 텍스트의 서식 지정에 영향을 줍니다.
데이터세트를 사용하여 연결된 데이터 (Data Connected Using a Dataset)
Text 요소를 데이터 세트에 연결하면 Text 요소의 서식 옵션과 연결된 데이터의 입력란(필드) 형식에 따라 서식이 결정됩니다.
텍스트 요소들은 다음과 같은 입력란(필드) 타입에 연결할 수 있습니다.
- 텍스트
- 번호
- Boolean
- 날짜와 시간
- URL
- 서식있는 텍스트
서식있는 텍스트가 아닌 입력란(필드) (Fields other than Rich Text)
텍스트 요소가 서식있는 텍스트가 아닌 입력란(필드)에 연결되면 Text 요소는 에디터에서 텍스트 편집 버튼으로 설정한 서식을 유지합니다.
Text 요소의 형식은 모든 내용에 대해 동일합니다. 콘텐츠의 일부분을 다른 형식을 지정할 수 없습니다. 에디터에서 한 가지 이상의 형식 설정이 사용된 경우 첫번째 스타일이 모든 내용에 적용됩니다.
서식있는 텍스트 입력란(필드) (Rich Text fields)
텍스트 요소가 서식있는 텍스트 입력란(필드)에 연결되어 있으면 텍스트 요소의 서식은 데이터 관리자에서 서식을 설정하는 방법에 따라 다릅니다. 사용 가능한 테마를 사용하거나 글꼴 및 크기와 같은 특정 형식 지정 옵션을 선택하여 데이터 관리자에서 내용의 서식을 설정할 수 있습니다. 어느 쪽이든, 에디터에서 설정한 형식은 무시됩니다.
팁 :
서식있는 텍스트 에디터의 HTML 탭을 클릭하여 서식있는 텍스트 입력란(필드)가 수동으로 또는 테마로 설정되었는지 확인할 수 있습니다. 테마가 사용된 경우 HTML 콘텐츠에는 <html> 및 <p class="px"> 태그만 포함됩니다. 수동으로 서식을 설정한 경우 HTML 콘텐츠에 추가 태그가 포함됩니다.
텍스트의 서식은 전체적으로 일정하지 않아도 됩니다. 콘텐츠의 다른 부분들은 다르게 형식을 지정할 수 있습니다.
테마 (Themes)
서식 있는 입력란(필드)의 서식을 설정하기 위해 데이터 관리자에서 Site Title 및 Paragraph 1과 같은 테마를 사용하면 Text 요소는 이러한 테마들을 사용하지만 설정은 에디터에서 정의된 방법에 따라 결정됩니다.
예를 들어, 데이터 관리자에서 서식있는 텍스트 입력란(필드)에 두 줄의 텍스트를 입력한다고 가정해봅시다. 첫 번째 줄의 서식을 사이트 제목 테마로 설정하고 두 번째 줄의 서식을 작은 제목 테마로 설정합니다.
이제 사이트에서 사이트 제목 테마를 Arial 100px로 변경합니다. 해당 내용이 표시되면 사이트의 사이트 제목 및 작은 제목 스타일로 표시됩니다. 해당 요소가 데이터 관리자에서 정의된대로가 아니라 에디터에서 정의된대로 사이트 제목 테마를 적용하기 때문에 데이터 관리자에서 보이는 내용과 상관없이 콘텐츠의 첫 번째 줄은 Arial 100 픽셀로 형식이 지정됩니다.
테마는 사이트 전체에서 정의됩니다. 나머지 사이트와 일관성을 유지하려는 경우 테마를 사용합니다. 사이트의 테마 서식이 변경되면 서식있는 텍스트 입력란(필드)에서 콘텐츠의 서식을 변경하는 것에 대해 걱정할 필요가 없습니다.
수동 서식 지정 (Manual Formatting)
특정 글꼴 및 크기 선택과 같은 수동 서식이 데이터 관리자에서 사용되는 경우 Text 요소는 내용을 표시할 때 해당 서식을 사용합니다.
예를 들어, 데이터 관리자에서 서식있는 텍스트 입력란(필드)에 두 줄의 텍스트를 입력한다고 가정해봅시다. 첫 번째 줄의 글꼴과 크기를 Arial 100px로 설정하고 두 번째 줄의 글꼴과 크기를 Arial 50px로 설정합니다. 해당 콘텐츠가 표시되면 텍스트 요소에 설정된 테마, 글꼴 및 크기에 관계없이 Arial 100px 및 Arial 50px로 표시됩니다.
텍스트 요소가 사이트의 테마를 따르지 않게하려면 수동 서식 지정을 사용합니다.
코드 (Code)
코드를 사용하여 설정되는 텍스트 요소의 내용의 형식은 내용을 설정하는 데 사용되는 속성과 내용이 표시되는 방식에 따라 결정됩니다.
.text
텍스트 요소의 내용이 text 속성을 사용하여 설정되면 텍스트 편집 버튼을 사용하여 에디터에 설정된 형식을 유지합니다.
Text 요소의 형식은 모든 내용에 대해 동일합니다. 콘텐츠의 다른 부분은 다르게 형식을 지정할 수 없습니다. Editor에서 하나 이상의 형식 설정이 사용된 경우 첫 번째 스타일은 text 속성을 사용하여 설정된 모든 내용에 적용됩니다.
.html
Text 요소의 내용이 html 속성을 사용하여 설정되면 Text 요소의 형식은 내용을 마크업하는 방법에 따라 다릅니다. 테마로 변환된 태그로 태그를 추가하거나 태그를 추가하여 콘텐츠를 마크업할 수 있습니다.
테마 (Themes)
Text 요소의 콘텐츠가 html 속성을 사용하여 설정되면 <html> 및 <p class = "px"> 태그는 API 참조 설명서에 설명된대로 사이트의 테마를 사용하여 형식이 지정됩니다.
테마는 사이트 전체에서 정의됩니다. 나머지 사이트와 일관성을 유지하려는 경우 테마를 사용합니다. 사이트의 테마 서식이 변경되면 서식있는 텍스트 입력란(필드)에서 콘텐츠의 서식을 변경하는 것에 대해 걱정할 필요가 없습니다. 새로운 테마의 형식을 반영합니다.
수동 서식 지정 (Manual Formatting)
텍스트 요소의 내용이 html 속성을 사용하여 설정되면, 테마 이외의 추가 태그를 사용할 수 있습니다
텍스트 요소의 html 속성과 함께 사용될 모든 HTML 관련 태그 리스트는 API 를 확인합니다.
연관된 토픽)
윅스 홈페이지 만들기 101
윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index
윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index
윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index 윅스 (Wix.com) 윅스 ADI & 템플릿 (Wix ADI & 템플릿) 윅스 웹에디터 (Wix Editor) 윅스 코딩 (Wix Code - Corvid) 윅스 해커톤 (Wix Hackathon)
limejuicer.tistory.com
출처 :
https://support.wix.com/en/article/wix-code-about-formatting-text-elements
댓글