<span style="font-family:'한컴바탕';"></span> <div></div> <div style="text-align:center;"><span><font face="바탕"></font></span> </div> <div style="text-align:center;"><span></span> </div> <div align="center"><font size="2"></font> </div> <div style="text-align:center;"><span><font face="바탕" size="2">가끔씩 오유 눈팅하다가 글에 배경이 있으면 신기하더라고요</font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2">신기한 김에 함 만들어 봤습니다</font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2">그 와중에 알게된 팁들 몇개를 공유합니다</font></span></div> <div style="text-align:center;"><font face="바탕"><font size="2"><span>결론적으로 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">"</span><span>오유 배경 깔끔하게 넣는 방법</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">"</span><span>이 되겠네요</span></font></font></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font face="바탕"><font size="2">   </font></font></span> <div></div></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font face="바탕"><font size="2">    </font></font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font face="바탕"><font size="2"></font></font></span> </div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font face="바탕"><font size="2"></font></font></span> </div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font face="바탕"><font size="2"> </font></font></span> <div></div></div> <div style="text-align:center;"><font size="6"><font face="바탕"><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">1. </span><span>오유 배경넣기</span></font></font></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font face="바탕"><font size="2">    </font></font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font face="바탕"><font size="2"></font></font></span> </div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font face="바탕"><font size="2"></font></font></span> <div></div> </div> <div style="text-align:center;"><span><font face="바탕" size="2">그럼 일단 오유 배경넣는 방법부터 알아보겠습니다</font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2">오유에 로그인한 다음 오른쪽 맨 윗부분을 보면 <strong><font>정보변경</font></strong> 란이 있어요</font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font face="바탕"><font size="2">   </font> </font></span> <div></div></div> <div style="text-align:center;"><span lang="en-us" style="font-family:'함초롬바탕';"> <img width="181" height="128" alt="제목 없음.jpg" src="http://thimg.todayhumor.co.kr/upfile/201607/1468314459536708ce7de34c5485c46268ddd1f1e8__mn346252__w181__h128__f11863__Ym201607.jpg" filesize="11863"></span></div> <div style="text-align:center;"><span lang="en-us" style="font-family:'함초롬바탕';"></span> </div> <div style="text-align:center;"> </div> <div style="text-align:center;"><span><font face="바탕" size="2">클릭해서 들어가면 개인정보를 바꿀 수가 있는데 그중에 </font></span></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">“</span><span><strong><font>꾸미기</font></strong></span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">” </span><span>항목을 바꿔주면 됩니다</span></font></font></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span></span></font></font> </div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span></div> <div style="text-align:center;"><font face="바탕"><font size="2"> </font><font size="2"> <img width="773" height="332" alt="ddddd.jpg" src="http://thimg.todayhumor.co.kr/upfile/201607/1468314458f0529fce922140039d73f7f211374fe8__mn346252__w773__h332__f34879__Ym201607.jpg" filesize="34879"></font></font> <div></div></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span></span></font></font> </div> <div style="text-align:center;"><font size="2"><font face="바탕"><span></span></font></font> </div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>요 칸인데요</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">. </span><span>이 중 중요한 옵션을 화살표로 체크해 두었습니다</span></font></font></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span></span></font></font> </div> <div style="text-align:center;"><span><font face="바탕" size="2">글 배경 이미지는 게시글 양 옆의 공백부분을 채워줄 이미지를 선택하는 옵션입니다</font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2">핵심이라고 볼 수 있죠</font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2"></font></span> </div> <div style="text-align:center;"><span><font face="바탕" size="2">두 번째로 타일배경과 채우기 옵션이 있는데</font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2"><strong>타일배경은 게시글 스크롤을 내릴 때 자기가 고른 이미지가 쭉 반복되면서 같이 내려갑니다 </strong></font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2"><strong>반면 채우기를 고르게 되면 게시글 스크롤과 상관없이 배경이 움직이지 않고 고정됩니다</strong></font></span></div> <div style="text-align:center;letter-spacing:0pt;"><font size="2"><font face="바탕"><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">(</span><span>만약 세로로 긴 그림을 넣었다고 해도 채우기를 고르면 위쪽 일부만 고정되서 나오겠죠</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">)</span></font></font></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>저는 같이 움직이길 원해서 타일에 체크했고 위치는 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';"><strong><font>12</font></strong></span><span><strong><font>시 방향을 </font></strong>골라줍니다</span></font></font></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕"></font></font></span> </div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕"> </font></font></span> <div></div></div> <div style="text-align:center;"><span><font face="바탕" size="2">다음은 이미지를 어떻게 설정하는가인데</font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2">그냥 이미지 파일은 업로드가 안되는 모양이더군요</font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2">그래서 <strong><font>링크를 걸어야 합니다</font></strong></font></span></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>검색해보니 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">imgur</span><span>을 이용하는 경우가 대다수여서 저도 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">imgur</span><span>을 써보기로 했습니다</span></font></font></div> <div style="text-align:center;"> </div> <div style="text-align:center;"><a target="_blank" href="http://imgur.com/" target="_blank"><u><span lang="en-us" style="color:rgb(0,0,255);letter-spacing:0pt;font-family:'함초롬바탕';"><font face="바탕" size="2">http://imgur.com</font></span></u></a></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">imgur</span><span>는 이미지 사이트인데 </span></font></font></div> <div style="text-align:center;"><span><font face="바탕" size="2">위 링크로 가서 이메일 입력하고 회원가입 후 이미지를 업로드해 줍니다</font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>왼쪽 상단의 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">upload images</span><span>를 클릭한 다음</span></font></font></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>올리는 옵션에서 컴에서 올리기</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">, url</span><span>입력 또는 드래그 방식으로도 가능합니다</span></font></font></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>그담에 확인창인 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">start upload</span><span>를 누르면 업로드가 시작되는데</span></font></font></div> <div style="text-align:center;"><span><font face="바탕" size="2">업로드가 완료되면 왼쪽에 그림이 뜨고 오른쪽에 그림 정보가 뜹니다 </font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';">  </span> <div></div></div> <div style="text-align:center;">   </div> <div style="text-align:center;"> </div> <div style="text-align:center;"><font size="2"><font face="바탕"><font><strong><span>필요한건 다이렉트 링크인데 숨어있어서 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">more</span><span>를 눌러 정보를 확인합니다</span></strong></font></font></font></div> <div style="text-align:center;"> </div> <div style="text-align:center;"> </div> <div style="text-align:center;"><img width="233" height="390" alt="less.jpg" src="http://thimg.todayhumor.co.kr/upfile/201607/146831445746680c77306646bab3e396ec16eb924a__mn346252__w233__h390__f15580__Ym201607.jpg" filesize="15580"></div> <div style="text-align:center;"> </div> <div style="text-align:center;"> </div> <div style="text-align:center;"> </div> <div style="text-align:center;"> </div> <div style="text-align:center;"><img width="234" height="634" alt="more.jpg" src="http://thimg.todayhumor.co.kr/upfile/201607/14683144572297f02c827d4be2bcd291cf454ca332__mn346252__w234__h634__f26603__Ym201607.jpg" filesize="26603"></div> <div style="text-align:center;"> </div> <div style="text-align:center;"> </div> <div style="text-align:center;"> </div> <div style="text-align:center;"><span><font face="바탕" size="2">정보창이 늘어났죠</font></span></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">direct link </span><span>항목을 눌러서 복사해준 다음 </span></font></font></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>오유 정보변경</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">-</span><span>꾸미기의 이미지 주소에 붙여넣어 줍니다</span></font></font></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>그런 다음 정보변경</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">-</span><span>확인창을 눌러 배경 이미지를 최종 입력해줍니다</span></font></font></div> <div style="text-align:center;"><span><font face="바탕" size="2">그러면 곧 성공적으로 바꾸었다는 메시지가 뜨면서 배경이 들어가게 되죠</font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>여기까지가 간략한 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">“</span><span>오유 배경 넣는 방법</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">”</span><span>이었습니다</span></font></font></div> <div style="text-align:center;"><span><font face="바탕" size="2">다음으로는 좀 더 깔끔하게 넣는 방법을 알아보겠습니다</font></span></div> <div style="text-align:center;"> </div> <div style="text-align:center;"> </div> <div style="text-align:center;"> </div> <div style="text-align:center;"> </div> <div style="text-align:center;"> </div> <div style="text-align:center;"><font face="바탕"><font size="2"> </font><font size="2"> </font></font> <div></div></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;"><font face="바탕"><font size="6"><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">2. </span><span>깔끔하게 넣기</span></font></font></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';">  </span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"> </span> <div></div></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';">  </span> <div></div></div> <div style="text-align:center;">    </div> <div style="text-align:center;"><img width="800" height="466" class="chimg_photo" alt="1tile problem f.jpg" src="http://thimg.todayhumor.co.kr/upfile/201607/14683150995977890d293947429abe859ac8fdeb8b__mn346252__w1547__h902__f296004__Ym201607.jpg" filesize="296004"></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';">  </span> <div></div></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';">  </span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"> </span> <div></div></div> <div style="text-align:center;"><span><font face="바탕" size="2">처음으로 시도해본 배경입니다 </font></span></div> <div style="text-align:center;"><font face="바탕"><font size="2"><span>음</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">.. fail </span><span>문구가 붙어있는 쪽이 마음에 안 드는 부분입니다</span></font></font></div> <div style="text-align:center;"><span><font face="바탕" size="2">왼쪽에는 화면이 깔끔하게 떨어지지 않고 끝나서 오른쪽 이미지의 일부가 조금 붙어버렸고</font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2">오른쪽에는 넣어준 이미지의 상당량이 게시글 영역과 겹쳐 잘려버리네요</font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2">그냥 쓸 수도 있었지만 기왕 열심히 찾은 그림들인데 깔끔하게 만들고 싶어서 </font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2">저는 이 두 문제를 해결해 보기로 합니다</font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font face="바탕"><font size="2">  </font></font></span> <div></div></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font face="바탕"><font size="2"></font></font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font face="바탕"><font size="2">   </font></font></span> <div></div></div> <div style="text-align:center;"><font face="바탕"><font size="5"><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">a. </span><span>타일 조각 없애기</span></font></font></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font face="바탕"><font size="2">  </font></font></span> <div></div></div> <div style="text-align:center;"><span><font face="바탕" size="2">이 문제는 간단했습니다</font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2">왜 깔끔하게 끝나지 않고 여백이 남아서 반대편 이미지가 붙어버릴까</font></span></div> <div style="text-align:center;letter-spacing:0pt;"><font face="바탕"><font size="2"><span>잠시 생각해보니</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">..</span></font></font></div> <div style="text-align:center;"><span><font face="바탕" size="2"><strong>그건 걍 업로드한 이미지의 해상도가 화면의 전체 해상도보다 작다는 이야기였죠</strong></font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2">그렇기 때문에 여백이 발생했고 반대편 끝의 이미지를 끌어와 붙인 거죠</font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font face="바탕"><font size="2">  </font></font></span> <div></div></div> <div style="text-align:center;"><span><font face="바탕" size="2">배경넣기 방법을 올려주신 분이 샘플로 파일을 하나 올려주셨는데 </font></span></div> <div style="text-align:center;letter-spacing:0pt;"><font face="바탕"><font size="2"><span>이 이미지의 가로폭 픽셀이 기본 화면창 가로폭 픽셀보다 작았던 것입니다</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">. </span></font></font></div> <div style="text-align:center;"><span><font face="바탕" size="2">저는 그 사이즈를 기준으로 만들어서 같은 오류가 있었던 것이고요</font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;"><font size="2"><font face="바탕"><strong><font><span>그래서 모니터의 기본 해상도인 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">1920</span><span>픽셀로 바꿔보았습니다 </span></font></strong></font></font></div> <div style="text-align:center;letter-spacing:0pt;"><font size="2"><font face="바탕"><strong><font><span>그랬더니 바로 해결되는군요</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">!!</span></font></strong></font></font></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕"> </font></font></span> <div></div></div> <div style="text-align:center;"><font face="바탕"><font size="5"><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">b. </span><span>최적화 가로폭 찾기 </span></font></font></div> <div style="text-align:center;"><span lang="en-us" style="font-family:'함초롬바탕';"><font face="바탕" size="2"></font></span> </div> <div style="text-align:center;"><span lang="en-us" style="font-family:'함초롬바탕';"></span> </div> <div style="text-align:center;"><span><font face="바탕" size="2">두 번째는 오른쪽의 오류 그러니까 업로드한 이미지의 일부가 잘려버리는걸 막기 위함입니다</font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕"> </font></font></span> <div></div></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>가로폭 해상도를 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">1920</span><span>픽셀로 바꾼 베이스에 </span></font></font></div> <div style="text-align:center;letter-spacing:0pt;"><font size="2"><font face="바탕"><span>이번엔 잘리지 않도록 대강 가로폭을 줄인 그림들을 넣어보았습니다</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">.</span></font></font></div> <div style="text-align:center;letter-spacing:0pt;"><font size="2"><font face="바탕"><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';"></span></font></font> </div> <div style="text-align:center;letter-spacing:0pt;"><font size="2"><font face="바탕"><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';"></span></font></font> </div> <div style="text-align:center;letter-spacing:0pt;"><font size="2"><font face="바탕"><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';"><img width="800" height="479" class="chimg_photo" alt="2 both 478px but difference3.jpg" src="http://thimg.todayhumor.co.kr/upfile/201607/1468314425cf104e509be24ba895ae553d7bf54282__mn346252__w1500__h899__f277278__Ym201607.jpg" filesize="277278"></span></font></font></div> <div style="text-align:center;letter-spacing:0pt;"><span><font face="바탕" size="2"></font></span> </div> <div style="text-align:center;letter-spacing:0pt;"><span><font face="바탕" size="2"></font></span> </div> <div style="text-align:center;letter-spacing:0pt;"><span><font face="바탕" size="2">역시나 이번엔 공백이 꽤 남는군요</font></span></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>헛</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">..! </span><span>그런데 중요한 포인트를 하나 발견했습니다</span></font></font></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';">  </span> <div></div></div> <div style="text-align:center;">    <span style="font-family:'함초롬바탕';"> </span> <div></div></div> <div style="text-align:center;"><span><font face="바탕" size="2">위 사진의 경우 오른쪽과 왼쪽 그림들의 가로폭은 같습니다</font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2">그러면 중앙의 게시글 테두리로부터 남는 여백도 당연히 같을거라 생각했지요</font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2">그런데 위 사진에서 보이는 것처럼 </font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2">중앙쪽 게시판 테두리로부터 남는 여백의 폭이 차이가 납니다 </font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕"></font></font></span> <div></div> </div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕"></font></font></span> <div></div> </div> <div style="text-align:center;letter-spacing:0pt;"><font size="2"><font face="바탕"><span>여기서 하나의 발견</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">!! </span></font></font></div> <div style="text-align:center;"><span><font face="바탕" size="2">오유 게시글은 좌우 균형이 아니었어요</font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2">위 사진에서 왼쪽에 공백이 더 많이 남는 것에서 알 수 있듯이</font></span></div> <div style="text-align:center;letter-spacing:0pt;"><font size="2"><font face="바탕"><strong><font><span>게시글을 기준으로 조금이지만 왼쪽 여백이 더 컸던 것입니다</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">!!</span></font></strong></font></font></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;"><span><font face="바탕" size="2">그렇다면 저는 이번엔 대강의 눈대중이 아니라</font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2">걍 첨부터 오른쪽 왼쪽 여백의 가로픽셀을 측정해서 </font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2">그 사이즈에 맞춘 그림들을 넣어보기로 합니다</font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕"></font></font></span> <div></div> </div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕"></font></font></span> <div></div> </div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';">  <img width="553" height="389" alt="3 right pixel check.jpg" src="http://thimg.todayhumor.co.kr/upfile/201607/14683144562703c9253b6c44ff83f9473236abb716__mn346252__w553__h389__f64984__Ym201607.jpg" filesize="64984"></span> <div></div></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';">  </span> <div></div></div> <div style="text-align:center;">    <span style="font-family:'함초롬바탕';">  </span> <div></div></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>중앙 게시글 경계선으로부터의 왼쪽 여백의 가로폭이 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">560</span><span>픽셀인 것을 확인했습니다</span></font></font></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>반대편 오른쪽도 확인해보니 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">535</span><span>픽셀이 나오는군요</span></font></font></div> <div style="text-align:center;"><span><font face="바탕" size="2">양쪽의 그림을 이 가로 폭들에 맞추어 올리면 </font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2">게시글 경계선부터는 여백없이 그림으로 채워지겠구나 하고 바로 만들어 보았습니다</font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;">    </div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';">  </span><span style="font-family:'함초롬바탕';"> </span> <div></div></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';">  <img width="800" height="474" class="chimg_photo" alt="4 560 535 2parts loss 3.jpg" src="http://thimg.todayhumor.co.kr/upfile/201607/1468314455033f3967e5d04e3cb1fab038fcdac384__mn346252__w1500__h889__f310327__Ym201607.jpg" filesize="310327"></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"></span> </div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"> </span> <div></div></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>크으</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">.. </span><span>이번에도 양쪽모두 사진 짤림이 발생했군요</span></font></font></div> <div style="text-align:center;"><span><font face="바탕" size="2">좌우비대칭 사실을 알아냈지만 실패한 이유는</font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2">경계선과 그림여백 사이의 공간 때문이었습니다</font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;letter-spacing:0pt;"><font size="2"><font face="바탕"><strong><font><span>거의 안보이는 실선 수준이지만 중앙 게시글을 들러싼 경계선과 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">(</span><span>하늘색 선</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">)</span></font></strong></font></font></div> <div style="text-align:center;"><span><font face="바탕" size="2"><strong>배경넣기로 그림을 넣을수 있는 양쪽 여백의 사이에는</strong></font></span></div> <div style="text-align:center;letter-spacing:0pt;"><font size="2"><font face="바탕"><strong><font><span>기본적으로 그림이 못들어가는 조금의 폭이 존재했던 것입니다 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">(</span><span>붉은 빗금</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">)</span></font></strong></font></font></div> <div style="text-align:center;letter-spacing:0pt;"><font size="2"><font face="바탕"><span>게시글을 둘러싸고 흰여백 없이 그림을 넣는 것은 처음부터 불가능한 것이었군요</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">!</span></font></font></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕"></font></font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕"></font></font></span> </div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">   </font></font></span> <div></div></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>그렇다면 붉은색 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">X</span><span>빗금을 쳐놓은 저 공간만큼만 빼면 </span></font></font></div> <div style="text-align:center;"><span><font face="바탕" size="2">양쪽에 그림이 들어갈 수 있는 최대 사이즈가 나올 것입니다</font></span></div> <div style="text-align:center;letter-spacing:0pt;"><font size="2"><font face="바탕"><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">X</span><span>빗금의 가로픽셀사이즈를 재어보니 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">15px</span></font></font></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>그러면 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">560px, 535px</span><span>에서 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">15</span><span>만큼을 뺀 </span><font><strong><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';"><font size="6">545px, 520px</font></span><span>가 최대 최적 사이즈겠죠</span></strong></font></font></font></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;"><span><font face="바탕" size="2">바로 만들어 보도록 하겠습니다</font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';">   </span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';">  </span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"> </span> <div></div></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';">  <img width="800" height="475" class="chimg_photo" alt="5success 545 520 3.jpg" src="http://thimg.todayhumor.co.kr/upfile/201607/14683144221ed9c66a07424e0b94a31daa20fb68f9__mn346252__w1500__h891__f299279__Ym201607.jpg" filesize="299279"></span> <div></div></div> <div style="text-align:center;"><span><font face="바탕" size="2"></font></span> </div> <div style="text-align:center;"><span><font face="바탕" size="2"></font></span> </div> <div style="text-align:center;"><span><font face="바탕" size="2"></font></span> </div> <div style="text-align:center;"><span></span> </div> <div style="text-align:center;"><span></span> </div> <div style="text-align:center;"><span><font face="바탕" size="2"></font></span> </div> <div style="text-align:center;"><span><font face="바탕" size="2">오오 드디어 균형을 맞췄습니다</font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';">  </span> <div></div></div> <div style="text-align:center;">  </div> <div style="text-align:center;"><img width="350" height="450" alt="i11283222858.png" src="http://thimg.todayhumor.co.kr/upfile/201607/1468315406227114fc86364846bd9e3784a58bc2b6__mn346252__w350__h450__f20710__Ym201607.png" filesize="20710"></div> <div style="text-align:center;"> </div> <div style="text-align:center;">  </div> <div style="text-align:center;"> </div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>중앙의 게시글과 경계선을 기준으로</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">(</span><span>하늘색 선</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">) </span></font></font></div> <div style="text-align:center;"><span><font face="바탕" size="2">똑같은 여백을 두고 배열된 양쪽 그림입니다</font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>사실 오른쪽과 왼쪽 그림의 가로폭 크기가 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">25px</span><span>크기만큼 다르기 때문에</span></font></font></div> <div style="text-align:center;"><span><font face="바탕" size="2">완전한 좌우 균형이라고 할 순 없지만</font></span></div> <div style="text-align:center;letter-spacing:0pt;"><font size="2"><font face="바탕"><span>눈으로 보기에는 크게 차이나지 않기 때문에 이렇게 배열하는게 좋다고 생각합니다</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">..</span></font></font></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;"><span><font face="바탕" size="2">정리하면 </font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2"><strong>오유 게시글 배경을 타일식으로 넣어줄 경우</strong></font></span></div> <div style="text-align:center;"><font size="2"><font face="바탕"><strong><font><span>가로폭 크기는 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">1920</span><span>픽셀</span></font></strong></font></font></div> <div style="text-align:center;"><font size="2"><font face="바탕"><strong><font><span>하지만 좌우여백 크기가 달라 왼쪽은 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">545</span><span>픽셀 오른쪽은 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">520</span><span>픽셀로 넣는다</span></font></strong></font></font></div> <div style="text-align:center;"><font size="2"><font face="바탕"><strong><font><span>게시글을 둘러싼 흰 여백을 늘리고 싶은 경우 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">545-x, 520-x</span><span>픽셀로 넣어준다</span></font></strong></font></font></div> <div style="text-align:center;"><span><font face="바탕" size="2">이렇게 되겠습니다</font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;"><font size="2"><font face="바탕"><font><strong><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">545 15 825 15 520 </span><span>라는 구조를 기억해 둠으로써 </span></strong></font></font></font></div> <div style="text-align:center;"><span><font face="바탕" size="2"><strong>여타 다른 모양으로 넣을 때도 유격을 없앨 수 있겠죠</strong></font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕"></font></font></span> </div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕"></font></font></span> </div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕"> </font></font></span> <div></div></div> <div style="text-align:center;"><span><font face="바탕" size="2">그리고 한가지 맹점이 또 있는데</font></span></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>정보변경</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">-</span><span>꾸미기를 통해 배경을 만들고 자기 글을 확인해 볼 때 </span></font></font></div> <div style="text-align:center;"><span><font face="바탕" size="2">보통 닉네임을 누르고 자기 페이지 들어가서 확인을 할 것입니다</font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>그런데 개인페이지의 좌우 밸런스는 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">3</span><span>자가 보통 글을 읽을 때와 또 다릅니다</span></font></font></div> <div style="text-align:center;"><span><font face="바탕" size="2"><strong>개인페이지에서는 개인페이지 박스가 왼쪽에 붙어있어서</strong></font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2"><strong>큰 왼쪽 여백이 더욱 커지고 오른쪽 여백이 줄어들어요</strong></font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;"><span><font face="바탕" size="2">하지만 보통 자기가 쓴 글이라도</font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2">자기가 보는 횟수보다는 다른 유저들이 보는 경우가 더 많을 것이기 때문에 </font></span></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>검색 등을 통해 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">3</span><span>자가 글을 보는 경우에 맞춘 그림 배열이 더 좋겠죠</span></font></font></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;"><span><font face="바탕" size="2">제가 하고 싶은 말은 </font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2">개인페이지에 뜨는 그림 배열을 보고 깔끔하게 맞춰서 배경을 넣을 경우</font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2">다른 유저가 개인페이지 외 루트를 통해 자기 글을 볼 때 유격과 비대칭이 발생합니다</font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2"><strong>그러니 첨부터 개인페이지가 아닌 보통 버전에 맞춰 배열하는 것이 좋아요</strong></font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕"></font></font></span> </div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕"></font></font></span> </div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕"> </font></font></span> <div></div></div> <div style="text-align:center;"><span><font face="바탕" size="2">다른 특이사항으로는</font></span></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>배경이랑 댓글배경 모두 유저와 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">1-1</span><span>대응이 되는 것들이라</span></font></font></div> <div style="text-align:center;"><span><font face="바탕" size="2">오늘 배경을 넣었다 하면 그전에 썼던 게시글 전부에도 적용됩니다</font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2">게시글 하나하나에 맞춰줄 순 없다는 이야기죠</font></span></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>그래서 저도 원래 컬러감 살려서 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">4</span><span>계절 버전 정도는 만들려고 했는데</span></font></font></div> <div style="text-align:center;"><span><font face="바탕" size="2">실험해보니 유저당 배경 하나라서 걍 대강 섞어서 하나로 만들었어요</font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>상당히 길었는데 어쨌든 최적화 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">px</span><span>수치를 찾았으니 </span></font></font></div> <div style="text-align:center;"><span><font face="바탕" size="2">다음 댓글 배경으로 넘어가 보겠습니다</font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;"><span lang="en-us" style="font-family:'함초롬바탕';"><font face="바탕" size="2"></font></span> </div> <div style="text-align:center;"><span lang="en-us" style="font-family:'함초롬바탕';"><font face="바탕" size="2"></font></span> </div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;"><font face="바탕"><font size="6"><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">3. </span><span>댓글배경 넣기</span></font></font></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;"><span><font face="바탕" size="2"></font></span> </div> <div style="text-align:center;"><span><font face="바탕" size="2"><strong>댓글 배경을 넣을 때 가장 중요한 점은 </strong></font></span></div> <div style="text-align:center;"><font size="2"><font face="바탕"><strong><font><span>댓글 배경의 세로폭이 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">100</span><span>픽셀 정도라는 점입니다</span></font></strong></font></font></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>보통 모니터로 봤을 때 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">3cm</span><span>정도입니다</span></font></font></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;"><span><font face="바탕" size="2">가로폭은 기니까 크게 상관이 없는데</font></span></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>대체로 이미지 세로폭은 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">100</span><span>픽셀을 가볍게 넘기죠</span></font></font></div> <div style="text-align:center;letter-spacing:0pt;"><font size="2"><font face="바탕"><span>그럼 세로폭이 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">100</span><span>픽셀을 넘는 이미지를 넣으면 어떻게 되는가</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">?</span><br></font></font></div> <div style="text-align:center;"><span><font face="바탕" size="2">당연히 잘리겠죠</font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2">문제는 잘린 다음에 댓글을 죽 입력하면서</font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2">많은 행으로 글을 쓰게 되면 잘렸던 아래 부분도 따라 나오는가 하면</font></span></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>그것도 아니라는 점입니다</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">. </span><span>입력할 때 잘려버려서 아예 끌어올 수가 없는 것이죠</span></font></font></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>그러니 처음부터 세로폭을 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">100</span><span>픽셀 또는 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">100</span><span>픽셀을 조금 웃돌게만 만들어야 합니다</span></font></font></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕"> </font></font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕"></font></font></span> </div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕"></font></font></span> <div></div> </div> <div style="text-align:center;"><span><font face="바탕" size="2">그럼 한 번 댓글배경을 만들어 보겠습니다</font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2">이왕 넣는거 움짤로 한번 넣어보겠습니다</font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">   </font></font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕"> </font></font></span> <div></div></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  <img width="500" height="281" alt="e0060200_5613629e4a547.gif" src="http://thimg.todayhumor.co.kr/upfile/201607/14683144519c8bc21775fb4191a4c77aa6c1e7ea98__mn346252__w500__h281__f4640208__Ym201607.gif" filesize="4640208"></font></font></span> <div></div></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕"> </font></font></span> <div></div></div> <div style="text-align:center;letter-spacing:0pt;"><font size="2"><font face="바탕"><span>뭔가 상큼하면서도 귀기울이는 느낌이 있어 댓글 배경으로 적절하군요</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">! </span></font></font></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕"></font></font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">   </font></font></span> <div></div></div> <div style="text-align:center;"><font size="2"><font face="바탕"><strong><font><span>제가 시도해보니 움짤의 경우는 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">direct link</span><span>를 참조하면 안되더군요</span></font></strong></font></font></div> <div style="text-align:center;"><span><font face="바탕" size="2"><strong>올바르지 않은 배경이라고 입력 자체가 안됩니다</strong></font></span></div> <div style="text-align:center;"><font size="2"><font face="바탕"><strong><font><span>이때 당황하지 말고 대신 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">original gif link</span><span>를 참조하면 잘 나옵니다</span></font></strong></font></font></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>문제는 움짤을 업로드하면 바로 나오는 파일정보에 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">original link</span><span>가 없다는 점인데요</span></font></font></div> <div style="text-align:center;"><span><font face="바탕" size="2"><strong>역시 당황하지 말고 메인창 오른쪽 상단의 자기 아이디를 클릭해서</strong></font></span></div> <div style="text-align:center;"><font size="2"><font face="바탕"><strong><font><span>바로 뜨는 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">“images”</span><span>를 누르면 그간 업로드한 그림들이 나오는데</span></font></strong></font></font></div> <div style="text-align:center;"><font size="2"><font face="바탕"><strong><font><span>거기서 원하는 움짤을 클릭하면 오른쪽에 뜨는 파일정보에 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">original link</span><span>가 뜹니다</span></font></strong></font></font></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';">  </span> <div></div></div> <div style="text-align:center;">    </div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';">  </span> <div></div></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';">  <img width="800" height="572" class="chimg_photo" alt="animated gif capture 2.jpg" src="http://thimg.todayhumor.co.kr/upfile/201607/146831445499477494fc3a4b348103eaef161581cb__mn346252__w964__h689__f91224__Ym201607.jpg" filesize="91224"></span> <div></div></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';">   </span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"></span><span style="font-family:'함초롬바탕';"> </span> <div></div></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕"> </font></font></span> <div></div></div> <div style="text-align:center;"><span><font face="바탕" size="2">오류 예시도 볼겸 세로폭이 큰 짤을 그냥 넣었을 경우의 댓글창을 보겠습니다</font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';">  </span> <div></div></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';">  <img width="800" height="105" class="chimg_photo" alt="deficit.jpg" src="http://thimg.todayhumor.co.kr/upfile/201607/14683144522050ab53866a4a53b0d474e36cdd4f06__mn346252__w805__h106__f17685__Ym201607.jpg" filesize="17685"></span> <div></div></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';">   </span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';">  </span> <div></div></div> <div style="text-align:center;letter-spacing:0pt;"><span style="letter-spacing:0pt;"><font face="바탕" size="2">ㅋㅋㅋㅋㅋㅋㅋ</font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2">누군인지도 모르겠고 </font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2">먼가 이쪽을 보려는 거 같은데 아닌지도 알 수 없는 그런 아쉬운 모습입니다</font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2">문제는 댓글을 많이 써서 아래로 계속 내려보아도 </font></span></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>저 상태에서 고정된 채로 아래 부분을 볼 수가 없습니다</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">. </span><span>답답하죠</span></font></font></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>이점 때문에 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">100</span><span>픽셀이 아주 작은 세로폭이라는 문제에도 불구하고</span></font></font></div> <div style="text-align:center;"><font size="2"><font face="바탕"><strong><font><span>처음부터 댓글배경 이미지의 세로폭을 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">100</span><span>픽셀 정도로 줄여서 넣어야할 필요가 있습니다</span></font></strong></font></font></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕"></font></font></span> </div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕"> </font></font></span> <div></div></div> <div style="text-align:center;"><span><font face="바탕" size="2">움짤의 해상도 줄이기는 그림판에서는 아마 안 되고 그림 프로그램으로는 될 것인데 </font></span></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>인터넷 링크를 첨부해 두겠습니다</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">. </span><span>빠르고 간편해요</span></font></font></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;letter-spacing:0pt;"><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';"><font face="바탕" size="2"><a target="_blank" href="http://ezgif.com/" target="_blank">http://ezgif.com/</a></font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>이 링크를 타고 가서 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">Gif Resize</span><span>를 클릭하고</span></font></font></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>파일선택이나 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">url</span><span>을 입력하고 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">upload</span><span>를 눌러줍니다</span></font></font></div> <div style="text-align:center;"><span><font face="바탕" size="2">그러면 자기가 올린 움짤이 재생되는데 </font></span></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>여기서 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">new height</span><span>가 세로폭 변경값입니다</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">. </span><span>이걸 직접 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">100</span><span>픽셀로 바꿔주거나</span></font></font></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>아니면 눈대중으로 밑의 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">percentage(</span><span>비율</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">)</span><span>을 </span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">30, 40,50..(</span><span>퍼센트값 입력</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">) </span><span>등으로 입력하고</span></font></font></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">Resize it!</span><span>을 누르면 작은 움짤이 만들어지는데 이걸 쓰면 되죠</span></font></font></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;"><span><font face="바탕" size="2">그렇게 해서 만들어진 게 이 게시글 댓글 배경입니다 </font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2"></font></span> </div> <div style="text-align:center;"><span><font face="바탕" size="2"></font></span> </div> <div style="text-align:center;"><span><font face="바탕" size="2"><img width="178" height="100" alt="ezgif-178060564322222222222222222222.gif" src="http://thimg.todayhumor.co.kr/upfile/201607/14683144314c626150beba4044bc5b7470b0717e59__mn346252__w178__h100__f744157__Ym201607.gif" filesize="744157"></font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2"></font></span> </div> <div style="text-align:center;"><span><font face="바탕" size="2"></font></span> </div> <div style="text-align:center;letter-spacing:0pt;"><font size="2"><font face="바탕"><span>상큼하네요</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">. 근데 작아도 너무 작음</span><span></span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">..</span></font></font></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕"></font></font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕"></font></font></span> </div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕"></font></font></span> </div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕"></font></font></span> </div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕"></font></font></span> </div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕"> </font></font></span> <div></div></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>워</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">.. </span><span>오유 배경 신기해서 걍 한번 만들어보려 했을 뿐인데</span></font></font></div> <div style="text-align:center;"><span><font face="바탕" size="2">사진들 고르면서 뒤적거리니 몇 년 만에 보는 것들도 많고 나름 재밌었습니다</font></span></div> <div style="text-align:center;"><span><font face="바탕" size="2">그렇게 고르는데 시간을 좀 쓰다보니 결과물의 유격이 맘에 안들어서</font></span></div> <div style="text-align:center;letter-spacing:0pt;"><font size="2"><font face="바탕"><span lang="en-us" style="font-family:'함초롬바탕';"></span><span>좀 잘 만들어보자 싶던 게 뜻하지 않게 좌우비대칭도 발견하고 </span><span style="letter-spacing:0pt;">ㅋㅋ</span></font></font></div> <div style="text-align:center;letter-spacing:0pt;"><font size="2"><font face="바탕"><span>결국 최적 픽셀을 찾긴 찾았네요 </span><span style="letter-spacing:0pt;">ㅋㅋ</span></font></font></div> <div style="text-align:center;"><span><font face="바탕" size="2">다른 분들은 <font><strong>헤메지 마시라고</strong> </font>알게 된 것들을 팁으로 전하고 싶었습니다</font></span></div> <div style="text-align:center;"><span style="font-family:'함초롬바탕';"><font size="2"><font face="바탕">  </font></font></span> <div></div></div> <div style="text-align:center;"><span><font face="바탕" size="2">그럼 많이들 참고해 주세요</font></span></div> <div style="text-align:center;"><font size="2"><font face="바탕"><span>만들고 보니 눈팅러라 글을 거의 안 쓴다는 게 함정이군요</span><span lang="en-us" style="letter-spacing:0pt;font-family:'함초롬바탕';">!!</span></font></font></div> <div style="text-align:center;"><br> </div> <div style="text-align:center;"><br> </div> <div> </div> <div> </div> <div><br><br> </div>