8. 이미지 넣는 2가지 방법

Jan 07, 2026

Contents

1. HTML <img> 태그로 넣기 1️⃣ <img> 태그로 이미지 넣기 2️⃣ 비율 유지 3️⃣ 반응형(화면 크기에 따라 자동 조절)으로 만들기 4️⃣ 실습 2. CSS background-image로 넣기 1️⃣ CSS background-image로 넣기 2️⃣ 비율 유지 3️⃣ 반응형(화면 크기에 따라 자동 조절)으로 만들기 4️⃣ 실습

1. HTML `<img>` 태그로 넣기

1️⃣ `<img>` 태그로 이미지 넣기

1) 사용 방법

가장 기본적인 방식


<img src="image.jpg" alt="설명 텍스트">

2) 언제 필요한가?

콘텐츠 자체인 이미지일 때 (상품 사진, 프로필 사진, 포스터, 차트, 글에 들어가는 그림 등)

SEO, 접근성(스크린리더) 고려할 때

→ alt 속성이 중요함

3) 크기 조정 (기본)


<img src="image.jpg" alt="..." width="300">

이렇게 HTML 속성으로도 가능하지만, 요즘은 CSS로 하는 걸 더 많이 추천함


<img src="image.jpg" alt="..." class="photo">


.photo {
	width:300px;     /* 또는 % 사용 */
	height: auto;    /* 비율 유지 */
}

width만 지정하고 height: auto → 비율 유지하면서 가로 기준으로 줄이기

height만 지정하고 width: auto도 가능은 하지만, 보통 width 기준이 더 일반적

2️⃣ 비율 유지

1) 한쪽만 고정하고 다른 쪽은 auto (가장 기본


img {
	width:100%;/* 부모 너비에 맞추기 */
	height: auto;/* 비율 유지 */
}

또는


img {
	height:300px;
	width: auto;
}

2) 박스 안에 꽉 차게 or 전체 보이게 (`object-fit`)


<img src="image.jpg" class="thumb">


.thumb {
	width:300px;
	height:200px;
	object-fit: cover;          /* 비율 유지, 넘치는 부분은 잘림 */
	object-position: center;    /* 어디 기준으로 자를지 */
}

object-fit: cover

→ 박스를 꽉 채우되, 비율 유지 + 잘라냄(크롭)

(썸네일, 갤러리에서 많이 쓰는 방식)

object-fit: contain

→ 이미지 전체를 다 보여주고, 남는 여백은 비어 있게

(로고, 아이콘, 전체가 보여야 하는 이미지에 적합)

object-fit: fill

→ 비율을 유지 않고 박스를 꽉 채움

(이미지 자체의 왜곡이 허용되는 경우/패턴 같은 배경 형태에 가깝고 비율이 중요하지 않을 때)

값	특징
`cover`	꽉 채우고 남는 부분 잘림 (배경/썸네일에 좋음)
`contain`	전부 보이고 남는 공간 생김 (로고, 전체 보여야 할 때)
`fill`	비율 무시하고 꽉 채움

3️⃣ 반응형(화면 크기에 따라 자동 조절)으로 만들기

1) `<img>`를 반응형으로


img {
	max-width:100%;    /* 부모보다 커지지 않게 */
	height: auto;      /* 비율 유지 */
	display: block;    /* 하단 여백 없애고 싶으면 */
}

이렇게 하면:

화면이 작아지면 → 이미지도 같이 줄어듦

화면이 커져도 → 원본 크기 이상으로는 안 커짐

4️⃣ 실습


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        border: 1px solid black;
        padding: 10px;
      }

      .box1 > img {
        width: 500px;
        height: 200px;
        object-fit: cover;
      }

      .outer_box {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .outer_box > div {
        height: 300px;
      }

      .box2 > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <img
        src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
      />
    </div>
    <div class="outer_box">
      <div class="box2">
        <img
          src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
        />
      </div>
      <div class="box3">3</div>
    </div>
  </body>
</html>

2. CSS `background-image`로 넣기

1️⃣ CSS `background-image`로 넣기

1) 사용 방법

HTML


<div class="banner"></div>

CSS


.banner {
	width:400px;
	height:200px;
	background-image:url("banner.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

2) 언제 필요한가?

이미지는 배경 역할이고, 중요한 텍스트는 따로 있을 때

(배너 배경, 섹션 배경, 카드 배경 등)

이미지 위에 글, 버튼 같은 걸 겹쳐서 올리고 싶을 때

한 요소에 여러 개의 배경 이미지를 겹치고 싶을 때

2️⃣ 비율 유지

여기서는 background-size가 핵심


.box {
	background-image: url("photo.jpg");
	background-repeat: no-repeat;
	background-position: center;
}

1) 꽉 채우면서 비율 유지 (`cover`)


.box {
	background-size: cover;  /* 비율 유지 + 박스 꽉 채움 + 잘림 */
}

<img> + object-fit: cover랑 느낌 거의 같음

2) 전체가 보이게 (`contain`)


.box {
	background-size: contain;  /* 비율 유지 + 이미지 전체 보임 + 여백 생김 */
}

3) 원본 크기 유지


.box {
	background-size: auto;   /* 기본값, 원본 크기 */
}

3️⃣ 반응형(화면 크기에 따라 자동 조절)으로 만들기

1) 고정 비율 박스 만들기 (`aspect-ratio`)

요즘 브라우저는 aspect-ratio를 지원함


.thumb-wrap {
	aspect-ratio:16 /9;/* 가로:세로 비율 */
	width:100%;
	overflow: hidden;
}

.thumb-wrapimg {
	width:100%;
	height:100%;
	object-fit: cover;
}

이렇게 하면 유튜브 썸네일 같은 16:9 고정 비율 박스 안에 자동으로 맞춰짐.

4️⃣ 실습


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        border: 1px solid black;
        padding: 10px;
      }

      .box1 > img {
        width: 500px;
        height: 200px;
        object-fit: cover;
      }

      .outer_box {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .outer_box > div {
        height: 300px;
      }

      .box2 > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .box3 {
        background-image: url("https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80");
        background-size: 100% 100%;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <img
        src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
      />
    </div>
    <div class="outer_box">
      <div class="box2">
        <img
          src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
        />
      </div>
      <div class="box3"></div>
    </div>
  </body>
</html>

Contents

CSS

8. 이미지 넣는 2가지 방법

박은서

Jan 07, 2026

Contents

1. HTML `<img>` 태그로 넣기

1️⃣ `<img>` 태그로 이미지 넣기

1) 사용 방법

가장 기본적인 방식


<img src="image.jpg" alt="설명 텍스트">

2) 언제 필요한가?

콘텐츠 자체인 이미지일 때 (상품 사진, 프로필 사진, 포스터, 차트, 글에 들어가는 그림 등)

SEO, 접근성(스크린리더) 고려할 때

→ alt 속성이 중요함

3) 크기 조정 (기본)


<img src="image.jpg" alt="..." width="300">

이렇게 HTML 속성으로도 가능하지만, 요즘은 CSS로 하는 걸 더 많이 추천함


<img src="image.jpg" alt="..." class="photo">


.photo {
	width:300px;     /* 또는 % 사용 */
	height: auto;    /* 비율 유지 */
}

width만 지정하고 height: auto → 비율 유지하면서 가로 기준으로 줄이기

height만 지정하고 width: auto도 가능은 하지만, 보통 width 기준이 더 일반적

2️⃣ 비율 유지

1) 한쪽만 고정하고 다른 쪽은 auto (가장 기본


img {
	width:100%;/* 부모 너비에 맞추기 */
	height: auto;/* 비율 유지 */
}

또는


img {
	height:300px;
	width: auto;
}

2) 박스 안에 꽉 차게 or 전체 보이게 (`object-fit`)


<img src="image.jpg" class="thumb">


.thumb {
	width:300px;
	height:200px;
	object-fit: cover;          /* 비율 유지, 넘치는 부분은 잘림 */
	object-position: center;    /* 어디 기준으로 자를지 */
}

object-fit: cover

→ 박스를 꽉 채우되, 비율 유지 + 잘라냄(크롭)

(썸네일, 갤러리에서 많이 쓰는 방식)

object-fit: contain

→ 이미지 전체를 다 보여주고, 남는 여백은 비어 있게

(로고, 아이콘, 전체가 보여야 하는 이미지에 적합)

object-fit: fill

→ 비율을 유지 않고 박스를 꽉 채움

(이미지 자체의 왜곡이 허용되는 경우/패턴 같은 배경 형태에 가깝고 비율이 중요하지 않을 때)

값	특징
`cover`	꽉 채우고 남는 부분 잘림 (배경/썸네일에 좋음)
`contain`	전부 보이고 남는 공간 생김 (로고, 전체 보여야 할 때)
`fill`	비율 무시하고 꽉 채움

3️⃣ 반응형(화면 크기에 따라 자동 조절)으로 만들기

1) `<img>`를 반응형으로


img {
	max-width:100%;    /* 부모보다 커지지 않게 */
	height: auto;      /* 비율 유지 */
	display: block;    /* 하단 여백 없애고 싶으면 */
}

이렇게 하면:

화면이 작아지면 → 이미지도 같이 줄어듦

화면이 커져도 → 원본 크기 이상으로는 안 커짐

4️⃣ 실습


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        border: 1px solid black;
        padding: 10px;
      }

      .box1 > img {
        width: 500px;
        height: 200px;
        object-fit: cover;
      }

      .outer_box {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .outer_box > div {
        height: 300px;
      }

      .box2 > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <img
        src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
      />
    </div>
    <div class="outer_box">
      <div class="box2">
        <img
          src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
        />
      </div>
      <div class="box3">3</div>
    </div>
  </body>
</html>

2. CSS `background-image`로 넣기

1️⃣ CSS `background-image`로 넣기

1) 사용 방법

HTML


<div class="banner"></div>

CSS


.banner {
	width:400px;
	height:200px;
	background-image:url("banner.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

2) 언제 필요한가?

이미지는 배경 역할이고, 중요한 텍스트는 따로 있을 때

(배너 배경, 섹션 배경, 카드 배경 등)

이미지 위에 글, 버튼 같은 걸 겹쳐서 올리고 싶을 때

한 요소에 여러 개의 배경 이미지를 겹치고 싶을 때

2️⃣ 비율 유지

여기서는 background-size가 핵심


.box {
	background-image: url("photo.jpg");
	background-repeat: no-repeat;
	background-position: center;
}

1) 꽉 채우면서 비율 유지 (`cover`)


.box {
	background-size: cover;  /* 비율 유지 + 박스 꽉 채움 + 잘림 */
}

<img> + object-fit: cover랑 느낌 거의 같음

2) 전체가 보이게 (`contain`)


.box {
	background-size: contain;  /* 비율 유지 + 이미지 전체 보임 + 여백 생김 */
}

3) 원본 크기 유지


.box {
	background-size: auto;   /* 기본값, 원본 크기 */
}

3️⃣ 반응형(화면 크기에 따라 자동 조절)으로 만들기

1) 고정 비율 박스 만들기 (`aspect-ratio`)

요즘 브라우저는 aspect-ratio를 지원함


.thumb-wrap {
	aspect-ratio:16 /9;/* 가로:세로 비율 */
	width:100%;
	overflow: hidden;
}

.thumb-wrapimg {
	width:100%;
	height:100%;
	object-fit: cover;
}

이렇게 하면 유튜브 썸네일 같은 16:9 고정 비율 박스 안에 자동으로 맞춰짐.

4️⃣ 실습


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        border: 1px solid black;
        padding: 10px;
      }

      .box1 > img {
        width: 500px;
        height: 200px;
        object-fit: cover;
      }

      .outer_box {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .outer_box > div {
        height: 300px;
      }

      .box2 > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .box3 {
        background-image: url("https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80");
        background-size: 100% 100%;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <img
        src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
      />
    </div>
    <div class="outer_box">
      <div class="box2">
        <img
          src="https://a0.muscache.com/4ea/air/v2/pictures/8b7519ec-2c82-4c09-8233-fd4d2715bbf9.jpg?t=r:w375-h250-sfit,e:fjpg-c80"
        />
      </div>
      <div class="box3"></div>
    </div>
  </body>
</html>

Contents

8. 이미지 넣는 2가지 방법

1. HTML <img> 태그로 넣기

1️⃣ <img> 태그로 이미지 넣기

1) 사용 방법

2) 언제 필요한가?

3) 크기 조정 (기본)

2️⃣ 비율 유지

1) 한쪽만 고정하고 다른 쪽은 auto (가장 기본

2) 박스 안에 꽉 차게 or 전체 보이게 (object-fit)

3️⃣ 반응형(화면 크기에 따라 자동 조절)으로 만들기

1) <img>를 반응형으로

4️⃣ 실습

2. CSS background-image로 넣기

1️⃣ CSS background-image로 넣기

1) 사용 방법

2) 언제 필요한가?

2️⃣ 비율 유지

1) 꽉 채우면서 비율 유지 (cover)

2) 전체가 보이게 (contain)

3) 원본 크기 유지

3️⃣ 반응형(화면 크기에 따라 자동 조절)으로 만들기

1) 고정 비율 박스 만들기 (aspect-ratio)

4️⃣ 실습

8. 이미지 넣는 2가지 방법

1. HTML <img> 태그로 넣기

1️⃣ <img> 태그로 이미지 넣기

1) 사용 방법

2) 언제 필요한가?

3) 크기 조정 (기본)

2️⃣ 비율 유지

1) 한쪽만 고정하고 다른 쪽은 auto (가장 기본

2) 박스 안에 꽉 차게 or 전체 보이게 (object-fit)

3️⃣ 반응형(화면 크기에 따라 자동 조절)으로 만들기

1) <img>를 반응형으로

4️⃣ 실습

2. CSS background-image로 넣기

1️⃣ CSS background-image로 넣기

1) 사용 방법

2) 언제 필요한가?

2️⃣ 비율 유지

1) 꽉 채우면서 비율 유지 (cover)

2) 전체가 보이게 (contain)

3) 원본 크기 유지

3️⃣ 반응형(화면 크기에 따라 자동 조절)으로 만들기

1) 고정 비율 박스 만들기 (aspect-ratio)

4️⃣ 실습

1. HTML `<img>` 태그로 넣기

1️⃣ `<img>` 태그로 이미지 넣기

2) 박스 안에 꽉 차게 or 전체 보이게 (`object-fit`)

1) `<img>`를 반응형으로

2. CSS `background-image`로 넣기

1️⃣ CSS `background-image`로 넣기

1) 꽉 채우면서 비율 유지 (`cover`)

2) 전체가 보이게 (`contain`)

1) 고정 비율 박스 만들기 (`aspect-ratio`)

1. HTML `<img>` 태그로 넣기

1️⃣ `<img>` 태그로 이미지 넣기

2) 박스 안에 꽉 차게 or 전체 보이게 (`object-fit`)

1) `<img>`를 반응형으로

2. CSS `background-image`로 넣기

1️⃣ CSS `background-image`로 넣기

1) 꽉 채우면서 비율 유지 (`cover`)

2) 전체가 보이게 (`contain`)

1) 고정 비율 박스 만들기 (`aspect-ratio`)