[Bootstrap4] 07. 부트스트랩4 이미지

Posted by 낭만사업가 정대표 블로그 on 2022-03-02 08:19:49

화면 캡처 2022-03-02 081356.jpg

둥근모서리형 (Rounded Corners)

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

Example

<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
Try it Yourself »

원형 (Circle)

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

Example

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

썸네일형 (Thumbnail)

.img-thumbnail 클래스는 이미지를 썸네일형태(테두리 있음)로 만듭니다.

Example

<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
Try it Yourself »

이미지 정렬 (Aligning Images)

.float-right 클래스를 사용하여 이미지를 오른쪽으로 정렬하거나 .float-left를 사용하여 왼쪽으로 이미지를 정렬합니다.

화면 캡처 2022-03-02 082055.jpg

 

Example

<img src="paris.jpg" class="float-left">
<img src="paris.jpg" class="float-right">
Try it Yourself »

이미지 중앙정렬 (Centered Image)

.mx-auto(margin:auto)와 .d-block(display:block) 클래스를 추가하여 이미지를 중앙에 배치합니다.

화면 캡처 2022-03-02 082124.jpg

Example

<img src="paris.jpg" class="mx-auto d-block">
Try it Yourself »

반응형 이미지 (Responsive Images)

모든 크기의 이미지에 대해서 반응형 이미지는 화면 크기에 맞게 자동으로 조정됩니다.

<img>태그에 .img-fluid 클래스를 추가하여 반응형 이미지를 만듭니다. 그러면 이미지가 상위 요소에 맞게 조정됩니다.

.img-fluid 클래스는 max-width: 100%를 적용합니다. 그리고 height: auto 높이는 자동으로 적용됩니다.

Example

<img class="img-fluid" src="img_chania.jpg" alt="Chania">
Try it Yourself »

Total 106
번호 제목 글쓴이 조회 날짜
106 68 06-20
105 104 06-21
104 38 06-20
103 119 02-25
102 540 02-27
101 13 06-23
100 122 02-25
99 113 02-27
98 11 06-24
97 75 02-25
96 117 02-27
95 22 06-27
94 57 04-11
93 93 02-28
92 64 04-12
RSS

오픈런하우스

1인가구를 위한 원룸형 아파트 쉐어하우스, 1인기업(프리랜서)을 위한 홈오피스형 공유주택

GO!