2024. 3. 6. 22:30ㆍCSS
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
반응형 디자인은 현대 웹 개발에서 필수적인 요소로 자리 잡았습니다. 다양한 디바이스와 화면 크기에 맞게 웹 페이지를 최적화하는 것은 사용자 경험을 향상하는 중요한 과제 중 하나입니다. 그중에서도 object-fit 속성은 이미지와 비디오 등의 미디어 콘텐츠를 부모 요소에 맞게 조절하면서도 원본의 비율을 유지하는 강력한 수단으로 부상하고 있습니다.
object-fit이 웹 페이지의 스타일링에 어떻게 적용되고 있는지 알아봅시다.
object-fit 이란?
object-fit은 이미지나 비디오와 같은 대체 요소를 부모 요소 크기에 맞게 조절하는 속성입니다. 이 속성은 다양한 값들을 통해 콘텐츠의 크기와 비율을 유연하게 제어할 수 있어, 반응형 레이아웃에 많이 활용되는 속성입니다.
이미 이전 포스팅을 통해, 비디오 영상을 비율 유지한 채 반응형으로 어떻게 스타일링하는 방법에 대해서 알아보았는데요~
궁금하신 분들은 아래 링크를 참고하시면 되겠습니다.
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
[CSS] 유튜브(Youtube) 영상을 비율 유지한 채 반응형으로 삽입하는 방법
유튜브(Youtube) 영상을 비율 유지한 채 반응형으로 삽입하는 방법에 대해서 알아보겠습니다. iframe 코드 복사하기 데모 영상으로 Google Developers의 영상으로 연습해 보았습니다. 1. 공유 버튼을 클릭
dev-chim.tistory.com
object-fit 속성 파헤치기
아래는 주요 object-fit 값들에 대한 설명입니다.
<html>
...
<body>
<div class="parent">
<img class="child" src="https://images.unsplash.com/photo-1709418440197-fb76ad8dd8a1?q=80&w=3200&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="출처 이미지 unsplash" alt="출처 이미지: unsplash">
</div>
</body>
</html>
- fill: 이미지나 비디오를 부모 요소에 꽉 채우도록 크기를 조절합니다. 원본의 가로세로 비율은 무시됩니다.
.parent {
outline: 1px solid black;
width: 300px;
height: 200px;
margin: 0 auto;
}
.child {
width: 100%;
height: 100%;
object-fit: fill;
}
- contain: 이미지나 비디오를 부모 요소에 맞추면서 비율을 유지합니다. 부모 요소 안에서 전체 콘텐츠를 표시하려고 시도합니다.
.parent {
outline: 1px solid black;
width: 300px;
height: 200px;
margin: 0 auto;
}
.child {
width: 100%;
height: 100%;
object-fit: contain;
}
- cover: 이미지나 비디오를 부모 요소에 맞추면서 비율을 유지합니다. 부모 요소를 완전히 덮도록 크기를 조절합니다. 일부 콘텐츠가 부모 요소에서 잘릴 수 있습니다.
.parent {
outline: 1px solid black;
width: 300px;
height: 200px;
margin: 0 auto;
}
.child {
width: 100%;
height: 100%;
object-fit: cover;
}
- none: 기본 동작으로, 이미지나 비디오를 크기 조절 없이 원본 크기대로 표시합니다.
.parent {
outline: 1px solid black;
width: 300px;
height: 200px;
margin: 0 auto;
}
.child {
width: 100%;
height: 100%;
object-fit: none;
}
- scale-down: contain과 유사하지만, 이미지나 비디오가 원본 크기보다 큰 경우에만 contain처럼 동작하고, 작을 경우에는 원본 크기로 표시합니다.
.parent {
outline: 1px solid black;
width: 300px;
height: 200px;
margin: 0 auto;
}
.child {
width: 100%;
height: 100%;
object-fit: scale-down;
}
이러한 object-fit 값들은 웹 디자인에서 미디어 콘텐츠를 효과적으로 다룰 수 있게끔 도와줍니다. 개별적인 요소의 특성에 따라 적절한 값을 선택하여 원하는 디자인을 구현할 수 있습니다.
이렇게 object-fit 속성으로 미디어 콘텐츠를 완벽히 제어하는 방법에 대해서 알아보았습니다.
[CSS] SCSS를 활용한 툴팁(tooltip) 구현해보자! (feat. transform-origin)
툴팁 레이아웃(html) 및 스타일(scss) New 새로운 소식! .wrap { display: flex; justify-content: center; align-items: center; outline: 1px solid red; button { position: relative; } .tooltip{ position: absolute; bottom: calc(-100% - 20px - 6px -
dev-chim.tistory.com
[Safari] 브라우징 경험을 향상시킬 수 있는 노하우 : 웹사이트 주소 전체 표시 및 상태막대 활용
Safari를 더 효율적으로 사용할 수 있도록 웹사이트 주소를 보는 설정과 브라우저 상태막대를 활성화하는 방법에 대해 자세히 알아보겠습니다. 웹사이트 주소 전체 보기 설정 Safari는 기본 설정이
dev-chim.tistory.com
[Javascript] 브라우저 창 크기를 측정하는 주요 속성들에 대해서 알아보자
window.screen.width, window.screen.height, window.outerWidth, window.outerHeight, window.innerWidth, window.innerHeight, document.documentElement.clientWidth, document.documentElement.clientHeight 이러한 속성들은 모두 창의 크기를 나타내지
dev-chim.tistory.com
Vite에서 모듈들 간단하게 설치해서 사용하기 (feat. swiper) - 3편
https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 홈페이지 구축할 때, 자주 사용하는 UI 중 하
dev-chim.tistory.com
[firebase] 구글 Firebase로 무료 웹호스팅하는 방법에 대해서 알아보자
이전 포스팅에서 github pages로 간단하게 사이트 url을 생성해 본 적이 있었는데요. [git] github pages로 나만의 포트폴리오 웹페이지 배포해 보기 [git] github pages로 나만의 포트폴리오 웹페이지 배포해
dev-chim.tistory.com
'CSS' 카테고리의 다른 글
| [CSS] 마크업(markup)할 때, img vs background-image 선택하는 기준은? (2) | 2024.03.10 |
|---|---|
| [CSS] 워드(Word)에서 텍스트 배치와 유사한 레이아웃을 CSS의 float 속성으로 적용하기 (2) | 2024.03.09 |
| [CSS] 노치(Notch)와 홈 바(Home Bar)에 대응하는 CSS 환경 변수(env()) 활용 방법 (2) | 2024.03.05 |
| [CSS] outline이나 border 속성이 아닌 box-shadow 속성으로 선을 그리는 방법 (feat. box-sizing: border-box;) (0) | 2024.02.28 |
| [CSS] 스크롤바(scrollbar) 스타일 제거하는 방법 (1) | 2024.02.27 |