소개
웹 개발에서 <address> 태그는 웹 페이지에 연락처 정보를 표시하는 데 사용됩니다. 웹 페이지, 문서 또는 기사를 게시하는 작성자, 조직 또는 회사의 세부 정보를 나타내는 데 사용됩니다.
이 Lab 에서는 간단한 웹 페이지를 만들고 <address> 태그를 사용하여 페이지 하단에 연락처 정보를 표시합니다.
참고:
index.html에서 코딩을 연습할 수 있으며 Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
기본 HTML 템플릿 생성
index.html이라는 HTML 파일을 생성하고 코드 편집기에서 엽니다.
파일에 기본 HTML 템플릿 코드를 추가합니다.
<!doctype html>
<html>
<head>
<title>Contact Information</title>
</head>
<body></body>
</html>
제목과 단락 추가
페이지에 대한 간략한 소개 또는 요약을 제공하기 위해 제목과 단락을 추가합니다.
<h1>Contact Information</h1>
<p>Welcome to my webpage. This webpage contains contact information.</p>
연락처 정보 추가
연락처 정보를 위한 섹션을 만들고 해당 섹션 안에 <address> 태그를 배치합니다. 여는 <address> 태그와 닫는 <address> 태그 사이에 관련 연락처 정보를 추가합니다. 예를 들어:
<section>
<h2>Contact Details</h2>
<address>
<p>John Doe</p>
<p>
123 Main Street <br />
Anytown, USA 12345
</p>
<p><a href="mailto:john@example.com">john@example.com</a></p>
<p><a href="tel:123-456-7890">123-456-7890</a></p>
</address>
</section>
위의 예시에서는 "Contact Details"라는 제목의 섹션을 추가했으며, 해당 섹션 내에 연락처 정보를 표시하기 위해 <address> 태그를 생성했습니다. <address> 태그 안에 이름, 주소, 이메일 및 전화 번호를 추가했습니다.
CSS 스타일 추가
<address> 태그에 몇 가지 CSS 스타일을 추가하여 서식을 지정합니다. 기본적으로 <address> 태그는 블록 레벨 (block level) 로 스타일이 지정되고 이탤릭체로 표시됩니다. 이를 가운데 정렬하고 굵게 변경합니다.
<style>
address {
display: block;
font-weight: bold;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
</style>
index.html 파일을 저장하고 웹 브라우저에서 열어 연락처 정보가 포함된 최종 웹 페이지를 확인합니다.
요약
<address> 태그는 웹 페이지에 연락처 정보를 표시하는 데 사용되는 유용한 HTML 요소입니다. 이 랩에서는 <address> 태그를 사용하여 웹 페이지에 연락처 정보를 표시하는 섹션을 만드는 방법을 배웠습니다. 또한 <address> 태그에 CSS 스타일을 추가하여 시각적으로 더 나은 방식으로 서식을 지정하는 방법도 배웠습니다.
