4일 차: 링크와 이미지 추가하기
학습 목표: HTML에서 링크(a 태그)와 이미지(img 태그)를 이해하고 사용하는 방법 배우기
1. 링크 태그 (a 태그)
링크는 웹페이지를 연결하는 데 사용돼. 링크를 클릭하면 다른 페이지로 이동할 수 있어. 링크는 a 태그로 만들고, href 속성을 사용하여 이동할 URL을 지정해.
기본 링크 예제:
html
<! DOCTYPE html>
<html>
<head>
<title>Link Example </title>
</head>
<body>
<h1>My Favorite Websites </h1>
<p>Visit <a href="https://www.google.com"> Google </a> for web searches. </p>
<p>Visit <a href="https://www.wikipedia.org"> Wikipedia </a> for information on various topics. </p>
</body>
</html>
설명:
<a href="URL">: URL로 이동하는 링크를 나타내.
href: 링크가 이동할 주소를 지정하는 속성.
새 탭에서 열리는 링크:
html
<!DOCTYPE html>
<html>
<head>
<title>Open Link in New Tab </title>
</head>
<body>
<p>Click <a href="https://www.example.com" target="_blank">here</a> to open Example.com in a new tab. </p>
</body>
</html>
설명:
target="_blank": 링크를 클릭하면 새로운 탭에서 열리도록 해.
2. 이미지 태그 (img 태그)
이미지는 웹페이지를 시각적으로 더 매력적으로 만들어줘. 이미지를 추가하려면 img 태그를 사용해. src 속성은 이미지 파일의 경로를 지정하고, alt 속성은 이미지가 표시되지 않을 때 대체 텍스트를 제공해.
기본 이미지 예제:
html
<!DOCTYPE html>
<html>
<head>
<title>Image Example </title>
</head>
<body>
<h1>My Favorite Image </h1>
<img src="https://www.example.com/image.jpg" alt="A beautiful scenery">
</body>
</html>
설명:
<img src="이미지 URL" alt="대체 텍스트">: 이미지를 삽입하는 태그.
src: 이미지 파일의 경로를 지정하는 속성.
alt: 이미지가 표시되지 않을 때 대체 텍스트를 제공하는 속성.
이미지 크기 조절:
html
<!DOCTYPE html>
<html>
<head>
<title>Resize Image </title>
</head>
<body>
<h1>Small Image </h1>
<img src="https://www.example.com/image.jpg" alt="A small beautiful scenery" width="200" height="100">
</body>
</html>
설명:
width와 height: 이미지의 너비와 높이를 픽셀 단위로 조절.
3. 이미지에 링크 추가하기
이미지 자체를 링크로 사용할 수도 있어. 이미지를 클릭하면 다른 페이지로 이동하도록 만들 수 있어.
이미지 링크 예제:
html
<!DOCTYPE html>
<html>
<head>
<title>Image Link Example </title>
</head>
<body>
<h1>Clickable Image </h1>
<a href="https://www.example.com">
<img src="https://www.example.com/image.jpg" alt="A clickable scenery">
</a>
</body>
</html>
설명:
<a> 태그 안에 <img> 태그를 넣으면, 이미지를 클릭할 때 링크가 작동해.
4. 로컬 이미지 사용하기
로컬 이미지는 컴퓨터에 저장된 이미지를 웹페이지에 삽입하는 거야. 웹페이지 파일과 같은 디렉터리에 있는 이미지를 사용할 수 있어.
로컬 이미지 예제:
html
<!DOCTYPE html>
<html>
<head>
<title>Local Image Example </title>
</head>
<body>
<h1>My Local Image </h1>
<img src="myimage.jpg" alt="A local scenery">
</body>
</html>
설명:
myimage.jpg: HTML 파일과 같은 디렉토리에 있는 이미지 파일 이름.
5. 실습과 응용
이제 위에서 배운 내용을 토대로 연습해보자.
실습 1: 다양한 링크 만들기
html
<!DOCTYPE html>
<html>
<head>
<title>Link Practice </title>
</head>
<body>
<h1>Useful Links </h1>
<p>Check out the <a href="https://www.wikipedia.org" target="_blank">Wikipedia</a> for a wealth of information. </p>
<p>Visit the <a href="https://www.bbc.com"> BBC </a> for the latest news. </p>
<p>Learn programming at <a href="https://www.codecademy.com"> Codecademy </a>. </p>
</body>
</html>
실습 2: 다양한 이미지 추가하기
html
<!DOCTYPE html>
<html>
<head>
<title>Image Practice </title>
</head>
<body>
<h1>My Favorite Images </h1>
<img src="https://www.example.com/image1.jpg" alt="Scenery 1" width="300" height="200">
<img src="https://www.example.com/image2.jpg" alt="Scenery 2" width="400" height="300">
<img src="https://www.example.com/image3.jpg" alt="Scenery 3" width="500" height="400">
</body>
</html>
실습 3: 이미지에 링크 추가하기
html
<!DOCTYPE html>
<html>
<head>
<title>Image Link Practice </title>
</head>
<body>
<h1>Clickable Images </h1>
<a href="https://www.google.com">
<img src="https://www.example.com/image1.jpg" alt="Google" width="200" height="150">
</a>
<a href="https://www.facebook.com">
<img src="https://www.example.com/image2.jpg" alt="Facebook" width="200" height="150">
</a>
</body>
</html>
6. 복습과 정리
오늘은 HTML에서 링크와 이미지를 추가하는 방법을 배웠어. 링크(a 태그)는 웹페이지를 연결해 주고, 이미지(img 태그)는 웹페이지를 시각적으로 풍부하게 만들어줘. 링크와 이미지를 조합하면 이미지 클릭 시 다른 페이지로 이동할 수 있어. 로컬 이미지를 사용하는 방법도 배웠지. 이제 연습을 통해 배운 내용을 복습해보자. 다양한 링크와 이미지를 만들어보고, 스타일을 적용해 보는 것도 좋은 연습이 될 거야. 내일은 HTML에서 리스트(list)와 표(table)를 만드는 방법을 배워보자. 이렇게 해서 오늘의 학습을 마쳤어. 오늘도 잘했어! 내일도 재미있게 HTML을 배워보자