[Bootstrap] Images

1. 이미지 모양 변경

1.1 모서리 둥글게(`.rounded`)

• 이미지 모서리를 둥글게

<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">

 

1.2 원형 이미지 (`.rounded-circle`)

• 이미지를 원 모양으로

<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">

 

1.3 썸네일 이미지 (`.img-thumbnail`)

• 테두리가 있는 썸네일 스타일로 변경

<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">

---

2. 이미지 정렬

2.1 왼쪽 정렬 (`.float-start`)

<img src="paris.jpg" class="float-start">

 

2.2 오른쪽 정렬 (`.float-end`)

<img src="paris.jpg" class="float-end">

 

2.3 가운데 정렬

• `margin: auto`와 `display: block`을 이용해 가운데 정렬

<img src="paris.jpg" class="mx-auto d-block">

---

3. 반응형 이미지

✅ 반응형 이미지 (`.img-fluid`)

• 부모 요소의 크기에 맞게 이미지 크기가 자동 조정
• `max-width: 100%; height: auto;`가 적용

 <img src="cinqueterre.jpg" class="image-fluid" alt="Cinque Terre">