Webflow에서의 Span 태그 사용법

Span 태그

Span 태그란 HTML에서 사용되는 태그의 이름으로, 문장 등에서 일부만 스타일을 변경할 때 사용합니다. Webflow에서는 Paragraph 태그·Text 태그를 쓴 문장에서 사용할 수 있습니다.

Webflow에서 Span 태그는 어떻게 쓰지?
문장의 일부만 스타일을 바꾸고 싶을 때는?
Rich text에서 일부만 스타일은 안 되나?

이번에는 이런 궁금증에 답합니다.

✓이 글의 내용

• Webflow에서의 Span 태그 사용법
• Webflow의 Rich text에서는 Span 태그를 쓸 수 없다
• Rich text에서 일부만 스타일을 바꾸는 방법
  

이 글을 쓰는 저는 Webflow로 웹사이트 제작을 하며 월 30만 엔 정도의 수익을 올리고 있습니다. 또 이 블로그도 Webflow로 만들어 관리하고 있으며 Rich text를 사용해 갱신하고 있습니다. 이런 경험을 살려 이번 Rich text 사용법을 해설해 갑니다.

Webflow에서의 Span 태그 사용법

애초에 Span이란?

Span이란 HTML에서 사용되는 태그의 이름입니다. 문장 등에서 일부만 스타일을 변경할 때 사용합니다.

Paragraph 태그·Text 태그에서 사용 가능

Webflow에서는 주로 Paragraph 태그·Text 태그를 쓴 문장에서 사용 가능합니다.

붓펜 마크를 클릭하면 Span 태그를 추가할 수 있습니다. Span을 삭제할 때는 맨 오른쪽의 ✗A를 클릭합시다.

Rich text에서는 Span 태그를 쓸 수 없습니다

Webflow의 “Rich text”에서는 Span을 사용할 수 없습니다(2022년 1월 시점).

Paragraph 등으로 만든 문장과 Span을 함께 복사·붙여넣기해 Rich text에 넣으면 일시적으로 추가할 수는 있지만 편집이 불가능해집니다.

Rich text에서 일부만 스타일을 바꾸는 방법

Rich text의 Bold·Italicize를 사용해 스타일을 변경할 수 있습니다.

다소 억지스러운 방법으로 느껴질 수 있지만 SEO상 문제는 없다고 봅니다. 이 기능들은 HTML에서 다음 태그가 할당되어 있기 때문입니다.

• Bold=strong 태그
• Italicize=em 태그
  

Webflow 블로그의 HTML 코드(Rich text 내부)">

빨간 글씨(Bold)에는 strong, 노란 밑줄(italic)에는 em이 붙어 있는 것을 알 수 있습니다. 각각에 스타일을 더해 Rich text 안에서의 스타일 변경을 하고 있습니다.

strong 태그와 em 태그의 차이

strong은 “중요도가 높다”, em은 “강조·어조를 바꾼다”를 나타내는 태그로, 검색엔진은 이 둘을 다르게 해석합니다.

두 태그의 의미를 이해하면 SEO상 문제없이 스타일 변경이 가능합니다. 태그를 올바르게 쓰는 것을 의식합시다.

Rich text는 편리한 기능이지만 남용은 피하는 편이 좋을지도 모르겠습니다.

정리

Rich text는 편리한 기능이지만 클래스명이나 ID를 붙일 수 없어 여러모로 시행착오하게 됩니다.

아직 Webflow에 등록하지 않은 분은 한번 등록해 만져 보는 것을 추천합니다. 조금 만져 보고 자신에게 맞는 노코드를 선택합시다.

‍