anchor 요소와 href 속성

링크란 무엇인가요?

href 속성

<a href="https://example.com">Visit Example</a>
<a href="/about">About Us</a>
<a href="../contact.html">Contact</a>
<!-- href = destination URL or path
     Content between tags = clickable text -->
<!-- Without href, a is still valid but not a hyperlink -->

링크 텍스트가 중요한 이유

<!-- Bad: uninformative -->
<a href="/docs/guide">Click here</a>
<a href="/docs/guide">Read more</a>

<!-- Good: descriptive -->
<a href="/docs/guide">Read the Getting Started Guide</a>

<!-- Screen readers list all links — "click here" is meaningless out of context -->

href 값의 유형

<a href="https://example.com">External URL</a>
<a href="/page">Root-relative path</a>
<a href="page.html">Relative path</a>
<a href="#section">Fragment (same page)</a>
<a href="mailto:hi@example.com">Email link</a>
<a href="tel:+1234567890">Phone link</a>
<a href="javascript:void(0)">JS (avoid this)</a>

이메일 및 전화 연결하기

<a href="mailto:support@example.com">Email Support</a>

<a href="mailto:support@example.com?subject=Hello&body=Hi%20there">
  Email with Subject
</a>

<a href="tel:+15555551234">Call Us: (555) 555-1234</a>
<!-- Tapping tel: links on mobile opens the phone dialer -->

링크의 title 속성

<a href="/glossary" title="View the full HTML glossary">Glossary</a>
<!-- title appears as a tooltip on hover
     But: not accessible via keyboard or touch — never rely on title alone for critical info -->

링크 스타일 지정하기

/* Default link states */
a:link    { color: blue; text-decoration: underline; }
a:visited { color: purple; }
a:hover   { color: red; }
a:focus   { outline: 2px solid blue; } /* keyboard focus */
a:active  { color: red; }

/* Never remove :focus outline — keyboard users need it */

활성 링크와 현재 링크

<nav>
  <a href="/">Home</a>
  <a href="/about" aria-current="page">About</a>
  <a href="/contact">Contact</a>
</nav>
<!-- aria-current="page" tells screen readers this link is the current page -->
<!-- CSS: [aria-current="page"] { font-weight: bold; } -->

href가 없는 앵커

<a>Not a link yet</a>
<!-- No href = no hyperlink, no default pointer cursor, not keyboard-focusable -->

<!-- If you need a clickable element without navigation, use button:
<button onclick="doSomething()">Click Me</button> -->

블록 요소 감싸기

<a href="/products/widget">
  <div class="card">
    <h2>Widget Pro</h2>
    <p>The best widget available.</p>
    <img src="widget.jpg" alt="Widget Pro product image">
  </div>
</a>
<!-- Valid in HTML5 (not in HTML4) -->
<!-- Ensure the link text is still descriptive for screen readers -->

링크 포커스와 키보드 접근

빠른 확인

복습: 앵커 요소