address element - by. UXKM

요약 설명

<address> 요소는 문서나 콘텐츠의 작성자 또는 관련 인물·조직의 연락처 정보를 나타내는 시맨틱 태그입니다.
일반적으로 이름, 이메일, 전화번호, 물리적 주소, 소셜 링크 등 연락 가능한 정보를 포함하며, 보통 문서의 <footer> 영역에서 사용됩니다. 시각적으로는 기울임체로 표현되며, 문서 전체 또는 특정 콘텐츠의 소유자 정보를 구분짓는 데 적합합니다.

주요 역할 및 특징

  1. 연락처 정보 표현
    • <address>는 이메일 주소, 물리적 주소, 전화번호 등의 연락처 정보를 나타내는 데 사용됩니다.
    • 주로 문서 작성자나 관련 조직의 정보를 제공하는 데 적합합니다.
  2. 위치 및 용도
    • <address>는 문서 전체의 연락처 정보를 나타낼 수도 있고, 특정 섹션이나 <article>과 관련된 정보일 수도 있습니다.
    • <address>는 보통 문서의 최하단(예: 페이지 푸터)이나 특정 섹션과 관련된 연락처 정보가 필요할 때 사용됩니다.
  3. 의미론적 태그

    <address>는 연락처 정보를 의미론적으로 정의하며, 검색 엔진과 스크린 리더가 이 정보를 쉽게 파악할 수 있도록 돕습니다.

  4. 포함 가능한 콘텐츠

    텍스트와 인라인 요소(<a> 등)를 포함할 수 있지만, 다른 블록 요소는 포함하지 않습니다.

CSS 기본 값

<address> 요소는 기본적으로 블록 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.

기본 문법

속성

<address> 요소는 고유 속성을 가지지 않으며, 글로벌 속성(class, id, style, aria-*, data-* 등)만 사용할 수 있습니다.

예제

문서 전체의 연락처 정보

회사 정보 제공

블로그 게시물의 작성자 정보

접근성을 고려한 연락처 정보

주의사항

  • <address>는 문맥상 연락처 정보를 나타내는 데만 사용해야 하며, 단순 스타일링 목적으로 사용하면 안됩니다.
  • <address> 내부에는 다른 블록 요소를 포함할 수 없습니다. 필요하다면 적절히 텍스트와 인라인 요소로 구성해야 합니다.