연결의 비밀: Links & Anchors

핵심 개념

<a> 태그의 href는 단순한 주소가 아니에요. 절대 경로와 상대 경로의 차이를 알고, 페이지 내부의 특정 위치로 점프하는 법을 익혀봅시다.

코드 분석

HTML5📋 코드 (4줄)

구글로 이동 (새창)
하단으로 이동

여기까지 오셨군요!

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 a 태그 코드에서 target='_blank' 보안 문제(noopener),
접근성, SEO(rel) 누락 부분을 찾아 수정해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

rel='noopener'·'nofollow'·'sponsored' 차이와
네이버, 쿠팡, 다음 사이트의 외부 링크 패턴을
비교 예시로 보여줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 페이지의 모든 a 태그를 분석해서
외부/내부 링크 비율, rel 속성 사용률,
SEO·보안 위험을 정리해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

2026년 SEO에서
rel='nofollow'/'sponsored' 구분이
실제 랭킹에 영향을 주는지 솔직히 알려줘.

⭐ 이것만 기억하세요

연결의 비밀: Links & Anchors는 이 3가지만 확실히 잡으세요

1.href 없는 a 태그는 클릭해도 아무 일도 일어나지 않고, 잘못된 경로는 404 에러를 유발합니다

2.a 태그의 href는 외부 URL, 내부 경로, 페이지 내 앵커(#id) 세 가지 방식으로 연결을 만듭니다

3.다음 챕터에서 텍스트 링크를 넘어 이미지를 삽입하고 figure로 감싸는 법을 배웁니다

진행도 12 / 33