HTML 입문 문법

HTML 이미지 (Images)

HTML 이미지 (Images) — 초급

이미지 (Images)

1. 도입 (왜 배워야 하는가)

웹 페이지에서 이미지는 정보 전달과 사용자 경험을 풍부하게 만드는 중요한 요소입니다. 이미지가 잘 사용되면 방문자는 더 쉽게 정보를 이해하고, 웹사이트에 대한 긍정적인 인상을 갖게 됩니다. 반면, 이미지를 적절히 사용하지 않으면 웹 페이지가 지루하고 단조롭게 보일 수 있으며, 사용자 이탈률이 높아질 수 있습니다. 따라서 이미지 사용법을 배우는 것은 웹 개발의 기본이자 실무에서 매우 중요한 기술입니다.

2. 핵심 개념 설명

이미지 태그 (`<img>`)

정의: HTML에서 이미지를 삽입할 때 사용하는 태그입니다.
비유: 이미지는 마치 책에서 그림과 같아서, 내용을 이해하는 데 도움을 줍니다.

속성

src: 이미지 파일의 경로를 지정합니다. (필수)
alt: 이미지가 로드되지 않을 경우 대신 보여줄 텍스트를 지정합니다. (접근성을 위해 필수)
width와 height: 이미지의 크기를 지정합니다. (선택)

속성	설명
`src`	이미지 파일의 경로
`alt`	이미지의 대체 텍스트
`width`	이미지의 너비 (픽셀 단위 또는 백분율)
`height`	이미지의 높이 (픽셀 단위 또는 백분율)

3. 기본 코드 예제

아래는 이미지를 웹 페이지에 삽입하는 가장 기본적인 코드입니다.

<img src="https://example.com/image.jpg" alt="예시 이미지" width="300" height="200">

실행 결과: 브라우저에서 지정된 경로의 이미지가 300x200 픽셀 크기로 나타납니다.

코드 한 줄씩 동작 설명

<img>: 이미지 태그의 시작을 나타냅니다.
src="https://example.com/image.jpg": 이미지의 경로를 지정하여 브라우저가 해당 이미지를 불러오도록 합니다.
alt="예시 이미지": 이미지가 불러와지지 않거나 사용자가 이미지 로드를 비활성화할 경우 이 텍스트가 대신 표시됩니다.
width="300": 이미지를 가로 300픽셀로 설정합니다.
height="200": 이미지를 세로 200픽셀로 설정합니다.

4. 실전 활용 예제

예제 1: 쇼핑몰에서 제품 이미지 표시

쇼핑몰 웹사이트에서 제품 이미지를 표시할 때 사용됩니다.

<img src="https://example.com/product.jpg" alt="신발" width="200" height="150">

사용자가 제품을 쉽게 인식할 수 있도록 돕습니다.

예제 2: 블로그 포스트에서 이미지 포함

블로그에서 특정 주제를 강조하기 위해 이미지를 사용할 때:

<img src="https://example.com/article-image.jpg" alt="블로그 주제 관련 이미지" width="600" height="400">

독자가 글의 내용을 더 잘 이해하게 도와줍니다.

5. 흔한 실수와 주의사항

실수 1: `alt` 속성 생략

잘못된 코드:

    <img src="image.jpg">

올바른 코드:

    <img src="image.jpg" alt="대체 텍스트">

실수 2: 잘못된 이미지 경로

잘못된 코드:

    <img src="wrong-path/image.jpg" alt="오류">

올바른 코드:

    <img src="correct-path/image.jpg" alt="정상 이미지">

6. 정리

HTML의 <img> 태그를 사용하여 웹 페이지에 이미지를 삽입할 수 있다.
src, alt, width, height 속성이 중요하다.
이미지 사용은 웹 페이지의 사용자 경험을 향상시킨다.

다음에 학습하면 좋은 주제: CSS를 활용한 이미지 스타일링, HTML5의 <picture> 태그를 통한 반응형 이미지 처리.

학습