포스팅용 이미지에 일일이 포토샵에서 테두리를 넣기도 귀찮고, 배경색과 비슷한 이미지를 업로드 했을때 이미지 영역이 어디까지인지 구별이 안되는 문제가 있습니다. 물론 흰 배경에 카툰을 올린다거나 좀더 자연스러운 레이아웃을 보여주고 싶으신분은 이런 기능이 필요가 없겠지만요. 구버전 파이어폭스에서는 이 태그가 안먹혔는데 최신버전은 되더군요~.

● 테두리에 1px 선 넣기

스킨에디터 > 전문가용 편집 > css 탭을 선택하고

.post_content img { border:1px solid #d1cbbb; }
이렇게 아무데나 한줄 삽입하세요. #d1cbbb 은 컬러값으로, 원하는 색으로 변경해서 쓰시면 됩니다. 이미지에 border를 넣은 후에는 이미지 테두리에 1px이 늘어나게 되므로, 본문 폭을 2px 늘려줘야합니다. (border가 2px일 경우 본문폭을 4px 늘입니다.)

.content { width:502px; }
.content 항목을 찾으신 후 다른건 그대로 두고, width만 (현재는 500px) 502px로 수정합니다. 또는, 템플릿 변경 > 포스트영역 > 포스트 본문의 본문 이미지 사이즈를 498 픽셀로 고쳐도 됩니다.


● 테두리 1px 선 + 바깥쪽 흰 여백 10px 넣기

주로 사진을 많이 올리는 분들은 유용하게 쓰실 수 있을 것 같습니다.
스킨에디터 > 전문가용 편집 > css 탭을 선택하고

.post_content img { border:1px solid #d1cbbb; padding:10px; background-color:#FFFFFF; }
이렇게 한줄 삽입하세요. padding을 10px, 여백은 흰색 #FFFFFF 로 지정하였습니다. padding값과 테두리도 생겼으니 이미지 폭도 522px로 자동적으로 늘어납니다. 템플릿 변경 > 포스트영역 > 포스트 본문의 본문 이미지 사이즈를 (현재는 500px) 478 픽셀로 줄여주세요~.

다운로드 : book_2.zip

book 스킨 2.0 버전입니다. 스킨에디터로 들어가셔서
전문가용 편집 > html/css편집 탭을 클릭한 후 html과 css에 첨부파일 각각 복사&붙이기 하시면 됩니다. 2.0 버전이 은근히 제약이 많네요;; 위젯도 가로 180픽셀 고정이라 스킨 우측도 늘렸습니다. 본문 폭은 500px 입니다.


1. 이글루관리 > 디자인 > 새 스킨 만들기 버튼을 누른 후, 아래와 같이 설정합니다.


2. 템플릿 변경 > 포스트영역 > 포스트 본문의 본문 이미지 사이즈를 설정합니다. 본문 폭이 500px이므로 그 이하로 설정해주시면 됩니다.

템플릿은 본인의 취향대로 골라서 쓰세요~

3. 전문가용 편집에서, 첨부파일의 html과 css 파일을 열고 각각 복사&붙여주세요. 이때 '미리보기' 버튼을 하면 처음엔 적용이 안되고 일단 '바로적용'을 한번 해서 스킨을 생성해야만 적용되더군요. 그러나! 제가 해본결과 css탭에서 아무 이미지 주소.. 예를 들면 첫줄에 있는 'http://pds17.egloos.com/pds/200911/05/61/book_t.jpg' 여기서 양쪽 작은따옴표를 지우고 미리보기를 한후, 다시 작은따옴표를 쓰고 또 미리보기를 누르면 적용됩니다. (작은따옴표 오른쪽꺼 하나만 지웠다가 다시 써도 됩니다)

---

기존의 메모장 기능은 스킨에디터 > 위젯추가/선택 > 내 저장 위젯 > 내 저장위젯 관리 에 들어가 있더군요;; 제가 쓰는것처럼 메모장으로 카테고리를 바꿔 쓰시던 분은 '설정변경' 버튼 클릭후 css 부분에 아래내용을 붙여주세요. (기존의 #사이드바 부분이 빠지게 됩니다)

.memo0 { height:18px; padding:9px 0 0 15px; border-top : 1px solid #C6BEA6;
background:url(http://pds3.egloos.com/pds/200706/02/61/left_list0.gif) no-repeat 0px 11px; }
.memo1 { color:#5c5449; height:19px; padding:1px 0 0 15px;
background:url(http://pds5.egloos.com/pds/200706/02/61/left_list.gif) no-repeat 1px 3px; }
.memosub { height:17px; padding-left:16px;
background:url(http://pds3.egloos.com/pds/200706/02/61/left_list2.gif) no-repeat 4px 1px; }
.memolink { height:19px; padding:3px 0 0 15px;
background:url(http://pds4.egloos.com/pds/200706/13/61/left_link.gif) no-repeat 0px 5px; }
.memoguest { height:19px; padding:3px 0 0 15px;
background:url(http://pds5.egloos.com/pds/200706/02/61/left_guest.gif) no-repeat 0px 5px; }
.memodotline { height:1px; margin:6px 0 5px 0; border-top:1px dotted #C6BEA6;
}