티스토리 Poster 스킨 꾸미기 3 (썸네일 이미지 테두리 넣기)

안녕하세요. 뜨란입니다.

Poster 스킨 자체가 심플함을 살리면서 깔끔하게 잘 만들어진 스킨이라 뭔가 복잡한 기능을 추가하거나 대대적으로 뜯어고치는 일이 없는 듯 해요.

그래서 조금씩 아쉬운 부분을 손 본다고 하는것 마저 HTML 태그를 몇 가지 추가하거나 CSS를 조금 수정하는 정도의 간단한 작업이 다였습니다.

지금까지 수정한 내용들도 대부분 위의 수정작업 범위 내에서 이루어졌지요.

2019/02/21 - [Web 이야기/HTML&CSS] - 티스토리 Poster 스킨 꾸미기 2 (사이드 메뉴 버튼 고정)

2019/02/20 - [Web 이야기/HTML&CSS] - 티스토리 Poster 스킨 꾸미기 1-2 (고정 배경 이미지 추가)

2019/02/19 - [Web 이야기/HTML&CSS] - 티스토리 Poster 스킨 꾸미기 1-1 (고정 배경 이미지 넣기)

결국 오늘 포스팅할 썸네일 이미지의 테두리 처리도 CSS를 수정하는 간단한 작업입니다.

수정 과정은 본문을 참조하세요.

늘상 적는 말이지만 시작하기에 앞서 주의사항을 적고 시작하겠습니다.

주의!!! 실수로 코드가 꼬일수도 있으므로 태그 작업 전에 항상 백업부터 해두시길 권합니다.

이번에는 진행하기에 앞서 결과화면 2개를 먼저 보여드리고 시작하겠습니다.

제 개인적으로는 리스트타입을 선택해놓기 때문에 수정한 상태로 쓰고 있습니다만 갤러리 타입을 선호하시는 분들께서는 아래 결과화면을 먼저 보고난 후 적용하는 것을 고려하시기 바랍니다.

[리스트 타입 결과화면]

[반응형 결과화면]

[갤러리 타입 결과화면]

리스트 타입으로는 문제없이 잘 출력되지만 갤러리 타입에서는 왼쪽에 정렬되는 썸네일 이미지들만 왼쪽 테두리가 사라진 것으로 표현되는데요. 이게 왼쪽에 정렬되는 div 태그만 살짝 가려져서 나타나는 것으로 추정됩니다.  지금 소개해드리는 수정 방법으로는 위와 같은 결과가 나오므로 거슬린다면 스킵하시기 바랍니다. 

그래도 수정해보겠다고 생각하시는 분은 아래 과정대로 따라하시면 됩니다.

* * *   * * *

 리스트 상의 썸네일(Thumbnail) 이미지에 테두리 넣기

Poster 스킨이 적용된 상태에서 전체 보기나 카테고리 글목록 보기를 한다면 아래 사진에서처럼 글 리스트와 함께 우측에 썸네일 이미지가 출력이 됩니다.

저는 이미지를 올리기 전부터 이미지에 스트로크 처리를 해서 테두리를 입히고 올리는데요. 

썸네일 이미지는 원본 그대로 투영되는게 아니다보니 테두리가 입혀지지 않은 상태로 출력이 됩니다.

썸네일 이미지도 깔끔하게 통일된 색상으로 테두리를 넣고 싶었기에 수정을 해봤습니다. 

1) 변경 대상의 클래스 또는 ID 확인

크롬 브라우저에서 F12키를 눌러 개발자 도구를 호출하여 태그 적용 TEST를 진행합니다. 

(ID확인 및 TEST 과정은 이전 글: 티스토리 Poster 스킨 꾸미기 2 (사이드 메뉴 버튼 고정)에서 확인 가능합니다.)

셀렉터를 통해 이미지를 클릭하면 개발자 도구 상에서  "thum"이라는 클래스명을 가진 span 태그가 img 태그를 감싸고 있는 것으로 확인 됩니다.

단순하게 테스틀 해보기 위해 img 태그에 직접 border : 2px slid #00c; 라고 입력해봤습니다.

생각같아서는 바로 끝날 줄 알았는데요. 결과는 예상과 달랐습니다.

아래 사진에 위·아래로 밑줄이 쳐진 것이 보이나요?

이미지가 100% 출력되는 것이 아니었기에 위아래로만 border가 적용된 것처럼 보입니다.

추가했던 태그의 앞쪽 체크박스를 클릭해서 태그 적용을 해제해줍니다.

이번에는 img 태그를 감싸고 있던 <span class="thum"> 태그를 선택한 후 border: 1px solid #00c; 라는 명령을 넣어봤습니다.

드디어 원하던 형태로 테두리가 그려졌습니다. 

여기서 색상을 직접 바꿔볼 수도 있습니다.

제가 작업할 때 진짜 자주 사용하는 기능이기도 한데 색상이 표시된 정사각형 버튼을 클릭하면 색상툴을 사용할 수 있습니다. 

여기에서 웹상의 다른 색상을 추출하거나 선호하는 색상코드를 직접 입력, 육안으로 보이는 색을 직접 선택하는 식으로 색상 변경이 가능합니다.

제 블로그는 회색 계열의 색상을 자주 사용하다보니 직접 선택기능으로 색을 지정해봤습니다. 색상코드는 #a4a4a9 로 표기되어있네요.

이 코드를 기억해두거나 복사해줍니다.

테스트도 해봤고, 색상값도 알아냈으니 이제 직접 수정하는 일만 남았습니다.

2) 티스토리 CSS 코드 수정

꾸미기 - 스킨편집 - HTML편집 - CSS 로 가서 ".post-item .thum" 태그를 찾아갑니다. 

앞서 개발자도구에서 테스트했던 것처럼 해당 태그에 border: 1px solid #a4a4a9; 라고 입력해줍니다.

여기서 1px는 두께, solid는 선의 종류 #a4a4a9는 색상을 의미합니다. 

여러분 취향에 맞게 수정해서 쓰시면 됩니다. 

코드 작업을 하실 때는 세미콜론( ; )이 항상 제대로 들어갔는지 확인하는 것 잊지 마시고요.

작성이 끝났다면 미리보기 기능을 통해 정상적으로 반영되는지 확인한 후 적용하시면 됩니다. 

3) 정리

리스트 형태로 본다면 반형형과 일반형 모두 공통 적용되는 태그였기 때문에 반응형 상태에서도 정상적으로 나오는 것을 확인할 수 있습니다. 

서두에서도 언급했듯이 갤러리모드에서는 왼쪽 첫번째로 정렬되는 이미지들에서 테두리가 안나오는 현상이 있습니다. 

간단하게 여백이나 패딩값 등을 조절해보았으나 해결하지 못했습니다. 

Script 차원에서 갤러리모드일 때 아예 테두리를 없앤다거나 하는 방식으로 제어는 가능하겠지만 간단하게 수정해서 쓰자라는 모토아래 가급적이면 스크립트 파일은 안 건드리려고 하고 있습니다. 

HTML/CSS 수정만으로 이 현상을 해결하려면 조금 더 테스트를 해봐야할 듯 합니다. 

방법을 알아낸다면 다시 포스팅하겠습니다.