일반적으로 웹디자이너는 작업에 들어가기에 앞서 의뢰자 쪽과 많은 의견조율을 거쳐 스토리보드를 기획하게 되고, 이에 따라 작업을 진행하게 됩니다. 그리고 그 과정에서 기획대로 되는 경우란 거의 없고 대부분 의뢰자쪽의 요구로 많은 부분의 수정이 불가피하게 됩니다. 이러한 산고의 과정을 겪으면서 탄생된 야사모의 Mainpage가 상단의 모습입니다.

저 모습은 변하지 않는 하나의 템플릿으로 봅니다. 여기서 메뉴를 선택하게되면...
아래 공지사항 부분이 선택된 페이지로 바뀌게 되는 구조입니다...
폭은 816픽셀로 되어 있습니다. 이 말은 우리 홈페이지는 기본적으로 800픽셀의 이미지는 무리없이 수용할 수 있다는 의미입니다.
16픽셀이라는 여유까지 두고 있으니....
그 폭(Width:가로길이)을 한 눈에 비교하기 쉽도록 전체 이미지를 붉은 선으로 표시했습니다.

Sample을 보게 되면, 설명에 앞서<사진의 크기는 900x600 이하....>를 권하고 있습니다.
이미지프로그램이나 디지탈기기에서 크기를 정할때는 4:3의 비율로 Width를 900픽셀로 지정하면 자동적으로 900x675로 조절됩니다.
Sample- A를 보면, 갈레베님의 이미지가 크기를 초과했어도 다행히 업로드가 되었습니다. 하지만 <야생화전체모습> 이미지는 이미 고정되어 있기 때문에 900픽셀로 늘어난 공백을 같은 이미지가 밀고 다시 들어오는 걸 볼 수 있습니다.

Sample- B는 최초에 권장한 규격 800x600을 적용했음에도 <야생화전체모습> 이미지역시 공백이 생겨, Sample- A와 다름이 없습니다.
빨간 선 밖으로 잘려나간 걸 볼 수 있습니다.

Sample- C는 이미지가 세로 이미지 이므로 가장 외견상 가장 안정적인 모습을 보이고 있습니다.
하지만 여기에도 디테일한 점에서 놓친 부분이 눈에 띕니다.

왼쪽 청색 방향판 Sample- D와 그 밑의 청색은 이 부분의 차이를 가리키고 있습니다.
홈페이지의 태그 부분을 이해하지 못한다면 그 정도가 무슨 문제냐고 할지도 모릅니다. 하지만 홈페이지 제작은 수치에 의해 제어되기 때문에 명령만 제대로 적용된다면 1픽셀의 차이도 없게 됩니다. 시각적으로 봐도 1pixel 정도의 오차로 보입니다.

전번에 우리 회원 한 분이 Sample- A와 같은 현상을 지적했습니다. 그 분이 아니라도 요즘이라면 홈페이지 제작에 관해 상당한 수준에 달해 있는 회원들이 많기 때문에 이 점들 외에도 의아해 생각하는 점이 많으리라 생각됩니다. 하지만 지켜보고만 있으니....

지금 저 위의 이미지를 클릭해 보면, 800x600 크기인데도 보기 흉하게 늘어나 있습니다.
저 모습은 900x600의 이미지를 허용하기 이전부터 지니고 있는 문제이고, 이것을 해결하지 않고는 설령 900x600으로 템플릿을 모두 바꾼다 해도 900+저만큼 오차가 계속 이어가게 됩니다.

이미지 부분의 소스를 살펴보면...아래와 같은 내용이 보입니다.....

.......이하 부분은 웹디자이너가 보고 답변을 전해 주시면 고맙겠습니다..............
<tr><td height=1 bgcolor=#E7E7E7></td></tr>
<tr>
    <td height="150" style='word-break:break-all; padding:10px; border:1px solid #BBBBBB;' bgcolor=#F8F8F9>
        <img src='../data/file/w_club/990065882_892b18c0_mainsize_01.gif' name='target_resize_image[]' onclick='image_window(this);' style='cursor:pointer;' title=''><p><img src='../data/file/w_club/990065882_0b746291_mainsize_02.gif' name='target_resize_image[]' onclick='image_window(this);' style='cursor:pointer;' title=''><p>
        <span class="ct lh">
<DIV>위 이미지들은 일전에 공지사항에서 거론 되었던,&nbsp;이미지파일의 업로드로 인해 제기 되었던 문제를<BR>좀더 구체적으로 살펴보고 이해대한 이해와 해결을 구하기 위해 만든 것입니다.<BR><BR>그림에서&nbsp;윗이미지는&nbsp;메인페이지의 네비게이션부분을&nbsp;보여주고 있습니다.<BR>나머지 Sample이라는 방향판을 달고&nbsp;있는 이미지 3장은 갤러리1/야생화전초의 첫 화면에서&nbsp; 나란히 놓였으면서, 이미지의 크기가 각각 특성을 지니고 있어 비교 샘플로 선택한 것입니다..<BR>이미지를 보면서 설명을&nbsp;덧붙여야&nbsp;하기에&nbsp;코멘트난으로 옮겨 설명하겠습니다.&nbsp;<BR><BR>&nbsp;</DIV></span>
       
                <!-- 테러 태그 방지용 --></xml></xmp><a href=""></a><a href=''></a>
....................................................................................................................................
위 내용에서 padding:10px;로 지정했는데 이는 상하좌우의 padding을 10px씩 준다는 의미로 해석하고 있습니다. 저는 전체를 보지 않고,한 부분만을 보고 말씀드리는거라 매우 조심스럽습니다만
 padding:10 0 10 0 또는  padding:10 0 으로 지정하면 어떻겠습니까.
위와 같이 지정한 이유는 Text의 경우를 예상하지 않았나 싶은데...박스의 좌우 라인을 배경색과 같이 흰색으로 처리하여 padding값을 주지 않고 문제를 해결한다면 이미 사용하고 있는 코멘트박스처리가 또 어렵게 되나요....

그리고 청색 방향판 쪽의 1px은 Cellspacing 값 때문인듯 한데...다른 해결 방법은 없을까요....

무심코 넘길 일 같은데 자세한 면을 보여주십니다..
운영진에서대책이 있으리라 보입니다..
항상 애쓰시는 모습에 많은 것을 배웁니다..

머리나뻔 전 잘 이해하지 못하고 있슴돠....__+