[Tistory] 티스토리 블로그의 이미지 박스 없애기.

(이미지 출처: Design Sphere^[각주:1])

(처음)
안녕하세요, 까만거북이입니다.

티스토리에 이미지를 올리면, 기본적으로는 항상 이미지 주변으로 큰 박스가 붙습니다.
이를 티스토리에서 제공하는 'HTML/CSS 수정' 방법으로 없애는 팁을 찾게 되어 소개합니다.


(가운데)
티스토리 블로그의 이미지 박스 없애기.

1. 티스토리 블로그의 관리자 페이지에서 왼쪽 사이드바의 'HTML/CSS 수정' 메뉴로 들어갑니다.

Tistory 관리 페이지 - HTML/CSS 편집

2. 그 후, style.css에서 수정을 하게 되는데, 티스토리의 모든 스킨에는 기본적으로 '.imageblock'이라는 부분이 있습니다.
이 부분을 찾아서 border 부분을 0px로 수정해주시면 됩니다.
아래 이미지를 참고하세요.
(이미지를 클릭하면, 크게 보실 수 있습니다.)

3. 세번째는 팁입니다.
티스토리의 강점인 HTML, CSS를 수정하면, 이미지 박스를 없애는 방법 뿐만 아니라 다양한 수정이 가능합니다.

.imageblock             { border:0px solid #ddd;  padding:5px;  margin:5px 0;}

3-1. [border:0px solid #ddd]
border은 테두리를 의미하는데, 그 뒤로 순서대로 두께, 모양, 색깔을 의미합니다.
위의 글까지는 두께를 0으로 조절하면서 보이지 않게 만들었습니다. 물론 아시다시피 이 부분을 늘리면, 테두리 두께를 늘릴 수 있겠죠.
solid는 박스의 테두리 모양을 의미하고, 끊김이 없는 테두리를 의미합니다.
#ddd는 회색을 의미하고, RGB코드로 이를 수정할 수 있습니다.

CSS의 border 부분은 조절할 수 있는 것이 꽤 많은 편입니다.
아래 블로그 링크에서 border 부분에 대한 정보를 얻으실 수 있을 것이고요.

Tistory of Niche    CSS 보더(border) 속성
http://niche0.tistory.com/entry/CSS-%EB%B0%95%EC%8A%A4-%EB%AA%A8%EB%8D%B8%EC%9D%98-%EB%B3%B4%EB%8D%94border 

또한, RGB 코드는 아래 링크가 큰 도움이 될 것입니다.

Color Name 색상이름표   rgb 코드
http://netmeeting.com.ne.kr/data/data-rgb.html

3-2. [padding:5px]
padding은 박스와 박스 안의 이미지 사이의 여백을 의미합니다.
이 부분을 0으로 조절하면, 박스가 이미지에 딱 달라붙게 됩니다.

3-3. [margin:5px 0]
margin은 padding과는 조금 다르게 박스 밖의 여백을 의미합니다.
역시 이 부분을 0으로 조절하면, 박스 밖의 콘텐츠와 딱 달라붙을 수 있게 되겠네요.


(끝)
티스토리를 이용하면서 CSS를 잘 다루게 되면, 블로그의 디자인을 세세한 부분까지 다룰 수 있게 되는 것 같습니다.
그렇다고 CSS를 따로 공부하거나 할 필요 없이 이렇게 하나하나 알아가다보면, 다른 부분도 쉽게 건드릴 수 있게 되는 것 같고요.

좋은 하루 되세요.


 + 이 포스트는 찌질이님의 블로그의 도움을 받아 작성되었습니다.

찌질이의 유어넷    티스토리 이미지 박스 없애는 방법
http://yournet.tistory.com/2

포스팅 끝.
2012년 1월 18일 수요일.

1. Design Sphere - 윈도우 비스타 XP용 티스토리 아이콘 (Tistory icon for Windows Vista XP) http://design.funny4u.com/4 [본문으로]