티스토리 이미지 정렬 모바일에서 최적화 시키기

안녕하세요! 마스터환 입니다. 이번 포스팅은 가로가 긴 가로 이미지와 세로가 긴 세로 이미지를 동시에 배치할 때 모바일에서 최적화 시키는 방법 입니다. 물론 가로 이미지만 혹은 세로 이미지만 배치할 때는 최적화 작업이 필요 없습니다. 그러나 가로 이미지와 세로 이미지를 동시에 배치시킬때는 최적화 작업을 해줘야 모바일에서도 깔끔하게 보여집니다. 아래 스샷은 pc에서만 높이를 맞추고 최적화는 진행하지 않은 상태입니다.

좌측은 pc버전 우측은 모바일 버전 입니다. pc버전에서 보면 이미지 정렬이 완벽하게 된거 처럼 보이지만 모바일 버전에거 보면 가로 이미지와 세로 아미지의 높이가 다른 것을 볼볼수 있습니다. 물론 크게 차이가 나지 않기 때문에 그대로 둬도 상관 없습니다. 그러나 모바일에서도 완벽하게 보이고 싶으시면 아래 작업을 수행해 주시면 됩니다. 

 

일단 두 이미지 각각의 넓이를 확인 후 각 넓이의 합에서 각 이미지의 넓이의 비율을 구합니다. 비율이 아닌 PX로 넓이를 입력하면 넓이가 고정되어 PC화면에서는 완벽하게 보인다 할지라도 화면 넓이가 상대적으로 좁은 모바일 화면에서는 위 이미지처럼 높이가 일정하지 않습니다. 따라서 %비율을 구해야 합니다.

예를 들어 세로1의 넓이가 191 가로2의 넓이가 371 이면 세로 1의 넓이의 비율은 191/(191+371)*100 = 33% 이면 가로2의 넓이의 비율은 67%가 나옵니다. 여기서 중요한 키포인트는 이미지 각 넓이의 비율 합이 100이 되게 맞춰 줘야 합니다. 이미지 넓이의 비율 합이 100을 넘으면 이미지가 짤릴 수 있고 이미지 넓이의 합이 100이 안되면 너무 작게 보일 수 있습니다. 

각 넓이의 비율을 구한 후 html 창으로 들어가면 각 이미지가 테두리가 투명인 표 안에 들어가 있는것을 알수 있습니다. 즉 이미지 2개를 정렬하면 2X1 표 안에 각각 들어가 있고 이미지가 3개 이면 3x1 표 안에 각각 들어가 있습니다. 

예를 들어 세로 1, 가로 2를 배치한 경우 아래 소스를 볼수 있습니다.

<table cellspacing="5" cellpadding="0" border="0" align="center"><tbody><tr>
<td>[###_1N|cfile28.uf@99C931415B27B9030662D4.jpg|width="191" height="250" filename="heigh1.jpg" filemime="image/jpeg" style="width: 191px; height: 250px;"|_##]</td>
<td>[###_1N|cfile30.uf@99A3B2415B27B903179872.jpg|width="371" height="250" filename="width2.jpg" filemime="image/jpeg" style="width: 371px; height: 250px;"|_##]</td>
</tr></tbody></table>

 

세로1, 세로2, 가로2를 배치한 경우 아래 소스를 볼수 있습니다.

<table cellspacing="5" cellpadding="0" border="0" align="center"><tbody><tr>
<td>[###_1N|cfile27.uf@994BA5415B27B9021C17B5.jpg|width="149" height="200" filename="heigh2.jpg" filemime="image/jpeg" style="width: 149px; height: 200px;" original="yes"|_##]</td>
<td>[###_1N|cfile3.uf@993E06415B27B9031D4F6E.jpg|width="376" height="200" filename="width1.jpg" filemime="image/jpeg" style="width: 376px; height: 200px;"|_##]</td>
<td>[###_1N|cfile28.uf@99C931415B27B9030662D4.jpg|width="153" height="200" filename="heigh1.jpg" filemime="image/jpeg" style="width: 153px; height: 200px;"|_##]</td>
</tr></tbody></table>

여기서 <td> 태그를 <td width="넓이의 비율%">로 입력하면 됩니다. 이미지가 3개인 경우도 똑같이 각각의 이미지 넓이의 합을 구해 각 이미지 넓이의 비율을 구해 html창에서 수정 하시면 됩니다. 이때도 각 이미지 넓이의 비율합은 100이 되어야 합니다. 아래는 모바일에서 최적화 시킨 html소스와 최적화 시킨 모바일에서 나타나는 화면 입니다. 

<최적화 시킨 html 소스>

 

<최적화 시킨 후 모바일 화면>

위 과정을 아래 동영상으로 보실수도 있습니다. 

 지금까지 이미지 정렬 최적화 시키는 방법이었습니다. 읽어 주셔서 감사합니다.