구글 블로그에서 이미지 사진을 옆으로 나란히 정렬하기가 쉽지 않습니다.
반응형으로 이미지 사진을 가로로 나열하고 모바일 접속자도 이미지 사진을 잘 볼
수 있게하려면 어떻게 해야할까요? HTML 및 CSS를 잘 몰라도 이해할 수 있게 천천히
알아보겠습니다.
이 포스팅에서 살펴볼 내용은 다음과 같습니다.
이 3가지 방법을 수행하기 전에 먼저 블로거 에디터 모드를 'HTML 보기'로 변경한 다음 게시물 수정 작업을 하도록 합니다. 그 다음 이 글에서 제공하는 HTML 코드에 이미지의 주소를 복사 붙여 넣기만하면 나란히 배치되는 이미지 사진을 볼 수 있을 것입니다.
URL 주소 확인 방법이미지 사진의 URL 주소를 어떻게 확인하나요?
- 블로거에 이미지 사진을 업로드 합니다.
- 에디터 작성 모드를 HTML 보기로 변경합니다.
- URL 주소를 확인합니다.
- 동일한 URL 주소 2개 중 아무 것이나 사용 가능합니다.
<div class="separator" style="clear: both;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju9xsycAS5WbAotnSNFcjQv2nMFnMBdnRXrdDiG79EioVPboNy8gvIaVmtH_XHdCJr9MwAm1mKxp2g0-bdOVGRQI_J07jYobPoj8pA69_0vkGH3K48LmoE7J3bb3jYE5tGs7gJKLoJ1Bs/s0/grid-image-small.png" style="display: block; padding: 1em 0; text-align: center; ">
<img alt=""
border="0"
data-original-height="360"
data-original-width="640"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju9xsycAS5WbAotnSNFcjQv2nMFnMBdnRXrdDiG79EioVPboNy8gvIaVmtH_XHdCJr9MwAm1mKxp2g0-bdOVGRQI_J07jYobPoj8pA69_0vkGH3K48LmoE7J3bb3jYE5tGs7gJKLoJ1Bs/s0/grid-image-small.png"/>
</a>
</div>
앞으로 이 글에서는 쉬운 설명을 위해서 img 태그 내의 일부
속성들은 생략하도록 하겠습니다.
border, data-original-height, data-original-width.
📗 표 레이아웃 이미지
첫 번째 방법은 표를 이용해 이미지 사진을 정렬하는 방법입니다. 표의 셀 안에 이미지 사진을 배치하고 행 개수를 늘려 가로로 나열합니다. 예를 들어 아래의 코드는 2개의 행을 만들고, 2개의 이미지를 옆으로 나란히 배치합니다.
<table>
<tr>
<td><img alt="" src="" /></td><td><img alt="" src="" /></td>
<tr>
</table>
|
|
|
3개의 행을 만들면 이미지를 가로로 나란히 3개를 배치할 수 있습니다.
<table>
<tr>
<td><img alt="" src="" /></td><td><img alt="" src="" /></td><td><img alt="" src="" /></td>
<tr>
</table>
|
|
|
|
표를 활용한 이미지 배치는 수정이 쉽고, 구조적으로 보입니다. 그러나 표를 활용한 이미지 배치의 단점은 행과 열이 고정된다는 것입니다. 더 작은 화면 크기에서 이미지 사진을 설정한 개수만큼 표시할 수 있지만, 이미지 사진의 크기도 함께 작아지기 때문에 그 안의 세부 내용을 보기 힘든 경우가 발생합니다. 이 문제는 CSS로 해결할 수 있습니다.
📘 그리드 레이아웃 이미지
두 번째 방법은 CSS 플렉스박스를 적용한 반응형 이미지를 활용한 방법입니다. 표를 활용한 방법과는 달리 고정적이지 않고 유동적으로 이미지 사진을 배치할 수 있습니다.
예를 들어 다음은 화면 크기에 따라서 이미지 사진을 표시합니다. 데스크톱(PC) 화면 크기에서는 3개의 이미지 사진을 배치하고, 화면 크기가 작은 모바일 장치에서는 이미지 사진을 2개의 행으로 표시하고 나머지 1개의 이미지 사진은 밑으로 내립니다.
마찬가지로 아래 코드에서 src 속성 따옴표 안쪽에 이미지 사진의 URL 주소를 붙여 넣기만 하면 됩니다.
<!-- HTML -->
<div class="grid-image">
<img alt="" src="" />
<img alt="" src="" />
<img alt="" src="" />
</div>
<style>
/* CSS */
.grid-image {
display:flex;
flex-wrap:wrap;
align-items:flex-start;
margin:30px 0;
}
.grid-image img {
width:calc(33.333% - 10px);
margin:0 15px 15px 0;
}
.grid-image img:nth-of-type(3n),
.grid-image img:last-child {
margin-right:0;
}
@media screen and (max-width:640px){
.grid-image img {
width:calc(50% - 15px);
}
}
@media screen and (max-width:480px){
.grid-image img:nth-of-type(2n) {
margin-right:0;
}
.grid-image img:nth-of-type(3n) {
margin-right:15px;
}
}
</style>
HTML과 CSS 사용에 능숙한 전문가라면 코드를 수정하여 이미지 사진 사이의 간격 띄우기 및 여백을 조정할 수 있습니다. 또는 여러 개의 이미지를 더 넣기도 가능합니다.
이미지를 옆으로 나란히 정렬하는 것은 위의 두 가지 방법만으로도 충분합니다. 블로거 초보 사용자도 스스로 할 수 있습니다. 다음으로 옆으로 스크롤 및 스와이프 하여 이미지 사진을 넘겨볼 수 있는 방법에 대해 소개합니다.
📙 스크롤 레이아웃 이미지
더 작은 화면에서는 사용 가능한 공간 많지 않기 때문에 이미지 및 텍스트의 배치에 신경을 써야 합니다. 따라서 스크롤 가능한 이미지 배치 방법은 더 작은 화면 크기에서 공간을 최대한 활용할 수 있는 방법 중 하나입니다.
데스크톱 (PC) 화면 크기에서는 3개의 이미지 사진을 표시하고, 모바일 화면 크기에서는 터치 스크린을 누른 다음 옆으로 넘겨서 이미지를 볼 수 있습니다. 예를 들어 다음과 같습니다.
같은 방식으로 이미지 사진의 URL 주소를 아래 코드의 src 속성 따옴표 안에 넣어줍니다.
<!-- HTML -->
<div class="scroll-image">
<img alt="" src="" />
<img alt="" src="" />
<img alt="" src="" />
</div>
<style>
/* CSS */
.scroll-image {
display:flex;
flex-wrap:wrap;
align-items:flex-start;
margin:30px 0;
}
.scroll-image img {
width:calc(33.333% - 10px);
margin:0 15px 15px 0;
}
.scroll-image img:nth-of-type(3n),
.scroll-image img:last-child {
margin-right:0;
}
@media screen and (max-width:480px){
.scroll-image {
flex-wrap:nowrap;
justify-content:flex-start;
position:relative;
width:114%;
left:-7%;
padding:0 7%;
overflow-y:hidden;
overflow-x:auto;
-ms-overflow-style:none;
-webkit-overflow-scrolling:touch;
}
.scroll-image img {
display:block;
flex:0 0 auto;
width:80%;
margin:0 15px 0 0;
}
.scroll-image img:last-of-type{
margin-right:0;
}
.scroll-image:after {
content:'';
display:block;
flex:0 0 auto;
align-self:stretch;
width:7%;
}
}
</style>
이미지 사진의 URL 주소를 변경한 후 블로거 에디터의 우측 상단 미리보기 버튼을 눌러 변경된 사항을 확인할 수 있습니다. 블로거 기본 제공 테마 Contempo, Soho, Emporio에서는 잘 표시되는 것을 확인하였습니다. 그래도 혹시나 잘 적용이 되지 않거나 궁금한 사항이 있다면 댓글에 남겨주세요!