코딩이 즐겁다

HTML <img> 태그 사용법 갓벽 가이드 본문

HTML

HTML <img> 태그 사용법 갓벽 가이드

코즐 2025. 3. 6. 18:49
반응형

 

 

HTML <img> 태그란?

<img> 태그는 웹페이지에 이미지를 삽입할 때 사용되는 태그입니다. HTML의 빈 요소(self-closing tag)라서 닫는 태그가 필요 없습니다.

 

 

기본 문법

<img src="이미지경로" alt="이미지설명">
속성 설명 필수 여부
src 이미지 파일 경로(URL) 필수
alt 이미지가 로드되지 않을 때 대체 텍스트 권장

 

주요 속성 정리

속성 역할
src 이미지 파일의 경로 또는 URL
alt 이미지 설명 (접근성 및 SEO에 중요)
width 너비 지정 (px, %, em)
height 높이 지정 (px, %, em)
title 툴팁(마우스 올렸을 때 표시되는 텍스트)
loading 이미지 로딩 방법 (lazy, eager)
referrerpolicy 리퍼러 정보 전달 정책
crossorigin 크로스 도메인 요청 정책 설정

 

💡alt 속성

  • 이미지가 깨지거나 로드되지 않을 때 보여줍니다.
  • 스크린 리더가 읽어줍니다. (접근성)
  • 검색 엔진 최적화(SEO)에 도움이 됩니다.

✅ 예제 코드:

<img src="logo.png" alt="회사 로고">

 

💡 이미지 크기 조절 방법

<img> 태그 안에서 width, height 속성을 사용하여 이미지 크기를 조절할 수 있습니다. 혹은 CSS에서도 크기 조정이 가능합니다.

✅ 예제 코드:

<img src="cat.jpg" width="300" height="200" alt="고양이 사진">
img {
  width: 300px;
  height: auto; /* 비율 유지 */
}

 

💡사용 가능한 이미지 형식

  • .jpg, .jpeg: 사진에 적합, 압축률 높음.
  • .png: 배경 투명 지원, 품질 유지.
  • .gif: 간단한 애니메이션.
  • .webp: 고효율, 차세대 이미지 포맷.
  • .svg: 벡터 그래픽, 아이콘 등에 적합.

 

 

사용 예제

둥근 이미지 프로필 카드 만들기

✅ 예제 코드:

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>프로필 카드</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    }
    .profile-card {
      background-color: white;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      text-align: center;
      width: 300px;
    }
    .profile-card img {
      width: 120px;
      height: 120px;
      object-fit: cover;
      border-radius: 50%;
      margin-bottom: 15px;
    }
    .profile-card h2 {
      margin: 10px 0 5px;
    }
    .profile-card p {
      color: #555;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <div class="profile-card">
    <img src="https://tistory1.daumcdn.net/tistory/7291623/attach/d3600c083a6348eabb7e915ef051fa8e" alt="profile image">
    <h2>코즐</h2>
    <p>웹 프론트엔드 개발자<br>코딩이 즐겁다</p>
  </div>
</body>
</html>

🎯 실행 결과:

둥근 이미지 프로필 카드 만들기 실행 결과
둥근 이미지 프로필 카드 만들기 실행 결과

 

lazy 로딩 속성으로 이미지 동적 로딩하기

✅ 예제 코드:

<img src="photo.jpg" alt="풍경 사진" loading="lazy">
  • 이미지가 화면(viewport)에 가까워질 때 로드함.
  • 페이지 로딩 속도, 트래픽 절약에 도움.
  • 브라우저가 지원해야 동작 (현재 대부분의 최신 브라우저 지원).

 

자바스크립트 이미지 동적 로딩하기

✅ 예제 코드:

<img data-src="photo.jpg" alt="풍경 사진" class="lazy">

✅ Javascript 코드:

const lazyImages = document.querySelectorAll('.lazy');

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

lazyImages.forEach(img => {
  observer.observe(img);
});

💁예제 설명:

최초 로딩 때 src를 비워두고 data-src에 이미지 경로를 저장해 둡니다. 그리고 화면에 나타날 때 저장해 둔 이미지 경로에서 이미지를 로딩하는 방법입니다.

 

이미지 태그 사용 시 주의사항

  • 너무 큰 이미지는 용량 최적화 후 사용.
  • 이미지의 원본 비율 유지에 주의 (object-fit, aspect-ratio 활용).
  • 시맨틱 의미 부여를 원한다면 <figure>, <figcaption>과 함께 사용.

✅ <figure>, <figcation> 예제 코드:

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>프로필 카드</title>
  <style>
    figure {
      text-align: center;
    }
  </style>
</head>
<body>
  <figure>
    <img src="https://tistory1.daumcdn.net/tistory/7291623/attach/d3600c083a6348eabb7e915ef051fa8e" alt="profile image">
    <figcaption>아름다운 해질녘</figcaption>
  </figure>
</body>
</html>

🎯 실행 결과:

figure, figcaption 태그 사용 결과

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'HTML' 카테고리의 다른 글

HTML <a> 태그 링크 사용법 갓벽 가이드  (16) 2025.03.10
HTML이란?  (23) 2025.03.02
'HTML' Related Articles more