HTML 독학 가이드 3 - 텍스트와 링크
웹의 가장 큰 특징이 뭘까요? 바로 링크예요. 클릭 한 번으로 다른 페이지나 사이트로 이동할 수 있죠. HTML의 <a> 태그가 이걸 가능하게 해요. 오늘은 링크 만드는 법을 완벽하게 배워볼게요!
a 태그 기본
<a> 태그는 “anchor(닻)“의 약자예요.
<a href="https://www.naver.com">네이버로 이동</a>실행 결과:
href: 어디로 이동할지 (필수!)- 태그 사이의 텍스트: 클릭 가능한 부분
클릭하면 네이버로 이동합니다.
링크 종류
외부 링크
다른 웹사이트로 가는 링크예요.
<a href="https://www.google.com">구글</a>
<a href="https://www.youtube.com">유튜브</a>실행 결과:
주의: https:// 또는 http://를 꼭 써야 해요!
내부 링크
같은 사이트 내의 다른 페이지로 가는 링크예요.
<a href="about.html">소개 페이지</a>
<a href="contact.html">연락처</a>
<a href="/blog/post1.html">블로그 글</a>실행 결과:
페이지 내 이동
같은 페이지의 특정 위치로 이동해요.
<!-- 링크 -->
<a href="#section1">섹션 1로 이동</a>
<a href="#section2">섹션 2로 이동</a>
<!-- 목표 지점 -->
<h2 id="section1">섹션 1</h2>
<p>내용...</p>
<h2 id="section2">섹션 2</h2>
<p>내용...</p>실행 결과:
#을 붙이고 id와 연결하면 돼요.
이메일 링크
<a href="mailto:hong@example.com">이메일 보내기</a>실행 결과:
클릭하면 메일 프로그램이 열려요.
전화번호 링크
<a href="tel:010-1234-5678">전화 걸기</a>실행 결과:
모바일에서 클릭하면 바로 전화 걸 수 있어요.
target 속성
링크를 어디서 열지 정해요.
<!-- 같은 탭에서 열기 (기본) -->
<a href="https://www.naver.com">네이버</a>
<!-- 새 탭에서 열기 -->
<a href="https://www.naver.com" target="_blank">네이버</a>실행 결과:
보안 팁:
새 탭으로 열 때는 rel 속성도 추가하세요.
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
링크
</a>title 속성
마우스를 올리면 툴팁이 나타나요.
<a href="https://www.google.com" title="구글 검색 엔진">구글</a>실행 결과:
구글
링크에 마우스를 올려보세요!
download 속성
파일을 다운로드하게 해요.
<a href="document.pdf" download>PDF 다운로드</a>
<a href="image.jpg" download="내사진.jpg">사진 다운로드</a>링크 스타일링 팁
링크는 기본적으로 파란색+밑줄이에요. CSS로 바꿀 수 있지만, 그건 나중에 배워요.
<!-- 기본 링크 -->
<a href="#">일반 링크</a>
<!-- 방문한 링크는 보라색으로 변함 -->실전 예제
내비게이션 메뉴
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>내비게이션 예제</title>
</head>
<body>
<h1>내 웹사이트</h1>
<nav>
<a href="index.html">홈</a> |
<a href="about.html">소개</a> |
<a href="services.html">서비스</a> |
<a href="contact.html">연락처</a>
</nav>
<hr>
<h2>환영합니다!</h2>
<p>저희 웹사이트에 오신 것을 환영합니다.</p>
</body>
</html>실행 결과:
내 웹사이트
환영합니다!
저희 웹사이트에 오신 것을 환영합니다.
목차 (Table of Contents)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>목차 예제</title>
</head>
<body>
<h1>HTML 완벽 가이드</h1>
<h2>목차</h2>
<ul>
<li><a href="#intro">소개</a></li>
<li><a href="#tags">기본 태그</a></li>
<li><a href="#links">링크 만들기</a></li>
</ul>
<hr>
<h2 id="intro">소개</h2>
<p>HTML은 웹 페이지의 구조를 만드는 언어입니다...</p>
<h2 id="tags">기본 태그</h2>
<p>가장 많이 쓰는 태그들을 알아봅시다...</p>
<h2 id="links">링크 만들기</h2>
<p>a 태그로 링크를 만들 수 있어요...</p>
<p><a href="#top">맨 위로</a></p>
</body>
</html>실행 결과:
HTML 완벽 가이드
목차
소개
HTML은 웹 페이지의 구조를 만드는 언어입니다...
기본 태그
가장 많이 쓰는 태그들을 알아봅시다...
링크 만들기
a 태그로 링크를 만들 수 있어요...
연락처 페이지
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연락처</title>
</head>
<body>
<h1>연락처</h1>
<p>궁금한 점이 있으시면 언제든 연락주세요!</p>
<h2>이메일</h2>
<p>
<a href="mailto:contact@example.com">contact@example.com</a>
</p>
<h2>전화</h2>
<p>
<a href="tel:010-1234-5678">010-1234-5678</a>
</p>
<h2>소셜 미디어</h2>
<p>
<a href="https://www.instagram.com/myaccount" target="_blank">
인스타그램
</a> |
<a href="https://www.facebook.com/mypage" target="_blank">
페이스북
</a>
</p>
<h2>자료</h2>
<p>
<a href="brochure.pdf" download>회사 소개서 다운로드</a>
</p>
</body>
</html>실행 결과:
연락처
궁금한 점이 있으시면 언제든 연락주세요!
이메일
전화
소셜 미디어
자료
버튼처럼 보이는 링크
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>버튼 링크</title>
<style>
.button {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>회원가입</h1>
<p>
<a href="signup.html" class="button">가입하기</a>
</p>
</body>
</html>실행 결과:
회원가입
접근성 (Accessibility)
링크를 만들 때 접근성을 고려하세요.
좋은 링크 텍스트
<!-- 나쁜 예 -->
<a href="article.html">여기를 클릭하세요</a>
<!-- 좋은 예 -->
<a href="article.html">HTML 기초 가이드 읽기</a>링크 텍스트만 봐도 어디로 가는지 알 수 있어야 해요.
외부 링크 표시
<a href="https://external-site.com" target="_blank">
외부 사이트 (새 창)
</a>새 탭으로 열린다는 걸 표시해주면 좋아요.
자주 하는 실수
1. href 빠뜨리기
<!-- 틀림: 링크가 안 됨 -->
<a>클릭</a>
<!-- 맞음 -->
<a href="page.html">클릭</a>2. http:// 빠뜨리기
<!-- 틀림: 같은 폴더의 파일로 인식됨 -->
<a href="www.naver.com">네이버</a>
<!-- 맞음 -->
<a href="https://www.naver.com">네이버</a>3. 링크 안에 링크
<!-- 틀림: a 안에 a 불가 -->
<a href="page1.html">
페이지 1
<a href="page2.html">페이지 2</a>
</a>
<!-- 맞음 -->
<a href="page1.html">페이지 1</a>
<a href="page2.html">페이지 2</a>다음 단계
다음 글에서는 이미지와 멀티미디어를 배웁니다. 사진, 동영상, 오디오를 웹 페이지에 넣는 방법을 알아볼 거예요.
링크는 웹의 핵심이에요. 링크가 없으면 웹이 아니죠. 잘 활용하세요!
HTML 독학 가이드 시리즈:
← 블로그 목록으로