소개
이 랩에서는 HTML A 태그를 사용하여 하이퍼링크와 탐색을 생성하는 방법을 배우고, 포괄적인 웹 페이지 구조를 구축하고 다양한 링크 기술을 구현하는 데 중점을 둡니다. 이 랩은 기본적인 HTML 페이지 설정, 페이지 간 탐색 링크 생성, 연락처 링크 구현, 문서 북마크 개발, 그리고 target 속성을 사용한 링크 동작 탐구를 통해 학생들을 안내합니다.
참가자들은 기본적인 HTML5 문서 구조를 설정하는 것으로 시작하여, 내부 페이지 탐색, 이메일 및 전화 연락처 링크, 그리고 페이지 간 참조를 포함한 다양한 유형의 하이퍼링크를 추가하여 점진적으로 기술을 향상시킬 것입니다. 랩이 끝나면 학생들은 앵커 태그를 효과적으로 사용하여 상호 작용적이고 잘 구조화된 웹 페이지를 만드는 방법에 대한 확실한 이해를 갖게 될 것입니다.
기본 HTML 페이지 구조 설정
이 단계에서는 하이퍼링크와 탐색을 추가하기 위한 기반 역할을 하는 기본적인 HTML 페이지 구조를 만드는 방법을 배웁니다. HTML (HyperText Markup Language, 하이퍼텍스트 마크업 언어) 은 웹 페이지를 생성하기 위한 표준 마크업 언어입니다.
먼저, WebIDE 를 열고 ~/project 디렉토리로 이동합니다. 파일 탐색기에서 마우스 오른쪽 버튼을 클릭하고 "New File"을 선택하여 index.html이라는 새 파일을 만듭니다.
필수적인 구조를 갖춘 간단한 HTML5 문서를 만들어 보겠습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>
This is a basic HTML page structure that we'll use to create hyperlinks.
</p>
</body>
</html>
이 HTML 구조의 주요 구성 요소를 살펴보겠습니다.
<!DOCTYPE html>은 이것이 HTML5 문서임을 선언합니다.<html>은 HTML 페이지의 루트 요소입니다.<head>는 문서에 대한 메타 정보를 포함합니다.<meta charset="UTF-8">는 문자 인코딩을 지정합니다.<meta name="viewport">는 모바일 장치에서 적절한 렌더링을 보장합니다.<title>은 브라우저 탭에 표시되는 페이지 제목을 설정합니다.<body>는 보이는 페이지 내용을 포함합니다.
참고: WebIDE 에서 HTML 파일을 미리 보는 방법에 대해 자세히 알아보세요.
이 파일을 브라우저에서 열었을 때의 예시 출력:
페이지 간 탐색 링크 생성
<a> 태그는 HTML 에서 하이퍼링크를 생성하는 데 사용됩니다. 하이퍼링크를 생성하기 위한 기본 구문은 <a href="URL">Link Text</a>입니다.
이 단계에서는 HTML 앵커 (<a>) 태그를 사용하여 서로 다른 페이지 간의 탐색 링크를 만드는 방법을 배웁니다. 먼저, 페이지 간 탐색을 시연하기 위해 추가 HTML 파일을 만들어 보겠습니다.
~/project 디렉토리에 about.html과 contact.html이라는 두 개의 새 파일을 만듭니다.
index.html 파일을 업데이트하여 탐색 링크를 포함합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Website</title>
</head>
<body>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
<h1>Welcome to My Website</h1>
<p>This is the home page with navigation links.</p>
</body>
</html>
about.html 파일을 만듭니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>About Page</title>
</head>
<body>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
<h1>About Us</h1>
<p>Learn more about our website and mission.</p>
</body>
</html>
contact.html 파일을 만듭니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Page</title>
</head>
<body>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
<h1>Contact Us</h1>
<p>Get in touch with our team.</p>
</body>
</html>
페이지 간 탐색에 대한 주요 사항:
<a href="...">속성은 대상 페이지를 지정합니다.- 동일한 디렉토리의 페이지 간에 링크할 때는 상대 파일 경로를 사용합니다.
- 각 페이지는 일관된 탐색 메뉴를 포함합니다.
웹 브라우저에서의 예시 출력:
이메일 및 전화 연락 링크 구현
이 단계에서는 HTML 앵커 태그를 사용하여 클릭 가능한 이메일 및 전화 번호 링크를 만드는 방법을 배웁니다. contact.html 파일을 열고 특수 링크 유형으로 업데이트합니다.
다음 내용으로 contact.html 파일을 업데이트합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Page</title>
</head>
<body>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
<h1>Contact Information</h1>
<h2>Get in Touch</h2>
<h3>Email Links</h3>
<p>
Contact us at:
<a href="mailto:support@example.com">support@example.com</a>
</p>
<h3>Phone Links</h3>
<p>
Call us at:
<a href="tel:+1-555-123-4567">+1 (555) 123-4567</a>
</p>
<h3>Multiple Contact Options</h3>
<p>
Email: <a href="mailto:info@example.com">info@example.com</a><br />
Phone: <a href="tel:+1-800-555-0199">1-800-CONTACT</a>
</p>
</body>
</html>
이메일 및 전화 링크에 대한 주요 사항:
mailto:접두사는 기본 이메일 클라이언트를 여는 이메일 링크를 생성합니다.tel:접두사는 모바일 장치에서 작동하는 전화 번호 링크를 생성합니다.- 이러한 링크를 사용하면 사용자가 한 번의 클릭으로 쉽게 연락할 수 있습니다.
웹 브라우저에서의 예시 출력:
단일 페이지 내 문서 북마크 생성
이 단계에서는 HTML 앵커 태그를 사용하여 내부 페이지 북마크를 만드는 방법을 배웁니다. ~/project 디렉토리에 다음 내용으로 long-document.html이라는 새 파일을 만듭니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document with Bookmarks</title>
<style>
body {
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
section {
height: 500px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>Table of Contents</h1>
<nav>
<a href="#section1">Section 1</a> | <a href="#section2">Section 2</a> |
<a href="#section3">Section 3</a>
</nav>
<section id="section1">
<h2>Section 1: Introduction</h2>
<p>
This is the first section of our long document. Click the links above to
navigate quickly.
</p>
</section>
<section id="section2">
<h2>Section 2: Main Content</h2>
<p>This is the second section with more detailed information.</p>
</section>
<section id="section3">
<h2>Section 3: Conclusion</h2>
<p>This is the final section of the document.</p>
</section>
<a href="#" style="position: fixed; bottom: 20px; right: 20px;"
>Back to Top</a
>
</body>
</html>
문서 북마크에 대한 주요 사항:
<style>블록은 섹션 높이 및 여백을 포함하여 문서를 스타일링하기 위한 CSS 를 추가합니다. 지금은 CSS 에 대해 걱정하지 마세요. 나중에 랩에서 다룰 것입니다.max-width: 600px;는 문서의 최대 너비를 설정합니다.margin: 0 auto;는 문서를 가로로 가운데 정렬합니다.line-height: 1.6;은 가독성을 높이기 위해 줄 간격을 설정합니다.section { height: 500px; margin-bottom: 20px; }는 각 섹션의 높이와 여백을 설정합니다.
id속성을 사용하여 북마크 대상을 만듭니다.href="#elementId"를 사용하여 특정 섹션으로 이동하는 링크를 만듭니다.#기호 뒤에id가 오면 내부 페이지 링크가 생성됩니다.
long-document.html을 탐색 링크 끝에 추가하여 문서를 미리 볼 수 있습니다.
웹 브라우저에서의 예시 출력:
링크 동작을 위한 Target 속성 사용
이 단계에서는 링크가 열리는 방식을 제어하는 HTML 링크 target 속성에 대해 배웁니다. ~/project 디렉토리에 link-targets.html이라는 새 파일을 만듭니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Link Target Attributes</title>
</head>
<body>
<h1>Link Target Demonstration</h1>
<h2>Default Link Behavior</h2>
<p>
<a href="https://www.example.com">Normal Link</a>
(Opens in the same window)
</p>
<h2>Target Attribute Examples</h2>
<p>
<a href="https://www.example.com" target="_blank">New Tab Link</a>
(Opens in a new tab)
</p>
<h2>Multiple Target Demonstrations</h2>
<p>
<a href="https://www.example.com" target="_self">Same Window</a> |
<a href="https://www.example.com" target="_blank">New Tab</a> |
<a href="https://www.example.com" target="_parent">Parent Frame</a> |
<a href="https://www.example.com" target="_top">Full Browser Window</a>
</p>
<h2>Named Window Target</h2>
<p>
<a href="https://www.example.com" target="myWindow"
>Open in Named Window</a
>
</p>
</body>
</html>
링크 target 속성에 대한 주요 사항:
_blank: 링크를 새 탭 또는 창에서 엽니다._self: 기본 동작으로, 동일한 창에서 엽니다._parent: 부모 프레임에서 엽니다._top: 전체 브라우저 창에서 엽니다.- 사용자 지정 이름 지정된 target 은 특정 창 동작을 만들 수 있습니다.
웹 서버 URL 을 복사하고 URL 끝에 /link-targets.html을 추가하여 페이지를 봅니다 (새 탭).
웹 브라우저에서의 예시 출력:
요약
이 랩에서는 포괄적인 HTML 웹 페이지를 만들고 다양한 하이퍼링크 기술을 구현하는 방법을 배웠습니다. 랩은 DOCTYPE, 메타 태그 및 기본 콘텐츠 구성과 같은 필수 요소를 시연하면서 기본적인 HTML5 페이지 구조를 설정하는 것으로 시작했습니다. 참가자들은 웹 사이트의 다른 섹션을 연결하기 위해 HTML 앵커 태그를 활용하여 여러 페이지 간의 탐색 링크를 만드는 것을 탐구했습니다.
이 랩은 이메일 및 전화 연락처 링크 구현, 단일 페이지 내 문서 북마크 생성, target 속성을 통한 링크 동작 이해와 같은 고급 기술을 도입하여 하이퍼링크 기능을 더욱 확장했습니다. 이러한 실습을 통해 HTML 의 링크 메커니즘을 사용하여 대화형으로 잘 구성된 웹 페이지를 구축하는 실질적인 경험을 제공했습니다.
