로그인  회원가입  
인포앤북 홈

2-4. 이미지

■ 둥근 모서리

.rounded 클래스는 이미지에 둥근 모서리를 추가합니다.

둥근 모서리 이미지
ex2-8.html
<div class="container mt-3">
    <h3>둥근 모서리 이미지</h3>       
    <img src="img/image1.jpg" class="rounded" width="300"> 
</div>
ex2-8.html의 실행 결과
■ 원형 이미지

.rounded-circle 클래스는 이미지를 원형으로 만듭니다.

원형 이미지
ex2-9.html
<div class="container mt-3">
    <h3>원형 이미지</h3>       
    <img src="img/image1.jpg" class="rounded-circle" width="300"> 
</div>
ex2-9.html의 실행 결과
■ 썸네일 이미지

.img-thumbnail 클래스는 이미지를 원형으로 만듭니다.

썸네일 이미지
ex2-10.html
<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는 이미지를 오른쪽으로 플로팅합니다.

이미지 정렬
ex2-11.html
<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의 실행 결과