이미지 테두리가 있다고 해서 꼭 보기 안 좋은 것은 아니지만, 구현하고자 하는 블로그 디자인에 따라 이미지의 테두리를 없애는 편이 더 깔끔하게 보이는 경우도 있습니다. 하여 오늘 이 시간에 간단한 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로 수정해줍니다.
이상입니다. 도움이 되셨나요?
댓글