CSS

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

박은서's avatar
박은서
Jan 07, 2026
8. 이미지 넣는 2가지 방법
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>
notion image
 

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>
notion image
Share article