CSS object-position

CSS `object-position`: 미디어의 위치 조정

object-position 속성은 이미지, 비디오 등 미디어 요소가 컨테이너 안에서 배치되는 위치를 지정하는 데 사용됩니다. 주로 object-fit 속성과 함께 사용하여, 이미지를 축소하거나 확대할 때 어떤 부분을 강조할지 지정할 수 있습니다.

1. `object-position`의 기본 개념

*object-position*은 미디어 요소가 컨테이너 안에서 어디에 위치할지를 설정하는 속성입니다. 미디어가 확대되거나 축소될 때, 이미지의 중요한 부분을 잘리지 않도록 위치를 조정할 수 있습니다.

기본 구문

element {
  object-position: x-axis y-axis;
}

x-axis: 요소의 수평 위치를 설정합니다(왼쪽, 가운데, 오른쪽 등).
y-axis: 요소의 수직 위치를 설정합니다(위쪽, 가운데, 아래쪽 등).

기본값은 **50% 50%**이며, 이는 미디어가 가로세로 가운데에 배치된다는 의미입니다.

2. `object-position` 값

object-position 속성은 픽셀(px), 퍼센트(%) 또는 방향(left, right, top, bottom) 같은 키워드로 설정할 수 있습니다.

1) 방향 키워드

방향 키워드를 사용하면 미디어의 위치를 간단하게 설정할 수 있습니다.

left top: 컨테이너의 왼쪽 상단에 미디어를 배치.
center: 컨테이너의 중앙에 미디어를 배치.
right bottom: 컨테이너의 오른쪽 하단에 미디어를 배치.

예시: 이미지의 위치를 왼쪽 상단으로 설정

img {
  width: 300px;
  height: 200px;
  object-fit: cover;
  object-position: left top;
}

이 코드는 이미지가 왼쪽 상단을 기준으로 배치되며, 이미지가 잘릴 경우 왼쪽 상단을 기준으로 잘리지 않는 부분이 보이게 됩니다.

2) 퍼센트 값

퍼센트(%) 값을 사용하면 미디어의 위치를 세밀하게 조정할 수 있습니다. **0%**는 시작점, **100%**는 끝점을 의미합니다.

img {
  width: 300px;
  height: 200px;
  object-fit: cover;
  object-position: 20% 80%; /* 가로 20%, 세로 80% */
}

이 코드는 이미지가 가로로 20%, 세로로 80% 지점에 배치됩니다. 퍼센트를 이용하면 이미지를 원하는 위치로 세밀하게 조정할 수 있습니다.

3) 픽셀 값

픽셀(px) 값을 사용해 정확한 위치를 지정할 수 있습니다.

img {
  width: 300px;
  height: 200px;
  object-fit: cover;
  object-position: 50px 100px;
}

이 코드는 이미지가 왼쪽에서 50px, 위쪽에서 100px만큼 떨어진 위치에 배치됩니다.

3. `object-position`과 `object-fit` 함께 사용하기

*object-position*은 주로 object-fit 속성과 함께 사용됩니다. **object-fit: cover*나 object-fit: contain 같은 값을 사용하면 이미지가 컨테이너의 비율에 맞춰 크기를 조정하게 되는데, 이때 이미지의 중요한 부분이 잘리지 않도록 위치를 조정하는 데 유용합니다.

예시: `object-fit`과 함께 사용

<div class="container">
  <img src="image.jpg" alt="Example Image">
</div>

.container {
  width: 300px;
  height: 200px;
  overflow: hidden; /* 컨테이너 밖으로 넘치는 이미지를 숨김 */
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 이미지를 컨테이너에 꽉 채우되 비율 유지 */
  object-position: top; /* 이미지의 상단 부분을 유지하고 잘림 */
}

이 예시는 **object-fit: cover**를 사용해 이미지가 컨테이너를 완전히 채우도록 설정하면서, **object-position: top**을 사용해 이미지의 상단을 기준으로 배치합니다. 상단에 있는 중요한 내용이 잘리지 않도록 설정할 수 있습니다.

4. 실전 예시: 다양한 `object-position` 적용

예시 1: 갤러리 이미지 가운데 정렬

img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: center;
}

이 코드는 갤러리 이미지를 가운데 정렬하면서 비율을 유지하고, 이미지를 잘리더라도 중심을 기준으로 보여줍니다.

예시 2: 제품 이미지 상단 강조

img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: top;
}

이 코드는 제품 사진의 상단을 강조하고 하단이 잘리더라도 상단을 기준으로 배치되게 만듭니다.

예시 3: 배경 이미지 좌측 하단 배치

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left bottom;
}

이 코드는 배경 이미지가 컨테이너의 왼쪽 하단에 배치되도록 설정합니다. 비율을 유지하면서 잘리지 않고 배치됩니다.

결론

CSS object-position 속성은 이미지나 비디오가 확대되거나 축소될 때, 컨테이너 안에서 어떻게 배치될지를 설정할 수 있게 해줍니다. 이를 통해 미디어가 컨테이너에서 잘리지 않도록 위치를 조정하거나, 중요한 부분이 항상 화면에 보이도록 세밀하게 제어할 수 있습니다. object-fit 속성과 함께 사용하면 반응형 웹 디자인에서 시각적인 일관성을 유지하는 데 매우 유용합니다.

코딩 스쿨 CSS