백.전.백.승.

배경에 나오는 유튜브는 [파묘] 입니다. 그리고 이전은 [윙카] 이었습니다. 참고로 유튜브 배경 멈춤, 소리, 재생 등은 오른쪽 상단 플레이바를 사용하면 됩니다.

Made with Bootstrap 3 And Powered by Tistory

이 글에서 부트스트랩 5 이미지를 어떻게 나타내는지 적고자 한다.

 

 

들어가기 전에 

 

나는 이 블로그를 부트스트랩3로 만들었는데 부트스트랩 이미지 정의를 굉장히 많이 사용했다. 이 글에 버전 3에 대한 언급이 많아서 3에 대한 내용이 아니라는 점을 알았으면 한다. 3은 버전 5를 보충 설명하기 위한 수단일 뿐이다. 

 

반응형 이미지 만들기

 

기기에서 최적화 되는 반응형 이미지를 만들기 위해서 클래스에 img-fluid를 추가한다. 이것은 이미지에 max-width: 100%과 height: auto를 준 것과 같다. 만약 브라우저나 기기를 줄이거나 늘리면 최적화된 이미지를 보여준다.

 

반응형 이미지

<img src="..." class="img-fluid" alt="...">

 

이미지 썸네일 만들기 

 

이미지 썸네일을 만는는 것은 이미지를 작게 만드는 것으로 클래스에 img-thumbnail을 추가해주면 된다. 그러면 아래 그림처럼 썸네일에 테두리가 생긴다. 썸네일 만드는 방법은 버전 3과 같아 이 블로그 사이드 바에서 사용했다. 그래서 이 블로그 사이드 바의 조회수 많은 글, 최근에 달린 댓글에서 볼 수 있는 썸네일이다.

 

썸네일

<img src="..." class="img-thumbnail" alt="...">

 

아래 그림을 보면 사각형 썸네일 주변에 테두리가 있다.

 

 

 

이미지 정렬

 

이미지 정렬은 도우미 플로트 클래스 또는 텍스트 정렬 클래스와 정렬한다. 도우이 플로트 클래스와 텍스트 정렬 클래스는 유틸리티에서 공부한다. 기본적인 왼쪽, 중앙, 오른쪽 정렬에 대해서 알아보면 왼쪽 정렬은 클래스에 float-start라고 하고 오른쪽 정렬은 클래스에 float-end라고 한다. CSS를 익힌 사람은 float라는 단어는 낯설지 않을 것이다.

 

왼쪽과 오른쪽 정렬

아래 소스에서 사격형 모서리 부분을 뽀족하게 하는 것이 아닌 둥글게 하는 것은 클래스에 rounded를 추가한다. 버전 3에서는 img-rounded였다. 버전 3을 익혔으니 쉬웠지 몰랐으면... 

 

<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">

아래는 썸네일에 HTML을 적용한 것으로 버전 3에서 왼쪽 정렬은 pull-left였고 오른쪽 정렬은 pull-right였다.

 

 

 

중앙인 경우는 block-level 이미지 사용을 중심으로 할 수 마진 유틸리티 클래스인 mx-auto를 사용하면 된다. mx-auto 고정 너비 블록 수준 콘텐츠로 콘텐츠를 수평으로 중앙에 배치하기 위한 클래스다. 그리고 알고 있듯이 텍스트를 가운데로 배치하는 text-center로도 정렬할 수 있다.

 

가운데 정렬

<img src="..." class="rounded mx-auto d-block" alt="...">
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

 

원형 썸네일

 

버전 3에서 원으로 만드는 것은 img-circle이었는데 5에서는 rounded-circle로 변경된 것을 확인했다. 버전 4와 5에서 border 유틸리티를 통해 경계를 제어한다는 것을 알았다. 참고로 이 블로그 사이드 바의 최근에 올라온 글을 img-circle을 사용했다. 

버전 3에는 mx-auto는 없지만 text-center로 이미지를 중앙에 정렬할 수 있다.

 

 

알약 형태

 

버전 3에는 없던 5에 아래 그림처럼 알약 형태로 이미지를 만들 수 있다는 것을 Border 유틸리티를 보다 알았다. 사용은 클래스에 rounded-pill를 써주면 된다.

 

알약 형태


혹시나 해서 적는데 이 글 소스에서 alt는 이미지가 안 나올 때 대체하는 글자를 넣는 것이다. alt는 부트스트랩과 상관없지만 코딩할 때 써 주어야 좋다.

'IT.인터넷.생활 관련/부트스트랩' 관련된 글 MORE



Close 방명록
×

카테고리




×
×