목차
Image Shape (이미지 모양) Image Align (이미지 정렬) Image Responsive (이미지 반응형)
※ B4와 유사하나, 이미지정렬 클래스가 달라짐.
Image Shape (이미지 모양)
<img src="..." class="rounded " alt="곡선 이미지" >
<img src="..." class="rounded-circle " alt="원형 이미지">
<img src="..." class="img-thumbnail " alt="액자 이미지" >
PS. 둥글기 관련 클래스
.rounded {
border-radius: 0.25rem !important;
}
.rounded-0 {
border-radius: 0 !important;
}
.rounded-1 {
border-radius: 0.2rem !important;
}
.rounded-2 {
border-radius: 0.25rem !important;
}
.rounded-3 {
border-radius: 0.3rem !important;
}
.rounded-circle {
border-radius: 50% !important;
}
.rounded-pill {
border-radius: 50rem !important;
}
.rounded-top {
border-top-left-radius: 0.25rem !important;
border-top-right-radius: 0.25rem !important;
}
.rounded-end {
border-top-right-radius: 0.25rem !important;
border-bottom-right-radius: 0.25rem !important;
}
.rounded-bottom {
border-bottom-right-radius: 0.25rem !important;
border-bottom-left-radius: 0.25rem !important;
}
.rounded-start {
border-bottom-left-radius: 0.25rem !important;
border-top-left-radius: 0.25rem !important;
}
cf. BS3: 곡선 (.img-rounded), 원형(.img-circle)
Image Align (이미지 정렬)
<img src="hz.jpg" class="float-start " alt="왼쪽정렬 (= 좌측정렬)">
<img src="hz.jpg" class="float-end " alt="오른쪽정렬 (= 우측정렬)">
<img src="hz.jpg" class="mx-auto d-block " alt="가운데정렬 (=중앙정렬)">
[참고]
.float-start { float : left !important; }
.float-end { float: right !important; }
.float-none { float: none !important; }
.mx-auto (margin:auto)
.d-block (display:block)
cf. BS4 경우, (.float-left / .float-right) 클래스 사용.
Image Responsive (이미지 반응형)
<img src="이미지주소" class="img-fluid " alt="반응형 이미지">
[참고]
.img-fluid { max-width: 100%; height: auto; }
cf. BS3: .img-responsive 클래스 사용.
