- Span 태그란?
- Span 태그란 HTML에서 사용되는 태그의 이름으로, 문장 등에서 일부분만 스타일을 변경할 때 사용하는 것입니다. Webflow에서는 Paragraph 태그·Text 태그를 사용한 문장에서 쓸 수 있습니다.
※이 글은 2022년 1월 시점의 검증 글입니다. Webflow는 업데이트가 빠르므로 리치 텍스트 관련 최신 사양은 공식 문서도 함께 확인해 주세요.
Webflow에서 Span 태그는 어떻게 쓰는 걸까?
문장의 일부분만 스타일을 바꾸고 싶을 때는 어떻게 할까?
리치 텍스트에서 일부분만 스타일을 바꿀 수는 없을까?
이번에는 이런 궁금증에 답해 보겠습니다.
✓이 글의 내용
- Webflow에서 Span 태그를 사용하는 방법
- Webflow의 리치 텍스트에서는 Span 태그를 쓸 수 없다
- 리치 텍스트에서 일부분만 스타일을 바꾸는 방법
이 글을 쓰는 저는 Webflow로 웹사이트 제작을 하며
월 30만 엔 정도의 수익을 올리고 있습니다.
(2026년 추가: 당시 개인 사업 시절의 이야기입니다. 현재는 센다이에서 주식회사 Webharu로 웹 제작·AI 개발을 하고 있습니다)
또한 이 블로그도 Webflow로 제작·관리하고 있으며,
리치 텍스트를 사용해 블로그를 업데이트하고 있습니다.
이런 경험을 살려 이번에는 리치 텍스트 사용법을 해설하겠습니다.
Webflow에서 Span 태그를 쓰는 방법
애초에 Span이란?
Span은 HTML에서 사용되는 태그의 이름입니다.
문장 등에서 일부분만 스타일을 변경할 때 사용합니다.
자세한 내용은 사루와카 선생님(일본어)을 봐 주세요.
paragraph 태그, Text 태그에서 사용 가능
Webflow에서는 주로 paragraph 태그, Text 태그를 사용한 문장에서 쓸 수 있습니다.
붓펜 모양의 마크를 클릭하면 Span 태그를 추가할 수 있습니다.
Span을 삭제할 때는 가장 오른쪽의 ✗A를 클릭합니다.
리치 텍스트에서는 Span 태그를 쓸 수 없습니다
Webflow의 “리치 텍스트(Rich text)”에서는 span을 사용할 수 없습니다(2022년 1월 시점).
Paragraph 등으로 만든 문장과 Span을 함께 복사해서 붙여 넣어
리치 텍스트에 넣으면 일시적으로 Span을 추가할 수는 있지만, 편집이 불가능해집니다.
리치 텍스트는 편리한 기능이지만 많이 쓰는 것은 피하는 편이 좋을지도 모르겠습니다.
리치 텍스트에서 일부분만 스타일을 바꾸는 방법
리치 텍스트의 Bold, Italicize를 사용해 스타일을 변경할 수 있습니다.
다소 억지스러운 방법으로 느껴질 수도 있지만
SEO 측면에서 특별히 문제는 없다고 봅니다.
왜냐하면 이 기능들은 HTML에서 다음과 같이 태그가 할당되어 있기 때문입니다.
- Bold=Strong 태그
- Italicize=em 태그
실제로 제가 Webflow로 만든 블로그의 HTML 코드를 봅시다.
빨간 글씨(Bold)에는 strong, 노란 밑줄(italic)에는 em이 붙어 있는 것을 알 수 있습니다.
각각에 스타일을 더해 리치 텍스트 안에서
스타일 변경을 하고 있습니다.
strong 태그와 em 태그의 차이
strong 태그와 em 태그의 차이는 SEO랩에서 간단히 설명하고 있습니다.
두 태그의 의미를 이해하면 SEO 측면에서도 문제없이
스타일을 변경할 수 있습니다.
태그를 올바르게 쓰는 것을 의식합시다.
정리
리치 텍스트는 편리한 기능이지만 클래스명이나 ID를 붙일 수 없어서
이것저것 시행착오를 겪는 일이 있습니다.
제 Twitter에서는 그런 시행착오를 소개하고 있으니
관심 있는 분은 팔로우해 보세요.
(2026년 추가: 현재의 발신은 이 블로그에 정리하고 있습니다. Webflow 사용법 전반은 사용법 정리에서 보실 수 있습니다)
아직 Webflow에 가입하지 않은 분은 한번
가입해서 사용해 보시길 추천합니다.
조금만 사용해 보고
자신에게 맞는 노코드를 선택합시다.
자주 묻는 질문
Webflow의 리치 텍스트에서 Span 태그를 쓸 수 있나요?
사용할 수 없습니다(2022년 1월 시점). Paragraph 등으로 만든 문장과 Span을 함께 복사해서 붙여 넣으면 일시적으로 추가할 수 있지만, 편집이 불가능해집니다.
Webflow에서 Span 태그를 추가하려면 어떻게 하나요?
Paragraph 태그나 Text 태그를 사용한 문장에서 쓸 수 있습니다. 붓펜 모양의 마크를 클릭하면 Span 태그를 추가할 수 있고, 삭제할 때는 가장 오른쪽의 ✗A를 클릭합니다.
리치 텍스트에서 일부분만 스타일을 바꾸려면 어떻게 하나요?
리치 텍스트의 Bold·Italicize를 사용해 스타일을 변경할 수 있습니다. HTML에서는 Bold에 strong 태그, Italicize에 em 태그가 할당되어 있으므로 두 태그의 의미를 이해하고 쓰면 SEO 측면에서도 문제없이 변경할 수 있습니다.
HTML의 Span 태그는 어떤 태그인가요?
문장 등에서 일부분만 스타일을 변경할 때 사용하는 HTML 태그입니다. div가 범위의 블록을 만드는 데 비해, Span은 문장 안의 인라인 범위를 지정합니다.
strong 태그와 em 태그의 차이는 무엇인가요?
리치 텍스트의 Bold에는 strong 태그, Italicize에는 em 태그가 할당되어 있습니다. strong은 강한 중요성, em은 강조를 뜻하는 태그로, 두 의미를 이해하고 올바르게 쓰면 SEO 측면에서도 문제없습니다.
