가로세로비(aspect-ratio)

aspect-ratio는 사진의 가로와 세로의 비율을 정하는 사진 틀과 같습니다.

이 속성을 사용하면 요소의 크기를 조절할 때, 원하는 가로 세로 비율을 유지할 수 있습니다.

코드 예시

CSS
.box {
  width: 100px; /* 가로 너비 */
  aspect-ratio: 16 / 9; /* 16:9 가로세로비 */
  background-color: lightblue;
}

.box 클래스를 사용한 요소는 너비가 100px로 설정되고, 높이(height)는 자동으로 56.25px(100/16*9)이 되어 16:9 비율을 유지합니다.

object-fit은 사진을 사진 앨범에 넣을 때 어떻게 넣을지 결정하는 것과 유사합니다.

사진이 너무 크면 잘라내기:
- object-fit: cover;
- 이 값은 컨테이너의 크기에 맞게 콘텐츠를 확대/축소하되, 콘텐츠의 가로세로비를 유지합니다. 만약 콘텐츠의 비율이 컨테이너의 비율과 다르다면, 초과하는 부분이 잘리게 됩니다.
사진이 너무 작으면 중앙에 놓기:
- object-fit: none;
- 이 값은 콘텐츠의 크기를 변경하지 않고 그대로 유지합니다. 컨테이너의 크기와 상관없이 원래의 크기로 표시되며, 주로 중앙에 위치하게 됩니다.
사진의 비율을 유지하면서 전체 앨범에 꽉 채우기:
- object-fit: contain;
- 이 값은 콘텐츠가 컨테이너에 완전히 맞도록 확대/축소하되, 가로세로비를 유지합니다. 콘텐츠가 컨테이너를 완전히 채우지 않을 경우, 여백이 생기게 됩니다.

CSS
.image {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

.image 클래스를 사용한 이미지 요소는 원래의 이미지 비율을 유지하면서, 300px * 200px 크기의 사각형 안에 꽉 차게 됩니다.

filter는 사진에 필터 효과를 넣는 것과 같습니다.

filter 속성을 사용하면 이미지나 요소에 다양한 그래픽 효과를 적용할 수 있습니다. 예를 들어 그림자, 투명도, 채도, 밝기 등의 효과를 적용할 수 있습니다.

CSS
.filtered-image {
  filter: grayscale(100%) blur(3px); /* 흑백, 흐림 효과 */
}

.filtered-image 클래스를 사용한 요소는 흑백 필터가 적용되고, 3픽셀의 블러 효과로 인해 경계가 약간 흐려지게 됩니다.

코드의 별표로 강조된 부분을 따라 입력해 보세요.

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!