bootstrap에서 이미지 설정
부트스트립을 이용해서 이미지에 여러 효과를 적용할 수 있다.
이미지도 그리드 시스템과 혼합해서 사용한다.
기본이미지(default) 예시
-그리드는 col-sm-6을 적용한 이미지 설정(default)
<h3>이미지 설정하기</h3>
<div class="col-sm-6">
<h5>기본이미지(default)</h5>
<img src="./img/photo1.jpg" width="250" height="250">
</div> 이미지 종류 예시)
1.img-rounded->둥근테두리
2.img-circle->원형이미지(ex 졸업앨범 사진)
3.img-thumnail->썸네일(그림 위에 테두리 쳐진형태)
4.img-responsive(반응형)->브라우저의 크기를 줄이면 기본이미지를 제외한 크기가 줄어듬
img-rounded
둥근테두리
테두리가 둥근 이미지를 적용하고싶다면?
-그리드는 col-sm-6을 적용한 이미지 설정
-img-responsive(반응형)을 추가로 적용
<div class="col-sm-6">
<h5>둥근테두리</h5>
<img src="./img/photo1.jpg" width="500" height="500" class="img-rounded img-responsive">
</div>
img-circle
원형이미지 (ex 졸업앨범 사진)
졸업앨범 사진같이 원형이미지를 적용하고싶다면?
-그리드는 col-sm-6을 적용한 이미지 설정
-img-responsive(반응형)을 추가로 적용
<div class="col-sm-6">
<h5>원형이미지</h5>
<img src="./img/photo1.jpg" class="img-circle img-responsive" width="500" height="500">
</div>
img-thumnail
그림 위에 테두리 쳐진형태
그림 위에 테두리 쳐진형태의 썸네일이미지를 적용하고싶다면?
-그리드는 col-sm-6을 적용한 이미지 설정
-img-responsive(반응형)을 추가로 적용
<div class="col-sm-6">
<h5>썸네일</h5>
<img src="./img/photo1.jpg" class="img-thumbnail img-responsive" width="500" height="500">
</div>
2022-08-09
