2025-02-03T19:29:18

docs/16_이미지.md

@@ -1,10 +1,52 @@
-# Styling Image and Media
+# 이미지 관련 속성 (img, picture, video)
 
-* `width`
-* `height`
-* `min-width`, `min-height`
-* `max-width`, `max-height`
-* `object-fit` : fill | contain | cover | none | scale-down
-* `object-position`
+| 속성 | 설명 | 옵션 |
+|---|---|---|
+| width / height | 요소의 크기 설정 | auto |
+| max-width / max-height | 요소의 최대 크기 지정 | none, inherit |
+| min-width / min-height | 요소의 최소 크기 지정 | none, inherit |
+| opacity | 이미지 투명도 조절 |
+| object-fit | 이미지/비디오가 박스에 맞게 조절되는 방식 | fill, contain, cover, none, scale-down |
+| object-position | 이미지/비디오의 위치 조정 | left top, center center, right bottom, % |
+| filter | 이미지 필터 효과 적용 | blur(), brightness(), grayscale(), contrast() | 
+| aspect-ratio | 가로 세로 비율 유지 | 16 / 9, 4 / 3, 1 / 1 | 
 
+## object-fit
+컨테이너 안에서 이미지가 어떻게 맞춰질지 결정
+* fill (기본값): 이미지가 컨테이너에 완전히 채워짐 (비율 무시)
+* contain: 이미지가 컨테이너 안에 비율 유지하며 맞춤
+* cover: 컨테이너를 완전히 덮되, 비율 유지
+* none: 이미지 크기 그대로 유지 (잘릴 수도 있음)
+* scale-down: none 또는 contain 중 더 작은 크기로 적용
+```css
+img {
+  width: 300px;
+  height: 200px;
+  object-fit: cover;
+}
+```
+## object-position
+이미지가 컨테이너 안에서 어떻게 배치될지 설정
+```css
+img {
+  width: 300px;
+  height: 200px;
+  object-fit: cover;
+  object-position: top;
+}
+```
+## filter
+이미지 필터 효과 적용
+```css
+img {
+  filter: grayscale(100%) blur(2px);
+} /* 이미지를 흑백 + 약간 흐릿하게 변경! */
+```
 
+## aspect-ratio 
+비율 유지
+```css
+img {
+  aspect-ratio: 16 / 9;
+} /* 이미지가 16:9 비율을 유지하면서 크기가 조정됨! */
+```