이미지는 웹 페이지를 더욱 풍부하고 생동감 있게 만드는 데 없어서는 안 될 중요한 요소입니다. 오늘의 포스팅에서는 HTML에서 이미지를 삽입하는 방법과 각종 속성을 다루어보도록 하겠습니다. 먼저 이미지 태그와 속성에 대해 알아보고, 이를 직접 실습하는 시간을 가지겠습니다.
자동목차
이론: 이미지 태그와 속성
1. <img> 태그
HTML에서 이미지를 삽입할 때에는 <img> (image) 태그를 사용합니다. <img> 태그는 빈 태그(empty tag)이며, 닫는 태그가 없습니다. 가장 중요한 속성은 src(source)와 alt(alternative text)입니다.
2. 주요 속성
src: 이미지 파일의 경로를 지정합니다. 상대 경로나 절대 경로를 사용할 수 있습니다.
alt: 이미지의 대체 텍스트로, 이미지가 표시되지 않을 때 나타나거나 이미지를 설명하는 데 사용됩니다.
width와 height: 이미지의 너비와 높이를 지정합니다. 픽셀 값이나 백분율로 설정할 수 있습니다.
실습: 이미지 삽입하기
이제 직접 이미지를 웹 페이지에 삽입해 보겠습니다.
1. 텍스트 에디터를 열고 아래의 HTML 코드를 입력해 보세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 삽입하기</title>
</head>
<body>
<h1>HTML 이미지 삽입 연습</h1>
<h2>로컬 이미지 삽입</h2>
<img src="images/picture.jpg" alt="아름다운 풍경" width="500">
<h2>웹 이미지 삽입</h2>
<img src="https://example.com/images/picture.jpg" alt="아름다운 풍경" height="300">
<p>이미지가 제공하는 시각적 정보가 얼마나 중요한지 잘 보여줍니다.</p>
</body>
</html>
2. 'images' 폴더를 생성하고, 그 안에 'picture.jpg'라는 이미지 파일을 넣으세요. 이 파일은 실제로 존재하여야 합니다.
3. HTML 파일을 'images.html'로 저장하고, 웹 브라우저에서 파일을 열어 잘 작동되는지 확인해 보세요.
코드 설명
<img> 태그는 두 개 사용되었습니다. 하나는 로컬 이미지를 삽입하고, 다른 하나는 웹 이미지를 삽입하기 위해 사용되었습니다.
src 속성을 통해 이미지의 경로를 지정하였고, 이는 로컬 경로와 웹 URL을 모두 포함할 수 있습니다.
alt 속성에 '아름다운 풍경'이라는 대체 텍스트를 추가하여 이미지가 로드되지 않을 때 또는 스크린 리더를 사용하는 사용자에게 이미지를 설명합니다.
width와 height 속성으로 이미지의 크기를 조절하였습니다. 이 속성은 생략하면 이미지의 원본 크기로 표시됩니다.
마무리
이미지 태그와 그 속성을 사용하는 방법을 실습해 보면서, 웹 페이지에 이미지를 추가하는 데 필요한 기술을 배울 수 있었습니다. 잘 선택된 이미지는 사용자의 관심을 끌고 정보를 효과적으로 전달하는 강력한 도구가 될 수 있습니다.
웹 개발에 있어 시각적 요소의 중요성은 강조할 필요가 없습니다. 오늘의 연습을 통해 여러분의 웹사이트가 한층 더 생생하고 매력적으로 변한 것을 느낄 수 있기를 바랍니다. 다음 포스팅에서는 이미지와 관련된 다른 HTML 요소에 대해서 더 알아볼 예정입니다.
이상으로 블로그 포스팅을 마치겠습니다. 여러분의 코드가 즐겁게 살아나길 바랍니다!