2-7. HTML의 기본 태그_a 태그

Jan 02, 2026

Contents

1. a 태그 1️⃣ a 태크란?2️⃣ a 태그의 기본 성질 3️⃣ href 값 종류 (실무에서 자주 씀)4️⃣ target="_blank" 속성 (새 창 열기)5️⃣ a 태그 안에 올 수 있는 것 6️⃣ 버튼처럼 쓰기 (실무 핵심)7️⃣ a 태그 vs button 차이 8️⃣ 접근성 & SEO 팁 ⭐9️⃣ 자주 하는 실수 ❌🔟 실습

1. a 태그

1️⃣ a 태크란?

1) 개념

HTML에서 하이퍼링크(anchor) 를 만드는 태그

페이지 이동, 파일 다운로드, 이메일/전화 연결까지 담당하는 가장 중요한 인라인 태그 중 하나

2) a 태그 기본 문법


<a href="https://example.com">링크 텍스트</a>

3) 핵심 속성

href : 이동할 주소 (필수)

링크 텍스트 : 사용자가 클릭하는 내용

2️⃣ a 태그의 기본 성질

기본 display: inline

줄바꿈 없음

기본 스타일

파란색
밑줄 있음


<p>
<a href="#">링크1</a>
<a href="#">링크2</a>
</p>

3️⃣ href 값 종류 (실무에서 자주 씀)

1) 🌐 외부 링크


<a href="https://naver.com">네이버</a>

2) 📄 내부 페이지 이동


<a href="/login.html">로그인</a>

3) 📍 같은 페이지 내 이동 (앵커)


<a href="#section1">섹션으로 이동</a>

<h2 id="section1">섹션 1</h2>

4) 📧 이메일 / 📞 전화


<a href="mailto:test@example.com">이메일</a>
<a href="tel:01012345678">전화</a>

5) 📂 파일 다운로드


<a href="file.pdf" download>PDF 다운로드</a>

4️⃣ `target="_blank"` 속성 (새 창 열기)


<a href="https://google.com" target="_blank">구글</a>

⚠️ target="_blank" 속성 입력하지 않으면 target="_self"(기존창에서 열기)가 디폴트값

보안 권장 설정 ⚠️


<a href="https://google.com" 
	 target="_blank"
	 rel=" ">
   구글
</a>

5️⃣ a 태그 안에 올 수 있는 것

1) ✅ 가능


<a href="#">
<img src="btn.png" alt="버튼">
</a>


<a href="#">
<strong>강조된 링크</strong>
</a>

2) ❌ 불가능 / 주의


<a href="#">
<a href="#">중첩 링크</a>
</a>

➡️ a 태그 안에 또 다른 a 태그 ❌

6️⃣ 버튼처럼 쓰기 (실무 핵심)

a 태그는 인라인이라 클릭 영역이 작음 → CSS로 해결


a.button {
	display: inline-block;
	padding: 10px16px;
	background: #333;
	color: #fff;
	text-decoration: none;
}


<a href="/buy" class="button">구매하기</a>

7️⃣ a 태그 vs button 차이

구분	a	button
목적	이동	동작 실행
URL	있음	없음
새 페이지	가능	불가
JS 이벤트	가능	가능

➡️ 페이지 이동 = a

➡️ 동작 실행 = button

8️⃣ 접근성 & SEO 팁 ⭐

1) ❌ 나쁜 링크 텍스트


<a href="#">여기</a>

2) ⭕ 좋은 링크 텍스트


<a href="/policy">이용약관 보기</a>

9️⃣ 자주 하는 실수 ❌

1) ❌ href 없이 a 태그


<a>클릭</a>

➡️ 의미 없는 링크 → 접근성 문제

2) ❌ 링크로 JS만 처리


<a href="#" onclick="doSomething()">실행</a>

➡️ button이 맞는 상황

🔟 실습


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>a태그 (하이퍼텍스트)</h1>
    <hr />
    <div>
      이상혁 ( 1996년 5월 7일생), 더 잘 알려진 이름은
      <a
        href="https://ko.wikipedia.org/wiki/%ED%8E%98%EC%9D%B4%EC%BB%A4"
        target="_blank"
        >페이커</a
      >
      ( Faker )는 대한민국의 프로
      <a
        href="https://ko.wikipedia.org/wiki/%EB%A6%AC%EA%B7%B8_%EC%98%A4%EB%B8%8C_%EB%A0%88%EC%A0%84%EB%93%9C"
        target="_blank"
        >리그 오브 레전드</a
      >
      선수입니다. 2013년에 데뷔한 그는 선수 생활 내내 T1 (구 SK텔레콤 T1) 의
      미드라이너로 활약해 왔습니다 . 그는
      <a
        href="https://ko.wikipedia.org/wiki/%EB%A6%AC%EA%B7%B8_%EC%98%A4%EB%B8%8C_%EB%A0%88%EC%A0%84%EB%93%9C_%EC%B1%94%ED%94%BC%EC%96%B8%EC%8A%A4_%EC%BD%94%EB%A6%AC%EC%95%84"
        target="_blank"
        >리그 오브 레전드 챔피언십 코리아 (LCK)</a
      >에서 최다인 10회 우승, 미드 시즌 인비테이셔널 (MSI)에서 2회 우승, 그리고
      월드 챔피언십에서 최다인 6회 우승을 차지했습니다. 페이커는 역사상 가장
      위대한 리그 오브 레전드 선수로 널리 인정받고 있으며, 그의 e스포츠 성공은
      농구 선수 마이클 조던 에 비견될 정도입니다 .
    </div>
  </body>
</html>

Contents