lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

webIntroHtmlChapter2Title

webIntroHtmlChapter1Title

webIntroHtmlChapter3Title

webIntroHtmlChapter4Title

<!DOCTYPE html>
<html lang="ko">
  <head>
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
      rel="stylesheet"
    />
  </head>
  <body>
    <h1>a 태그 사용법</h1>
    <br />

    
    <a href="https://example.com">현재 창에서 열기</a>

    <br /><br />

    
    <a href="https://example.com" target="_blank" rel="noopener noreferrer"
      >새 창에서 열기</a
    >
  </body>
</html>

# a 태그

`<a>` 태그는 다른 페이지로 이동하는 **링크**(Hyperlink)를 생성합니다.

여기서 a는 `Anchor`를 의미하며, 링크를 기반으로 콘텐츠를 구조화하는 웹 생태계의 핵심적인 역할을 합니다.

<br />

## a 태그 주요 속성

a 태그에는 주로 `href`, `target`, `rel` 속성을 사용합니다.

<br />

- `href`: 이동하는 페이지의 주소(URL) 지정

```html title="a 태그 사용법"
<a href="https://www.codefriends.net">코드프렌즈 방문</a>
```

<br />

- `target`: 링크를 클릭하면 페이지가 어떻게 열릴지 지정. 페이지를 새 창이나 탭에서 열려면 `target="_blank"` 사용

```html title="코드프렌즈 새 창에서 열기"
<a href="https://www.codefriends.net" target="_blank">새 창으로 방문</a>
```

<br />

- `rel`: 현재 페이지와 링크된 대상 사이의 관계를 지정. `target="_blank"`를 사용할 때는 보안을 위해 `rel="noopener noreferrer"`와 같이 사용하는데, 이는 새 창으로 열리는 페이지가 현재 페이지와 관계가 없다는 것을 뜻함

```html title="rel 속성 사용법"
<a href="https://www.codefriends.net" target="_blank" rel="noopener noreferrer"
  >안전하게 새 창으로 방문하기</a
>
```

<br />

## a 태그 사용법

### 1. 외부 웹사이트 링크

클릭 후 외부 웹사이트로 이동합니다. 일반적으로 외부 웹사이트로 이동할 때는 `target="_blank"`를 사용해 새 창에서 열리도록 합니다.

```html title="외부 링크 이동"
<a href="https://example.com" target="_blank">예시 웹사이트</a>
```

<br />

### 2. 문서 내 다른 섹션으로 이동

같은 페이지 내 id(#)로 지정된 다른 섹션으로 이동할 수 있습니다.

```html title="문서 내 이동"
<a href="#section2">2번 섹션으로 이동하기</a>
```