위젯 섬네일과 이미지 위 문자 중앙 정렬 방법

관련 글 위젯은 구독자가 보고 있는 게시글과 연관된 글을 링크로 접속할 수 있도록 주변화면 공간에 섬네일이나 목록 형태로 나타내 주는 유용한 존재다. 특히 특정 게시글의 내용이 방대할 경우, 내용을 여러 페이지로 분산 작성하고 링크로 연계하면 효과를 극대화할 수 있다. 여러 가지 형태의 이미지로 지리멸렬한 화면상에 깔끔하도록 섬네일을 구성하는 방법을 살펴본다.

예시로 사용한 이미지투데이(Image Today)의 훌륭한 가을 그림입니다.

위의 그림은 이미지 위에 html을 이용하여 문단을 작성한 예시이다. 이미지 위에 문자 배열을 이미지를 교체하지 않고 내용만 변경할 수가 있어 블로그의 공지 사항 게시 등에 매우 유용하다.

DEMO

가운데 정렬

관련 글 섬네일 간의 일정한 여백을 유치한 채 <div> 태그 중앙에서 정렬이 시작된다. 섬네일의 크기에 따라 좌우 여백이 달라진다. 코드 7번째 줄의 <justify-content> 요소의 속성을 <center> 로 설정하면 된다. 섬네일 수가 한 줄 이상이 되어도 일정하게 중앙 정렬이 된다.

<style>
.bsrp-gallery {
   list-style:none;
   padding:unset;
   display: flex; 
   margin: 0 auto;
   justify-content:center;
   flex-flow: wrap;
}
</style>

자동 간격 정렬

<div> 태그 좌우 끝을 기준으로 중앙 정렬이 시작된다. 섬네일 크기와 <div> 태그의 크기에 따라 여백이 자동으로 조절된다. 코드 7번째 줄의 <justify-content> 요소의 속성을 <space-around> 로 설정하면 된다. 섬네일 수가 한 줄 이상이 되면 정렬이 흩트려져 바람직하지 못하다.

<style>
.bsrp-gallery {
   list-style:none;
   padding:unset;
   display: flex; 
   margin: 0 auto;
   justify-content:space-around;
   flex-flow: wrap;
}
</style>

왼쪽 정렬

<div> 태그 왼쪽을 기준으로 정렬이 시작된다. 섬네일 크기와 <div> 태그의 크기에 따라 오른쪽 여백이 자동으로 조절된다. 코드 7번째 줄의 <justify-content> 요소의 속성을 <left> 로 설정하면 된다. 섬네일 수가 한 줄 이상이 되어도 일정하게 중앙 정렬이 된다.

<style>
.bsrp-gallery {
   list-style:none;
   padding:unset;
   display: flex; 
   margin: 0 auto;
   justify-content:left;
   flex-flow: wrap;
}
</style>

오른쪽 정렬

<div> 태그 오른쪽을 기준으로 정렬이 시작된다. 섬네일 크기와 <div> 태그의 크기에 따라 왼쪽 여백이 자동으로 조절된다. 코드 7번째 줄의 <justify-content> 요소의 속성을 <right> 로 설정하면 된다. 섬네일 수가 한 줄 이상이 되어도 일정하게 중앙 정렬이 된다.

<style>
.bsrp-gallery {
   list-style:none;
   padding:unset;
   display: flex; 
   margin: 0 auto;
   justify-content:right;
   flex-flow: wrap;
}
</style>

의 관련글