티스토리 이미지 자동 테두리 넣기, CSS 코드

오늘은 티스토리에서 이미지 자동 테두리 넣기를 해보겠습니다. 바로 사용할 수 있는 CSS 코드도 알려드리겠습니다. 

이미지 테두리 넣기를 하는 이유

블로그를 운영하다 보면은 이미지가 하얀색 일때 블로그 바탕도 흰색 일때 이미지가 구분이 안될때가 있습니다. 이를 방지하기 위해 이미지에 항상 자동으로 검은 박스를 넣는 방법입니다. 

CSS 코드 복사

아래 CSS 소스를 복사하세요. 

/*이미지 자동 테두리 시작*/
.imageblock{border:1px solid #555555;padding : 1px1 1px 1px 1px;}
/*이미지 자동 테두리 끝*/

박스의 색 변경 하기 

박스 색을 변경하고 싶으면 solid # 뒤에 숫자를 변경해 주면 됩니다. 모르시겠으면 그냥 사용하세요. ^^

CSS 코드 붙여넣기

1. 자신의 블로그의 관리자페이지로 들어갑니다. 
2. 왼쪽 메뉴 중 '꾸미기/스킨 편집' 으로 갑니다. 
3. 오른쪽 상단의 'html 편집'으로 가세요. 
4. 'CSS' 클릭 후 위에서 복사한 CSS 소스를 맨 아래에 붙여넣기 한 후, 적용을 누릅니다. 

 

이제 모두 끝났습니다.
블로그 포스팅 아무거나 들어가셔도 이제 모든 이미지에 자동 테두리가 되어 있을 겁니다. 

 

마무리

지금까지 티스토리에 이미지 자동 테두리 넣기를 해보았습니다. CSS 코드 넣는 방법도 알아보았으니 CSS의 색과 박스 두께도 한번 변경해 보세요. 

 

관련 링크 : 블로그스팟에서 이미지 자동 테두리 하는 법, CSS 삽입 방법

 

위의 방법은 핸드폰 화면에서는 작동하지 않습니다. 아래는 픽픽 프로그램을 이용해 화면캡처하면서 테두리를 자동으로 만드는 프로그램 입니다. 제가 해보니 이방법이 가장 안전 합니다. ^^ 어디서나 똑같이 보이구요. 

픽픽, 화면캡처하면서 이미지 테두리 자동 만들기, 블로그 글쓰기 - 유지식팩토리