2-4. 이미지
■ 둥근 모서리
.rounded 클래스는 이미지에 둥근 모서리를 추가합니다.
<div class="container mt-3">
<h3>둥근 모서리 이미지</h3>
<img src="img/image1.jpg" class="rounded" width="300">
</div>
ex2-8.html의 실행 결과
■ 원형 이미지
.rounded-circle 클래스는 이미지를 원형으로 만듭니다.
<div class="container mt-3">
<h3>원형 이미지</h3>
<img src="img/image1.jpg" class="rounded-circle" width="300">
</div>
ex2-9.html의 실행 결과
■ 썸네일 이미지
.img-thumbnail 클래스는 이미지를 원형으로 만듭니다.
<div class="container mt-3">
<h3>썸네일 이미지</h3>
<img src="img/image1.jpg" class="img-thumbnail" width="300">
</div>
ex2-10.html의 실행 결과
■ 이미지 정렬
클래스 .float-start는 사용하여 이미지를 왼쪽으로 플로팅하고, , 클래스 .float-end는 이미지를 오른쪽으로 플로팅합니다.
<div class="container mt-3">
<h3>이미지 정렬</h3>
<img src="img/image1.jpg" class="float-start" width="300">
<img src="img/image2.jpg" class="float-end" width="300">
</div>
ex2-11.html의 실행 결과