안녕하세요! 프론트엔드 강사입니다. 이번에는 CSS를 다루면서 정말 자주 만나지만, 그 개념을 정확히 모르고 넘어가는 경우가 많은 '대체 요소(Replaced Elements)'에 대해 알아보겠습니다. 이미지를 다룰 때 비율이 찌그러져서 고생하셨던 경험이 있다면, 오늘 배우는 내용이 정말 큰 도움이 될 거예요! 아주 쉽고 자세하게, 실무 꿀팁까지 곁들여서 설명해 드릴게요. 자, 시작해 볼까요?
대체 요소 스타일링 (Styling replaced elements)
어떤 CSS 속성들은 모든 요소에 적용되고, 어떤 것들은 그리드(grid)나 플렉스(flex) 컨테이너에만 적용되며, 또 어떤 것들은 변형(transform) 가능한 요소에만 적용됩니다. 이 가이드에서는 오직 대체 요소(replaced elements)에만 특별히 적용되는 속성들에 대해 소개해 드릴 거예요.
대체 요소(replaced element)란 그 표현(화면에 표시되는 모습)이 CSS의 범위를 벗어나는 요소를 말합니다. 즉, CSS의 포맷팅 모델과는 독립적으로 렌더링되는 외부 객체들이죠. <iframe>과 같은 일부 대체 요소들은 자신만의 독립적인 스타일시트를 가질 수는 있지만, 부모 문서(HTML)의 스타일을 상속받지는 않습니다.
👨🏫 강사의 팁:
'대체 요소'라는 말이 참 어렵게 느껴지시죠? 쉽게 생각해서<img>,<video>,<iframe>같은 태그들을 떠올려보세요. 우리가 HTML에<img>태그를 적고 이미지 주소를 넣으면, 브라우저가 외부에서 진짜 이미지 파일을 다운로드해 와서 화면의 그 자리를 '대체'해 버리잖아요? 그래서 대체 요소라고 부르는 거랍니다! 이 요소들은 CSS로 내부 픽셀 하나하나의 색깔을 바꿀 수는 없다는 게 핵심 특징이에요.
대체 요소에 CSS 사용하기 (Using CSS with replaced elements)
CSS는 여백(margin)을 계산할 때나 일부 auto 값을 계산할 때 등 특정한 상황에서 대체 요소를 특별하게 취급합니다. 오직 대체 요소만이 고유 크기(intrinsic dimensions)를 가질 수 있거든요. 전부는 아니지만, 일부 대체 요소는 고유 크기나 정의된 베이스라인(baseline)을 가지고 있으며, 이는 vertical-align과 같은 몇몇 CSS 속성에서 기준점으로 사용됩니다.
👨🏫 보충 설명:
여기서 '고유 크기'란 이미지가 태생적으로 가지고 있는 원본 픽셀 크기(예: 800x600)를 의미해요. 일반적인<div>는 안에 글자 같은 내용물이 없으면 높이가 0이 되지만,<img>는 우리가 CSS로 너비나 높이를 안 줘도 원본 이미지 크기만큼 자리를 떡하니 차지하죠? 이게 바로 대체 요소가 고유 크기를 갖고 있기 때문입니다.
문서(HTML)에 적용된 스타일로 대체 요소 자체의 전체 크기(size)나 위치(position)를 정할 수는 있습니다. 하지만 문서의 스타일이 대체 요소 '내부의 콘텐츠' 자체를 건드릴 수는 없어요. 단, 몇 가지 예외가 있습니다! CSS 이미지 모듈(CSS images module)에는 대체 요소의 박스 안에서 '내부 콘텐츠(예: 실제 사진)'가 어떻게 배치될지 제어할 수 있는 멋진 속성들이 포함되어 있답니다.
콘텐츠 박스 안에서 객체 위치 제어하기 (Controlling object position within the content box)
CSS 이미지 모듈은 대체 요소가 차지하는 박스 영역 안에서, 내부 객체(콘텐츠)가 어떻게 배치되어야 하는지를 구체적으로 지정할 수 있는 두 가지 속성을 정의하고 있습니다. 바로 객체의 크기를 맞추는 object-fit 속성과, 위치를 조절하는 object-position 속성입니다.
object-fit 속성 (The object-fit property)
object-fit 속성은 대체 요소의 내부 콘텐츠 객체가 자신을 감싸고 있는 요소의 박스에 어떻게 맞춰져야(fit) 하는지를 지정합니다. 이 속성은 이미지, 비디오 및 기타 포함 가능한(embeddable) 미디어 포맷들이 대체 요소 콘텐츠 박스의 높이와 너비에 어떻게 반응할지를 정의해요.
만약 요소에 할당된 공간(박스)의 높이, 너비 또는 종횡비(가로세로 비율)가 그 공간을 차지할 실제 리소스(이미지 등)와 다르다면 어떻게 될까요? 이때 fill, contain, cover, scale-down, none과 같은 값들을 사용하면, 브라우저가 리소스의 크기를 비율에 맞게 조절할지, 할당된 공간을 꽉 채울지, 공간 안에 리소스를 다 들어가게 할지, 아니면 리소스가 찌그러지는 것을 허용할지 완벽하게 통제할 수 있습니다.
👨🏫 강사의 팁:
각 값이 어떻게 작동하는지 헷갈리시죠? 실무에서 제일 많이 쓰는 것 위주로 정리해 드릴게요.
cover(가장 많이 씀!): 박스에 빈틈없이 꽉 채웁니다. 비율이 안 맞으면 넘치는 부분은 쿨하게 잘라버려요. (프로필 사진, 썸네일에 필수!)contain: 이미지가 절대 잘리지 않고 박스 안에 쏙 다 들어가게 비율을 맞춰 줄입니다. 대신 비율이 다르면 위아래나 양옆에 여백(레터박스)이 생겨요.fill(기본값): 무조건 박스 크기에 맞춰서 가로세로를 늘리거나 줄입니다. 그래서 비율이 안 맞으면 이미지가 찌그러집니다.
요소가 contain이나 scale-down을 사용해서 크기가 조절되었을 때, 내부 객체가 대체 요소의 박스를 다 덮지 못해서 남는 영역(여백)이 생기면 그 부분에는 요소의 배경(background)이 보이게 됩니다.
참고로 object-fit 속성은 <iframe>, <embed>, 그리고 <fencedframe> 요소에는 아무런 영향을 주지 않습니다.
가로세로 비율이 1:1인 이 정사각형 사진을 100px x 300px 크기의 박스(가로세로 비율 1:3)에 넣는다고 가정해 봅시다. 기본적으로 이미지는 스스로를 찌그러뜨려서라도 그 박스를 가득 채우려고(fill) 할 것입니다. 우리는 object-fit 속성을 사용해서, 이렇게 크기와 비율이 다른 박스에 이미지를 강제로 넣어야 할 때 이미지가 어떻게 렌더링될지 구체적으로 정의할 수 있습니다.
<img
src="[https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg](https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg)"
alt="Pride flag" />
<img
src="[https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg](https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg)"
alt="Pride flag" />
<img
src="[https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg](https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg)"
alt="Pride flag" />
<img
src="[https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg](https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg)"
alt="Pride flag" />
<img
src="[https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg](https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg)"
alt="Pride flag" />
<img
src="[https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg](https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg)"
alt="Pride flag" />
<p>
<label><input type="checkbox" /> Change dimensions</label>
</p>body {
display: flex;
gap: 20px;
flex-flow: row wrap;
grid-auto-flow: column;
max-width: 98%;
margin: 10px auto 0;
}
img {
width: 100px;
height: 300px;
outline: 2px solid purple;
}
body:has(:checked) img {
width: 300px;
height: 100px;
}img:nth-of-type(1) {
object-fit: fill;
}
img:nth-of-type(2) {
object-fit: cover;
}
img:nth-of-type(3) {
object-fit: contain;
}
img:nth-of-type(4) {
object-fit: scale-down;
}
img:nth-of-type(5) {
object-fit: none;
}
img:nth-of-type(6) {
/* no object-fit property */
outline: 2px dashed red;
}위 예제에서 체크박스를 클릭하여 높이와 너비 값을 바꿔보세요. 기본값인 fill(혹은 속성을 아예 주지 않은 마지막 이미지)만 원본 이미지를 찌그러뜨린다는 것을 확인할 수 있습니다. 다른 모든 값들을 사용하면 이미지의 고유한 가로세로 비율이 절대 깨지지 않고 예쁘게 유지됩니다!
object-position 속성 (The object-position property)
object-position 속성은 요소의 박스 안에서 대체 요소의 콘텐츠 객체가 정렬되는 위치를 세밀하게 지정합니다.
이 속성은 주로 방금 배운 object-fit 속성과 함께 짝꿍으로 자주 쓰입니다. 값으로는 배경 이미지를 옮길 때 사용하는 background-position과 완전히 동일한 타입인 <position> 값을 사용합니다.
img {
object-position: bottom right;
}<img
src="[https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg](https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg)"
alt="Pride flag" />이 속성은 굳이 object-fit이 없어도 단독으로 사용할 수 있어요. 아래 예제의 경우, 이미지는 자신의 고유한 크기(218px x 218px) 그대로 렌더링되며, 이미지 내용의 위치만 object-position 값에 의해 이동된 것을 볼 수 있습니다.
👨🏫 강사의 팁:
object-fit: cover를 줘서 이미지가 박스에 꽉 찼는데, 정작 사진 속 인물의 얼굴이 잘려버린 적 있으신가요? 기본적으로 이미지가 정중앙(center)을 기준으로 잘리기 때문이에요. 이럴 때object-position: top이나object-position: 50% 20%등을 주면, 내가 원하는 피사체가 중심이 되도록 사진의 포커스를 옮겨줄 수 있답니다!
img {
outline: 2px solid;
object-position: 114px 72px;
}참고로 이 object-position 속성은 <img> 요소에서뿐만 아니라 <iframe>, <video>, <embed> 요소에서도 똑같이 아주 훌륭하게 작동합니다.
함께 보기 (See also)
더 깊이 있게 공부하고 싶다면 아래 링크들을 참고해 보세요!
- 종횡비 이해하기 (Understanding aspect ratios)
- CSS 이미지 모듈 (CSS images module)
- CSS 디스플레이 모듈 (CSS display module)
- CSS 배경 및 테두리 모듈 (CSS backgrounds and borders module)
수고하셨습니다! 이제 이미지를 레이아웃에 넣을 때 object-fit과 object-position을 활용해서 비율이 깨지지 않게, 그리고 원하는 부분이 잘 보이게 예쁘게 다듬으실 수 있을 거예요. 실무에서 정말 밥 먹듯이 쓰는 속성이니까 코드 에디터에서 직접 이리저리 만져보시는 걸 추천해 드립니다!
