CSS 기초 공부(10)

CSS/css 기초

CSS 기초 공부(10) - 이미지

lamarcK 2025. 3. 11. 12:45

웹페이지를 보면 대부분의 사이트에서 이미지가 삽입되어 있는 것을 볼 수 있다. 웹페이지 컨텐츠일 수도 있고 광고나 웹페이지 자체의 로고일 수도 있고 그런 모든 것들이 이미지에 속한다.

바로 이런 광고 등에 사용되는 것들을 예시로 들 수 있을 것이다.

1. <img> 요소 (이미지)

<img> 요소는 웹 페이지에 이미지를 표시하는 데 사용된다.
src 속성을 사용하여 이미지 파일의 경로를 지정한다.
alt 속성을 사용하여 이미지를 표시할 수 없는 경우 대체 텍스트를 제공한다.
width와 height 속성을 사용하여 이미지의 크기를 조절할 수 있다.

HTML

<img src="image.jpg" alt="예시 이미지" width="300" height="200">

CSS

img {
  border: 1px solid black; /* 테두리 추가 */
  border-radius: 5px; /* 모서리 둥글게 */
  box-shadow: 2px 2px 5px gray; /* 그림자 효과 */
}

그렇다면 실제로 이미지 넣으면 어떻게 될까?

<body>
  <img src="cat.jpeg" alt="예시 이미지" width="300" height="200">
  </body>

이미지 자체의 width(너비)와 height(높이)를 정해버려서 이미지의 크기가 그에 맞게 조정되었고 결과적으로 이미지가 찌그러지게 되었다.

<body>
  <img src="cat.jpeg" alt="예시 이미지" width="300">
  </body>

width(너비)만 지정할 경우 이렇게 이미지가 원본 비율을 유지하는 것을 볼 수 있다. 별도로 지정하지 않은 height(높이)의 경우 width(너비)에 따라 비율이 조정된다.

높이만 조정할 경우도 마찬가지로 이미지 비율은 유지가 되는 것을 알 수 있다.

이렇게 이미지를 표현하는 방법 중에 css에서 object-fit 속성을 사용해서 이미지를 조정하는 방법이 있다.

object-fit이란?

<img> 또는 <video> 요소와 같은 대체 요소의 콘텐츠 크기를 어떻게 조절하여 요소에 맞출지 지정하는 CSS 속성이다.

fill : 기본값. 콘텐츠의 가로세로 비율을 무시하고 부모 요소의 크기에 맞춰 늘리거나 줄인다. 결과적으로 이미지가 왜곡될 수 있다.
contain : 콘텐츠의 가로세로 비율을 유지하면서 부모 요소 안에 완전히 들어오도록 크기를 조절한다. 콘텐츠가 부모 요소에 꽉 차지 않을 경우 여백이 생길 수 있다.
cover : 콘텐츠의 가로세로 비율을 유지하면서 부모 요소를 완전히 덮도록 크기를 조절한다. 콘텐츠가 부모 요소보다 클 경우 일부가 잘릴 수 있다.
none : 콘텐츠의 크기를 조절하지 않고 원본 크기를 유지한다. 콘텐츠가 부모 요소보다 클 경우 잘릴 수 있다.
scale-down : 콘텐츠의 크기가 부모 요소보다 작으면 none과 같이 원본 크기를 유지하고, 크면 contain과 같이 비율을 유지하며 크기를 조절한다.

HTML

<body>
  <img class="cat01" src="cat.jpeg" alt="예시 이미지" >
  </body>

CSS

.cat01{
object-fit: cover;
width: 400px;
height: 400px;
}

object-fit: cover 속성은 이미지의 가로세로 비율(종횡비)를 유지하는 속성이다. width(너비)와 height(높이) 중 1개의 값만 지정한다면 종횡비를 유지한 상태로 이미지의 크기가 조정되지만 width(너비)와 height(높이)를 모두 지정하게 되면 종횡비를 유지하기 위해서 이미지의 일부가 잘리게 된다.

그렇다면 부모 요소에 이미지를 집어 넣을 경우에는 어떻게 될까?

<body>
  <div style="width: 300px; height: 200px; border: 1px solid black;">
  <img class="cat01" src="cat.jpeg" alt="예시 이미지" >
</div>
  </body>

.cat01{
object-fit: contain ;
}

기본적으로는 부모 요소를 넘어서 이미지의 원본 크기를 그대로 보여주게 된다. 때문에 부모 요소를 넘지 않도록 이미지의 크기를 조정하는 과정이 필요하다.

1. %를 사용해서 조정하는 방법

.cat01{
object-fit: contain ;
max-width: 100%;
max-height: 100%;
}

css상에 max 속성을 사용해서 이미지의 최대 크기를 부모 크기를 기준으로 설정하는 방법이다.

max-width 와 max-height 속성은 요소의 최대 크기를 부모 요소의 크기를 기준으로 제한하는 속성이다.

2. overflow 속성을 사용해서 조정하는 방법

<body>
  <div style="width: 300px; height: 200px; border: 1px solid black; overflow: hidden;" >
  <img class="cat01" src="cat.jpeg" alt="예시 이미지" >
</div>
  </body>

콘텐츠가 요소의 크기를 초과할 경우 그것을 조정하는 속성을 통해서 이미지를 조정할 수도 있다.

overflow 속성의 주요 값:

visible (기본값):
- 콘텐츠가 요소의 크기를 초과하더라도 숨기지 않고 모두 표시합니다.
- 넘치는 콘텐츠는 요소 밖으로 표시될 수 있습니다.
hidden:
- 콘텐츠가 요소의 크기를 초과하는 부분을 숨깁니다.
- 넘치는 콘텐츠는 잘려서 표시되지 않습니다.
scroll:
- 콘텐츠가 요소의 크기를 초과하든 아니든 항상 스크롤 막대를 표시합니다.
- 넘치는 콘텐츠를 스크롤하여 볼 수 있습니다.
auto:
- 콘텐츠가 요소의 크기를 초과할 때만 스크롤 막대를 표시합니다.
- 넘치는 콘텐츠가 없으면 스크롤 막대가 표시되지 않습니다.
overflow-x:
- 가로 방향(x축)의 넘침을 제어합니다.
overflow-y:
- 세로 방향(y축)의 넘침을 제어합니다.

만약에 hidden 속성을 사용해서 이미지를 조정했을 경우 부모 요소를 넘치는 부분을 전부 숨김 처리해버려서 일부분만 보이도록 만들어진다.

웹페이지는 여러개의 요소들의 집합이기 때문에 이미지만 표시하는 경우는 거의 없다고 할 수 있다.

<body>
  <div style="width: 300px; height: 200px; border: 1px solid black;" >
  <img class="cat01" src="cat.jpeg" alt="예시 이미지" >
</div>
<div style="font-size: 30; background-color: aquamarine;">넘친 영역</div>
  </body>

그런데 이런식으로 div로 하나의 영역을 만들어도 막상 이미지 아래 쪽에 표시되는 것이 아닌 겹쳐서 표시되는 것을 볼 수 있다.

HTML 요소는 기본적으로 문서의 흐름에 따라 순차적으로 배치치되는데 왜 서로 영역이 겹치게 될까?

이것은 기본적으로 이미지가 인라인 요소이기 때문이다. 때문에 이미지가 부모 요소를 넘쳐서 화면을 차지하는 경우에 넘친영역 <div>를 이미지 위에 표시하는 방법은 있지만 이미지 아래쪽에 위치하도록 하는 것은 css 상에서는 안되는 것으로 보인다.

때문에 기본적으로 부모 요소의 크기에 맞춰서 이미지를 사용하는 방법이 가장 좋아보인다.

<body>
  <div style="width: 300px; height: 200px; border: 1px solid black;" >
  <img class="cat01" src="cat.jpeg" alt="예시 이미지" >
</div>
<div style="font-size: 30; background-color: aquamarine;">넘친 영역</div>
  </body>

.cat01{
  object-fit: contain ;
  max-width: 100%;
  max-height: 100%;
  }