티스토리 뷰

티스토리 본문에 넣은 이미지에 테두리 윤곽선을 넣는 초간단 방법으로 여백과 이미지를 구분하기 위한 용도로 예쁜 모양의 액자 같은 테두리 선을 만드는 것은 아니니 이점 참고하시기 바랍니다.

캡처 이미지를 사용하다 보면 본문 배경과 이미지 간의 경계가 구분되지 않는 경우가 있었는데요.

제 경우 캡처된 이미지를 포토샾에서 한번 더 편집해 주는데요 캡처된 이미지의 배경이 흰색일 경우 티스토리 본문 배경색과 구분되지 않아 테두리선을 넣고 있습니다.

포토샵이나 이미지 편집 툴로 테두리를 넣게 되면 그때그때마다 다양한 색상과 선 두께 모양 등을 설정할 수 있는 장점도 있고 여백과 구분되어 깔끔해 보이는 효과가 있습니다.

그런데 편집할 때 이미지에 테두리 선을 넣으니깐 귀찮은 것은 둘째치고 한 가지 문제점이 생겼습니다.

본문에서 볼 때는 깔끔해 보이고 좋은데 목록 섬네일로 들어가게 되면 섬네일 비율에 따라 상, 하 또는 좌, 우의 테두리 선만 잘려나가 역으로 지저분해집니다.

물론 대표 이미지로 사용할 이미지에는 테두리 선을 넣지 않으면 되겠지만 다음 검색엔진이 어떤 이미지를 선택해 가져 갈지도 모르고...

어쨌든 저는 간단하게 css로 스타일링하는 것으로 결정.

티스토리 이미지 테두리 선 넣기

코드는 아주 간단합니다. 티스토리 관리 홈에서 스킨 편집 > HTML 편집 > CSS을 선택해 편집창 가장 하단에 아래 코드를 복사해 붙여 넣습니다.

figure.imageblock img {
border: 1px solid #eaeaea;
}

선 두께를 변경하고 싶다면 코드 중 1px로 된 것에 숫자를 높이면 되고 선색상은 #eaeaea로 된 곳에 원하는 색상 코드를 넣으면 됩니다.

색상 코드는 HTML 컬러 코드로 접속해 원하는 색을 선택해 복사 후 변경해 줍니다.

예제 코드는 아래와 같아 이미지 배경이 흰색일 경우 보이지만 배경색이 짙은 색일 경우 잘 보이지 않는 색상으로 되어 있습니다.

티스토리 이미지 테두리 선

티스토리 이미지에 테두리를 넣는 간단한 글인데 괜스레 글이 길어졌습니다. 저도 블로거이다 보니 양해 부탁드려요.