목차
Image Shape (이미지 모양)
Image Align (이미지 정렬)
Image Responsive (이미지 반응형)
Image Shape (이미지 모양)
<img src="..." class="rounded " alt="곡선 이미지" >
<img src="..." class="rounded-circle " alt="원형 이미지">
<img src="..." class="img-thumbnail " alt="액자 이미지" >
※ BS3: 곡선 (.img-rounded), 원형(.img-circle)
Image Align (이미지 정렬)
<img src="hz.jpg" class="float-left " alt="왼쪽정렬 (= 좌측정렬)">
<img src="hz.jpg" class="float-right " alt="오른쪽정렬 (= 우측정렬)">
<img src="hz.jpg" class="mx-auto d-block " alt="가운데정렬 (=중앙정렬)">
[참고]
.float-left { float: left!important; }
.float-right { float: right!important; }
.mx-auto (margin:auto)
.d-block (display:block)
Image Responsive (이미지 반응형)
<img src="..." class="img-fluid " alt="반응형 이미지">
[참고]
.img-fluid { max-width: 100%; height: auto; }
BS3: .img-responsive 클래스 사용.
주소 복사
랜덤 이동