웹사이트 디자인에서 의미 있는 요소는 브라우저와 개발자 모두에게 그 의미를 효과적으로 전달하는 고유한 의미를 지닌 요소입니다. HTML5는 웹사이트 요소의 목적을 설정할 수 있는 표현력이 풍부한 태그를 도입했습니다. 예를 들어, 탐색 요소는 탐색 링크를 정의하는 반면, 요소는 기본 요소는 웹페이지의 기본 콘텐츠(종종 "document"라고도 함)를 식별합니다. 반면, 사업부 요소에는 고유한 의미가 없으므로 Div 블록은 의미 있는 요소로 간주되지 않습니다.
Webflow를 활용하면 이러한 태그를 사이트 디자인에 통합하여 접근성과 구성을 향상시킬 수 있습니다.
이 튜토리얼을 통해 다음을 발견하게 됩니다:
- 표현 태그 활용 지침
- 표현형 태그 활용의 장점
표현력이 풍부한 태그를 활용하기 위한 팁
Webflow에서는 다음을 통해 다양한 표현력을 갖춘 HTML5 태그를 요소에 할당할 수 있습니다. 요소 설정패널. 특정 목적을 제공하고 고유한 의미를 담고 있는 요소(예: 머리글, 바닥글, 탐색 등)에는 표현력 있는 태그를 사용하는 것이 좋습니다.
최고의 조언: 의도된 목적에 맞게 각 표현 요소를 적절하게 사용함으로써 브라우저는 대부분의 작업을 자동화하여 해당 요소의 접근성을 향상시킬 수 있습니다!
Webflow에서 사용할 수 있는 표현형 HTML5 태그는 다음과 같습니다.
- 머리글 — document에 대한 헤더 또는 일반적으로 페이지 상단에 위치한 섹션을 설정하여 제목 요소, 로고, 검색 양식 등을 포함할 수 있는 소개 기능을 제공합니다.
- 보행인 — 작성자 정보, 관련 페이지 링크 등을 포함할 수 있는 document 또는 섹션에 대한 바닥글을 지정합니다.
- 탐색 — document의 탐색 링크 세트를 나타냅니다. 메뉴, 목차, 색인에 자주 사용됩니다.
- 기본 — document의 기본 콘텐츠를 정의합니다. 그만큼 기본 요소는 탐색 링크, 사이트 로고, 검색 양식 등과 같은 반복적인 콘텐츠로 구성되어서는 안 됩니다.
- 부분 — 유사한 주제를 가진 콘텐츠를 그룹화하는 document의 섹션을 구분합니다. Webflow 부분 요소에는 부분 기본적으로 HTML5 태그입니다.
- 기사 — 포럼 게시물, 신문 기사 또는 블로그 게시물과 같이 페이지에서 독립적인 구성을 특징으로 합니다.
- 곁에 — 사이드바나 설명선과 같이 기본 페이지 콘텐츠와 별도로 콘텐츠를 지정합니다.
- 주소 — document 또는 기사의 작성자/소유자의 연락처 정보를 지정합니다.
- 수치 — 독립된 콘텐츠(예: 일러스트레이션, 다이어그램, 사진, 코드 블록 등)를 구별합니다.
사이트의 요소에 표현 태그를 통합하려면 다음 단계를 따르세요.
- Webflow 캔버스에서 요소를 선택합니다.
- 액세스 요소 설정 패널
- 다음에서 선택한 요소에 적합한 HTML5 태그를 선택하세요. 꼬리표쓰러지 다
필수적인: 탐색 모음과 같은 특정 요소에는 사전 정의된 HTML5 태그 기능이 있으며, H1-H6 요소 및 목록과 같은 요소에는 사전 할당된 의미론적 의미가 있으므로 해당 요소에 대해 HTML5 태그를 정의할 수 없습니다.
표현형 태그의 장점
표현 태그는 사이트의 시각적 디자인에 영향을 주지 않고 표현 목적으로만 구현됩니다. 그러나 디자이너, 개발자 및 사이트 방문자에게는 수많은 중요한 이점을 제공합니다.
디자이너와 개발자를 위한
표현력이 뛰어난 HTML5 태그는 의미 있는 요소와 디자인에만 사용되는 요소를 구별하여 코드 가독성과 유지 관리성을 향상시킵니다. 이는 디자이너와 개발자가 사이트 콘텐츠와 제목 계층 구조를 논리적으로 구성하는 데 도움이 됩니다. 또한 HTML5 태그는 향상된 사이트 성능과 SEO에 기여합니다. 의미 있는 HTML은 종종 비의미적인 코드에 비해 파일 크기가 더 가벼워지기 때문입니다. 검색 엔진은 Div 요소와 같은 비의미적 요소에 포함된 키워드보다 의미적 요소 내의 키워드를 우선시합니다.
접근성을 위해
시력이 있는 사용자는 시각적 디자인을 기반으로 다양한 웹페이지 구성요소를 직관적으로 인식할 수 있지만, 시각 장애가 있는 사용자나 웹 크롤러는 웹사이트 구성요소를 시각적으로 식별하고 이해하는 데 어려움을 겪습니다. 표현력이 풍부한 HTML5 태그를 사용하여 요소를 의미론적으로 정의함으로써 웹 크롤러 및 보조 기술(예: 화면 판독기)에 웹 사이트의 다양한 부분에 대해 알리고 사이트 방문자에게 요소를 보다 정확하게 렌더링하고 전달할 수 있도록 합니다.
더 알아보기:
- Workspace 스팟 및 멤버 포함 또는 제거 - 2024년 4월 15일
- 센터링 상자 요약 - 2024년 4월 15일
- 나중에 참조할 수 있도록 사이트 저장 - 2024년 4월 15일
EN 
ZH 
ZH_CN 
KO 
JA