CSS(스타일시트)에서 img 에 border 속성만 몇줄 적어주는 것으로 , 사진 따위의 이미지에 적당한 테두리를 두를 수 있다. 워드프레스(Wordpress) 스킨 따위에는 흔히 포함되어 있는 트릭! 태터툴즈(Tattertools) 스킨에는 tiskin의 스킨 말고는 아마 없을걸?
다만, 그냥 전체 img에 적용해 버리면, 모든 이미지가 위와 같은 테두리 border를 갖게 되므로 곤란하다. 이를 해결하기 위해서...
.entry img { } 에만 적용하거나, (이렇게 하면 본문 영역에 들어간 모든 이미지에 테두리가 생겨 버린다. 본문영역에 이미지가 사용된 스킨의 경우 곤란할수 있다.) 사실 이건 1UP님의 스킨을 열어보고 안 건데, 1UP님은 .imageblock img { } 에만 적용되도록 넣으셨더라~ 태터툴즈 이미지 업로드 버튼으로 본문에 넣으면 좌,우,센터의 위치를 지정하기 위한 .imageblock 클래스가 들어갈 테니까. 다만 이 경우 FREE 라고 써진 버튼으로 넣을 경우에는 테두리가 생기지 않는다.
Stylesheet ..
아무튼 이미지의 border를 넣고 나면 그 여백과 border의 크기가 더해져 이미지가 차지하는 공간이 결과적으로 커져버린다. 스킨의 '본문 가로 크기'와 '스킨 index.xml에서 지정한 본문 가로크기'(이미지 리사이즈 크기)가 동일하다면, 이미지가 본문의 크기를 넘어 버리게 되는 것. 때문에 여백과 border의 크기를 계산하여 본문의 가로 크기를 늘려주어야 한다. 혹은 'index.xml 의 본문 크기'를 여백과 border를 포함하는 크기가 되도록 줄여주는 방법이 있을 수 있다.(다만 이 경우에는 앞으로의 글들에는 유효하나, 예전에 작성한 글에서는 효과가 없다.)
물론 스킨 자체에 overflow:hidden 따위의 속성이 포함되어 있는 경우, 10~15px 정도 이미지 크기가 늘어난다고 해서 스킨 전체가 틀어져 버리거나 하진 않는다.
몇 가지 더 문제 될 수 있는 경우가 있을 수 있는데,
예제2
이미지의 배경과 본문의 배경이 일치해야 더 보기 좋은... 이런 이미지의 경우가 그렇다. ㅡ,.ㅡ
포스팅 할때마다 조금 귀찮긴 하겠지만, 스타일 시트에 적당한 이름의 클래스로 넣어 두고, 태터툴즈 에디터 html 모드에서 완전 수동으로 class 를 추가해 주면, 원하는 이미지에만 테두리를 넣을 수도 있다.
Stylesheet ...
차라리 간단한 사진 편집기, 혹은 포토샵으로 사진 테두리를 만드는게 편할지도.... ㅡ,.ㅡ'
Trackback
Trackback Address :: http://hi8ar.godohosting.com/oldlog/trackback/371
Comments
Go to write form저 곰돌이녀석. 어째서 손이 저렇게 자연스러운걸까요.
인형 따위가 부러울 줄 이야..-.-
그리고 저 1upz 가 아니고 1UP 인데요 ㅜㅜ
1upz는 도메인 주소 만들때 1up이 등록 되어 있어서;;;긁적긁적; 고치기 Reply
그러고 보니 손뿐 아니라, 자세와 모양이 자연스럽기(?) 그지 없군요!.. 허허허..
그건 그렇고.. [color=#993399]죄송죄송[/color]..^^;; 1upz로 착각한건지, 원래 그렇게 알고 있던 것인지 잘 모르겠어요. 캬하하! 용서해주셈.. ㅡ,.ㅡ' 고치기
곰돌이가 되고싶습니다. 고치기 Reply
가까운 동굴에 들어가셔서 삼칠일동안 인진쑥과 달콤마늘만 복용하시면 곰이 되실지도.. 고치기
음냐.. 무슨 말씀이신지 전혀 이해안되는.. ^^;;
암튼 테두리는 멋지네요~~ ㅠㅠ 고치기 Reply
사실 무슨 말씀이신지 저도 잘 모릅니다. 고치기