본문 바로가기
블로그팁

티스토리 이미지 테두리 없애는 방법

by 봉잡스 2013. 4. 17.

이미지 테두리가 있다고 해서 꼭 보기 안 좋은 것은 아니지만, 구현하고자 하는 블로그 디자인에 따라 이미지의 테두리를 없애는 편이 더 깔끔하게 보이는 경우도 있습니다. 하여 오늘 이 시간에 간단한 HTML/CSS 편집을 통해 이미지 테두리를 없애는 방법을 알아보도록 하겠습니다.


Lawlite님의 Whiteground 스킨 이미지 테두리 없애기




1.티스토리 관리 모드의 HTML/CSS 편집으로 들어가 CTRL+F를 입력하여 '/*공통*/' 을 검색해줍니다.




2. 검색을 하게 되면 아래와 같은 부분이 검색됩니다. 표시해놓은 부분을 '변경 후'와 동일하게 수정해주세요.


    변경 전


/*공통*/

h1, h2, h3, h4 {margin:0; padding:0;}

ul, ol {margin:0; padding:0; list-style:none;}

img {border:1px;}       ☜ 변경해주셔야할 부분입니다.

input, textarea{

font:13px NanumGothic, 나눔고딕, "Malgun Gothic", "맑은 고딕", Dotum, 돋움, Gulim, 굴림, Verdana, Arial, Trebuchet MS;

}


    변경 후 


/*공통*/

h1, h2, h3, h4 {margin:0; padding:0;}

ul, ol {margin:0; padding:0; list-style:none;}

img {border:none;}         ☜ 이와 같이 'none'으로 변경해주세요.

input, textarea{

font:13px NanumGothic, 나눔고딕, "Malgun Gothic", "맑은 고딕", Dotum, 돋움, Gulim, 굴림, Verdana, Arial, Trebuchet MS;

}


일반적인 티스토리 스킨 이미지 테두리 없애기


1. 관리자 모드의 HTML/CSS 편집 모드에서 CTRL+F를 입력하여 '/*그림*/'을 검색해줍니다. 

※ 검색되지 않을 경우, 'imageblock' 으로 검색을 시도해보세요.




2. 그러면 아래와 같은 부분을 찾으실 수 있을겁니다. 표시해놓은 부분을 '변경 후'와 동일하게 수정해주세요.


    변경 전


/* 그림 */

 .imageblock      { border:1px solid #ddd;padding:3px; margin:5px 0; text-align:center; }

                                    ▲ 이부분을 수정해야 합니다.


    변경 후


/* 그림 */

 .imageblock      { border:0px solid #ddd;padding:3px; margin:5px 0; text-align:center; }

                                    ▲ 1px을 이와 같이 0px로 수정해줍니다.


이상입니다. 도움이 되셨나요?


반응형

댓글