HTML에서 링크와 이미지는 웹 페이지를 더욱 풍성하고 유용하게 만들어주는 필수 요소입니다. 링크는 다른 페이지로 사용자를 이동시키고, 이미지는 정보를 시각적으로 전달하거나 디자인에 생동감을 부여합니다. 이번 장에서는 왕초보도 쉽게 따라할 수 있도록 <a> 태그와 <img> 태그의 기본 사용법부터 실전 활용 방법까지 친절하게 안내해 드리겠습니다.
1. 링크를 만드는 <a> 태그 기본 이해
<a>는 \"anchor\"(닻)라는 의미를 갖고 있으며, 페이지 안팎의 다른 위치로 이동할 수 있게 해줍니다. 가장 기본적인 형태는 다음과 같습니다.
<a href=\"https://example.com\">예제 사이트로 이동하기</a>위 코드에서 href 속성은 연결할 URL을 지정합니다. 링크 텍스트(이 경우 '예제 사이트로 이동하기')를 클릭하면 해당 주소로 이동하게 됩니다.
✔ 주의할 점
- 필수 속성:
href가 빠지면 클릭해도 아무 동작을 하지 않습니다. - 텍스트는 명확하게: \"클릭하세요\"보다는 \"문의 페이지로 이동하기\"처럼 목적이 분명한 문구가 SEO에 유리합니다.
2. 새 창으로 열기: target=\"_blank\"
링크를 클릭했을 때 기존 페이지를 유지한 채 새 탭에서 열고 싶다면 target=\"_blank\" 속성을 추가합니다.
<a href=\"https://example.com\" target=\"_blank\">새 탭으로 열기</a>이때 보안을 위해 rel=\"noopener noreferrer\" 속성도 함께 작성하는 것이 좋습니다. 이는 링크된 페이지가 원본 페이지에 접근하는 것을 방지해 줍니다.
<a href=\"https://example.com\" target=\"_blank\" rel=\"noopener noreferrer\">새 탭으로 안전하게 열기</a>3. 문서 안 특정 위치로 이동하기 (앵커 링크)
같은 페이지 안에서 특정 섹션으로 바로 이동시키고 싶을 때도 <a>를 사용할 수 있습니다.
<h2 id=\"contact\">문의하기 섹션</h2> <a href=\"#contact\">문의하기로 바로 가기</a>이렇게 id를 설정한 요소로 점프할 수 있어, 긴 페이지에 매우 유용합니다.
4. 이미지를 삽입하는 <img> 태그 기본 이해
<img> 태그는 이미지를 페이지에 표시할 때 사용하며, 닫는 태그 없이 한 줄로 작성됩니다. 가장 기본적인 형태는 다음과 같습니다.
<img src=\"/images/sample.jpg\" alt=\"예제 이미지\">✔ 필수 속성
- src: 이미지 파일 경로
- alt: 이미지가 보이지 않을 때 대신 보여줄 텍스트 (접근성, SEO 모두에 중요)
반드시 alt를 작성해 주세요. 시각 장애인이 스크린 리더로 페이지를 읽을 때도 유용하고, 검색엔진이 이미지 내용을 이해하는 데에도 필요합니다.
5. 이미지 크기 조절과 최적화
이미지에 width와 height 속성을 지정하면 로딩 중에도 공간이 확보되어 레이아웃이 깔끔하게 유지됩니다.
<img src=\"/images/sample.jpg\" alt=\"예제 이미지\" width=\"400\" height=\"300\">반응형 웹에서는 어떻게 할까?
CSS에서 max-width: 100%;를 설정해 이미지가 부모 요소의 크기에 맞춰 자동으로 줄어들게 만드는 것이 기본입니다. 이 방법은 다음 강좌에서 CSS와 함께 자세히 다루겠습니다!
6. 링크 + 이미지를 함께 사용하기
이미지를 클릭하면 다른 페이지로 이동시키는 것도 가능합니다. 이 경우 <a> 태그 안에 <img>를 넣습니다.
<a href=\"https://example.com\" target=\"_blank\" rel=\"noopener noreferrer\"> <img src=\"/images/banner.jpg\" alt=\"배너 클릭 시 이동\"> </a>이 방법은 배너 광고, 썸네일 링크 등에 매우 많이 쓰입니다.
7. 실전 미니 프로젝트: 내비게이션 + 갤러리 만들기
링크와 이미지를 조합해 심플한 메뉴와 작은 갤러리를 직접 만들어봅시다!
<nav> <ul> <li><a href=\"index.html\">홈</a></li> <li><a href=\"about.html\" target=\"_blank\" rel=\"noopener\">소개</a></li> <li><a href=\"contact.html\">문의하기</a></li> </ul> </nav> <div class=\"gallery\"> <a href=\"/gallery/img1_large.jpg\" target=\"_blank\"> <img src=\"/gallery/img1_thumb.jpg\" alt=\"첫 번째 사진\"> </a> <a href=\"/gallery/img2_large.jpg\" target=\"_blank\"> <img src=\"/gallery/img2_thumb.jpg\" alt=\"두 번째 사진\"> </a> </div>이렇게 링크와 이미지를 조합하면 깔끔한 내비게이션 메뉴와 갤러리를 만들 수 있습니다!
8. 마무리 및 다음 강좌 예고
이번 제3장에서는 <a> 태그로 링크를 만들고, <img> 태그로 이미지를 삽입하는 기본부터, 새 창 열기, 문서 내 점프, 반응형 이미지 설정까지 다양한 활용법을 배웠습니다. 링크와 이미지는 웹 페이지의 기본이자 가장 강력한 무기입니다.
\n\n
다음 제4장에서는 목록(<ul>, <ol>)과 표(<table>)를 활용하여 정보를 구조화하는 방법을 배울 예정입니다. 조금 더 체계적인 페이지 구성을 준비해 봅시다!