티스토리 블로그, 북클럽 스킨의 썸네일은 강조해 줄 필요가 있습니다.
이 번 글에서는 썸네일의 가장자리 윤곽을 더욱 강조하여 블로그 페이지의 시인성을 높이는 방법에 대해 알아보도록 하겠습니다.
홈페이지 글 목차의 썸네일 윤곽선은 너무 약해서 잘 보이지 않고 글 본문 하단의 관련 글의 썸네일 윤곽선은 아예 없습니다.
북클럽 홈페이지 글 목차 썸네일 강조
위 그림의 왼쪽에서 볼 수 있듯이 북클럽 스킨의 홈페이지 글 목차 썸네일의 윤곽은 거의 보이지 않아 밋밋하고 시인성도 떨어집니다.
편집 모드에서 'Ctrl+F'를 누르면 쉽게 찾을 수 있으며 해당 행번호는 개인마다 많이 틀리므로 항목으로 찾는 것이 보다 정확하고 편리합니다.
이것을 보강 수정하기 위해서는 티스토리 블로그 관리 페이지의 '스킨 편집/html 편집/CSS'로 들어가서 아래에 정리된 CSS 내용에서와 같이 '.list-type-thumbnail .post-item .thum img' 항목을 찾습니다.
아래의 CSS 내용에서 'border'가 글 목록 썸네일의 윤곽선을 설정하는 속성입니다.
#000000 또는 black 변경하면 가장 진한 검은색이 됩니다. 또한 1px는 윤곽선의 굵기가 1픽셀이라는 의미인데 이것을 2px, 3px, 4px 등으로 변경하여 더욱 굵게 만들 수도 있습니다.
현재의 컬러 #f1f1f1는 매우 연한 회색으로 잘 보이지 않으므로 #555로 변경하면 조금 더 진한 회색으로 변경됩니다.
.list-type-thumbnail .post-item .thum img {
float: right;
width: 126px;
height: auto;
margin-left: 57px;
border: 1px solid #f1f1f1; <-- #555
transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
}여기서 solid는 윤곽선이 실선으로 표시되는 것을 뜻하며 dotted, dashed로 변경하여 점선이나 대시 라인으로 설정할 수 있습니다.
이 밖에도 다양하고 개성 있게 윤곽선을 표현할 수 있는 여러 가지 속성들이 있으며 편집 모드에서 단어를 천천히 입력하면 나타나는 팝업 창을 잘 참조하면 큰 도움이 됩니다.
'double' 요소를 추가하면 윤곽선이 단일선에서 이중선으로 변경됩니다.
글 본문 하단의 관련 글 썸네일 강조
위 그림의 오른쪽에서 볼 수 있듯이 썸네일을 강조하고 시인성을 높여주는 윤곽선이 글 본문 하단의 관련 글 썸네일에는 생략되어 있습니다.
여러 항목이 나타날 경우 아래의 세부 항목들을 잘 확인하여 엉뚱한 다른 행을 수정하지 않도록 주의합니다.
티스토리 블로그 관리 페이지의 '스킨 편집/html 편집/CSS'로 들어가서 '.related-articles ul li figure' 항목을 찾습니다.
.related-articles ul li figure {
display: block;
width: 100%;
height: 0;
margin-bottom: 9px;
padding-bottom: 68.181818181818182%;
background-color: #f8f8f8;
border: #aaa 1px solid; <-- 삽입
}위에 정리한 CSS 항목에서 볼 수 있듯이 border 속성이 누락되어 있으므로 원하는 윤곽선의 색상, 두께, 형태에 해당하는 내용을 추가 행으로 삽입합니다.
자세한 속성에 대한 설명은 바로 앞의 글을 참조하시기 바랍니다. 이제 수정이 모두 완료되었다면 오른쪽 상단의 '적용' 버튼을 누른 후 블로그 홈페이지와 글 본문으로 이동하여 확인합니다.
아래 그림과 같이 글 목차와 관련 글의 썸네일 가장자리 윤곽선이 선명하게 강조된 것을 확인할 수 있습니다.
