술먹자는 유혹도 물리치고 작업중입니다. 위 이미지는 완성 예상도. 아마 저것과는 조금 달라질 것 같긴 하지만. 일단 대충 위치들을 잡아보고 있습니다. 그리고 css box style(이런 표현이 맞기는 한건가요?)로 만들 수 있을 것 같습니다. 대충 각 잡아보니 나오네요. 헌데... 어차피 저 혼자 쓰고 말 스킨을 이렇게까지 빡세게 만들어야 되나? 싶기도 합니다.
하지만, 테이블로 만들면 해결이 안되는 부분이 있는데, 왠지 css로 만들면 그 부분이 해결될 것 같아서 해보고 있습니다. css로 만들면 왼쪽 컨텐츠 박스와 오른쪽 사이드바 박스를 완전히 따로 놀게 할 수 있잖아요. 예전에 테이블로 만들었을 때는 사이드바에 내용이 적고, 컨텐츠 박스에 내용이 많으면 어쩔 수없이 사이드바도 아래로 쭈욱~ 늘어졌었거든요. 이번엔 사이드바는 사이드바 내용에 맞춰서 크기가 결정되도록 하기 위해서 css로 해보고 있어요.
여기에도 문제는 있네요. 만약 컨텐츠 박스의 내용이 사이드바보다 적으면? 디자인이 완전히 다 깨집니다. 하지만... 설마 그런 경우는 없겠죠? 이 스킨이 완성되면 갤러리에서 쓸 테터데스크를 만들어야 되는 군요. 섬네일 모양 때문에 고민이 좀 있었는데, 대충 해결을 봤습니다.
테터데스크에서 섬네일을 만드는 방식이라는 것이 img 태그에서 width 속성으로 가로 사이즈를 맞춰 줄인다음 css box에서 세로 사이즈를 자르는 방식이더군요. 따로 이미지 컨트롤하는 스크립트 같은 걸 쓰지 않고요. 그래서 만약 제가 100x100 섬네일을 만들고 싶다고 하면, 세로 사진은 100x100 짜리 정사각형 섬네일이 되고, 가로사진은 가로 사이즈를 100으로 사진의 가로세로 비율에 맞춰 축소된, 가로가 긴 섬네일이 됩니다. 사실 원하는 건 그게 아니라 '긴 쪽을 100px로 맞춘' 섬네일이 필요한데 말이죠.
일단 제 스스로 타협점을 찾은 것은 모든 사진을 가로 사진의 비율에 맞게 섬네일로 만드는 것입니다. 예를 들어 제가 요즘 찍는 사진의 가로세로 비율이 16:9인데요. 가로 사이즈를 100으로 맞추면 세로 사이즈가 대략 56정도 됩니다. 섬네일 크기 입력란에 가로 100, 세로 56 으로 맞춰 놓으면 가로사진이던 세로사진이던 모두 동일하게 100x56 짜리 섬네일로 맞출 수 있습니다(border, padding, margin 등을 고려해보면 숫자가 좀 달라질 순 있겠죠).
일단 섬네일 문제의 타협점을 찾고나니 이젠 테터데스크의 디자인만 잘 꾸며보면 될 것 같네요. 뭐랄까 그 동안 고민하고 있던 것들이 조금씩 풀려가니까 작업 의욕도 생기고, 속도도 붙고 그럽니다. 회사에서의 업무량이 점점 많아지는 것이 좀 걱정이긴 합니다. 집에서 작업할 수 있는 시간은 대략 2시간 정도뿐이라서 과연 언제쯤 완성될지...
