안녕하세요! 오늘은 HTML에서 링크와 이미지를 삽입하는 방법에 대해 알아보겠습니다. 웹 페이지를 만들 때 링크와 이미지는 매우 중요한 요소입니다. 이 글을 통해 기본적인 사용법을 익혀보세요!
1. 하이퍼링크 만들기
HTML에서 링크를 만들기 위해서는 <a> 태그를 사용합니다. 이 태그는 "앵커" 태그라고도 불리며, 다른 웹 페이지나 파일로 연결할 수 있습니다.
1.1 기본 문법
<a href="링크주소">링크 텍스트</a>-href: 링크의 목적지 URL을 지정합니다.
-링크 텍스트: 사용자가 클릭할 수 있는 텍스트입니다.
<a href="https://www.example.com">Example 웹사이트로 가기</a>
위의 코드를 사용하면 "Example 웹사이트로 가기"라는 텍스트를 클릭했을 때, 사용자는 https://www.example.com으로 이동하게 됩니다.
1.2 새 탭에서 열기
링크를 클릭했을 때 새 탭에서 열리도록 하려면 target 속성을 추가할 수 있습니다.
<a href="https://www.example.com" target="_blank">새 탭에서 열기</a>
2. 이미지 삽입하기
HTML에서 이미지를 삽입하기 위해서는 <img> 태그를 사용합니다. 이 태그는 이미지 파일을 웹 페이지에 표시하는 데 사용됩니다.
2.1 기본 문법
<img src="이미지주소" alt="대체 텍스트">-src: 이미지 파일의 URL을 지정합니다.
-alt: 이미지가 로드되지 않을 경우 대신 표시될 텍스트입니다. 접근성을 위해 항상 작성하는 것이 좋습니다.
예제
<img src="https://www.example.com/image.jpg" alt="예시 이미지">
위의 코드를 사용하면 https://www.example.com/image.jpg에 있는 이미지를 웹 페이지에 표시합니다.
3. 링크와 이미지 결합하기
링크와 이미지를 결합하여 이미지를 클릭했을 때 다른 페이지로 이동하도록 만들 수 있습니다. 아래와 같이 작성하면 됩니다.
예제
<a href="https://www.example.com">
<img src="https://www.example.com/image.jpg" alt="예시 이미지">
</a>
위의 코드를 사용하면 이미지를 클릭했을 때 https://www.example.com으로 이동하게 됩니다.
4. 실습해보기
이제 여러분이 배운 내용을 바탕으로 간단한 HTML 코드를 작성해보세요. 아래의 코드를 복사하여 HTML 파일로 저장한 후, 웹 브라우저에서 열어보세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>링크'IT프로그램 언어 > HTML' 카테고리의 다른 글
| HTML(텍스트 및 제목 태그) (1) | 2025.03.15 |
|---|---|
| HTML의 소개 (0) | 2025.03.15 |