Reference/HTML
<address> 태그는 문서 관련 연락처 콘텐츠 영역을 설정합니다.
<address>
<address> 태그는 문서 관련 연락처 콘텐츠 영역을 설정합니다.
| 특징 | 설명 |
|---|---|
| 요소 | 블록 요소(Block Element) |
| 닫는 태그 | 적용 |
| 버전 | HTML4 |
| 시각적 표현 | 기울임꼴 |
| 사용성 | ★★★☆☆ |
정의(Definition)
- <address> 태그는 사이트 주소, 전화번호, 이메일, 소설미디어, 위치 등을 표시합니다.
- <address> 태그는 회사 정보, 회사 이름, 회사 주소 등과 관련된 정보를 표시합니다.
- <address> 태그는 <header>, <article>, <footer>, <aside>등 연락처 정보가 필요한 곳에 사용할 수 있습니다.
- <address> 태그는 연락처와 관련 없는 내용이라면 <p> 태그를 사용합니다.
- <address> 태그는 연락처 정보 보다 더 광범위한 정보를 포함 할 수 없습니다.(시간을 나타내는 time 태그등)
- <address> 태그는 일반적으로 <footer> 영역에서 많이 사용합니다.
섹션과 관련된 태그
- <section> 태그는 주제별 그룹의 콘텐츠 섹션을 설정합니다.
- <article> 태그는 문서의 독립적인 컨텐츠 섹션을 설정합니다.
- <aside> 태그는 주요 콘텐츠의 보조적 컨텐츠 섹션을 설정합니다.
- <nav> 태그는 문서에 대한 메뉴 링크를 제공하는 섹션을 설정합니다.
- <main> 태그는 문서의 주요 콘텐츠 영역을 설정합니다.
- <header> 태그는 소개 및 메뉴 그룹 컨텐츠 영역을 설정합니다.
- <footer> 태그는 문서 관련 정보 및 관련 링크 콘텐츠 영역을 설정합니다.
- <address> 태그는 문서 관련 연락처 콘텐츠 영역을 설정합니다.
- <h1>~<h6> 태그는 각 섹션의 제목을 설정합니다.
문서와 관련된 태그
- <html> 태그는 문서의 최상단 요소를 나타냅니다.
- <head> 태그는 문서 정보에 해당하는 내용을 설정합니다.
- <body> 태그는 문서 본문에 해당하는 내용을 설정합니다.
- <base> 태그는 문서의 기본 URL을 설정합니다.
- <link> 태그는 문서의 외부 리소스를 설정합니다.
- <meta> 태그는 문서의 메타 정보를 설정합니다.
- <style> 태그는 문서의 스타일 정보를 설정합니다.
- <title> 태그는 문서의 제목을 설정합니다.
속성(Property)
| 속성 | 값(예) | 설명 | 버전 | |
|---|---|---|---|---|
| 글로벌 속성 | accesskey | accesskey = "a" | 키보드 단축키 힌트를 제공합니다. | - |
| autocapitalize | autocapitalize = "off" | 텍스트를 자동으로 대문자로 변환할지 여부를 설정합니다. | - | |
| autofocus | autofocus | 문서가 로딩되면 해당 요소에 포커서를 설정합니다. | - | |
| contenteditable | contenteditable = "true" | 사용자가 콘텐츠를 편집할 수 있는지 설정합니다. | - | |
| class | class = "className" | 클래스 이름을 설정합니다. | - | |
| data-* | data-name = "name" | 사용자가 지정하여 속성을 설정할 수 있습니다. | - | |
| dir | dir = "rtl" | 요소 글씨의 방향을 설정합니다. | - | |
| draggable | draggable = "true" | 드래그 사용할 수 있는지 설정합니다. | - | |
| enterkeyhint | enterkeyhint = "next" | 엔터 키에 대한 힌트를 설정합니다. | - | |
| hidden | hidden | 요소를 숨김 처리할 수 있습니다. hidden 요소는 렌더링하지 않습니다. | - | |
| id | id = "name" | 고유 식별자 아이디를 설정합니다. CSS나 Script에서 사용합니다. | - | |
| inputmode | inputmode = "email" | 브라우저가 제공해야 하는 가상 키보드 설정을 알려줍니다 | - | |
| itemid | itemid = "name" | 아이템 요소의 고유 식별자 아이디를 설정합니다. | - | |
| itemprop | itemprop = "name" | 아이템 요소의 고유 식별자 속성을 설정합니다. | - | |
| itemref | itemref = "name" | 아이템 요소의 고유 식별자를 연결합니다. | - | |
| itemscope | itemscope | 아이템 요소의 범위를 설정합니다. | - | |
| lang | lang = "ko" | 요소의 언어를 설정합니다. | - | |
| spellcheck | spellcheck = "true" | 요소의 맞춤법 검사 여부를 설정합니다. | - | |
| style | style = "margin: 0" | 요소의 적용할 CSS 속성을 설정합니다. | - | |
| tabindex | tabindex = "0" | 요소의 탭 인덱스를 설정합니다. | - | |
| title | title = "titleName" | 요소의 타이틀을 설정합니다. | - | |
| translate | translate = "no" | 요소의 번역 여부를 설정합니다. | - |
예제1(Sample)
연락처 정보를 제공합니다.
HTML
CSS
SCRIPT
<address>
<p>© WEBSTORYBOY Reference Site</p>
<p><a href="mailto:webstoryboy@naver.com">webstoryboy@naver.com</a></p>
<p><a href="tel:01093128004">010-9312-8000</a></p>
</address>
a {
color: #FF4B4C;
border-bottom: 1px solid #FF4B4C;
}
//Javascript none
호환성(Compatibility)
6
78
9
10
11
<address>
○
○
○
○
○
○
○
○
○
○
○
○
○
○
참고(Reference)
연락처 정보를 제공합니다.
HTML
CSS
SCRIPT
<address>
<p>© WEBSTORYBOY Reference Site</p>
<p><a href="mailto:webstoryboy@naver.com">webstoryboy@naver.com</a></p>
<p><a href="tel:01093128004">010-9312-8000</a></p>
</address>
a {
color: #FF4B4C;
border-bottom: 1px solid #FF4B4C;
}
//Javascript none
|
|
|
|
|
6 |
7 |
8 |
9 |
10 |
11 |
|
|
|
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <address> | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
댓글