Book Club 스킨 손보기 - 사진에 라인 입혀 정돈되게 보이기

블로그 디자인 상당히 귀찮은 점이 많죠. 그래서 남이 만들어 놓은 스킨을 편하게 가져다 쓰게 되는 것 같습니다.

저는 Book Club 스킨을 사용하고 있습니다.
군더더기 없이 깔끔하기도 하고 기본적인 기능은 다 되는 기본에 충실한 스킨이란 점이 참 맘에 들어요.

블로그 글 써가면서 디자인 조금씩 바꿔가는 것도 나쁘지 않을 것 같아서 조금씩 손대 보려고 합니다.
사실 남이 만든 걸 바꾸는 건 제 취향에서 상당히 벗어난 일이긴 하지만, 디자인에는 소질도 없으니 부분적으로 바꾸는 것에 만족하기로 했습니다.

 

오늘의 목표는 글보기를 했을 때 사진이나 그림에 라인을 입히는 것입니다.
이 스킨이 예쁜 사진을 주로 담는다면 참 고급져 보이고 좋겠지만, 애석하게도 저는 업로드하는 이미지는 캡쳐가 주다 보니 아무래도 산만하게 느껴졌습니다.

그렇다고 글 올릴 때마다 일일이 보더 주기에는 너무 귀찮죠?!?!
그래서 CSS를 편집할 겁니다.

 

이미지 검사

블로그 글보기에서 이미지에 마우스 갖다 대고 오른쪽 클릭하면 메뉴가 뜹니다. (크롬 기준)
검사를 누르면 자세한 정보를 볼 수 있습니다.

 

 

HTML 및 CSS 구조 파악

HTML은 <figure class="imageblock"><span><img> 구조임을 알 수 있습니다.
그룹으로 묶인 이미지는 <figure class="imagegridblock"><div class="image-container"><span><img> 구조였습니다.

CSS도 보면서 어떤 속성을 추가하면 좋을지 구상합니다.

 

 

CSS 수정

관리에서 스킨 편집 메뉴로 진입한 후 우측 대표 이미지 아래에 있는 html 편집 메뉴를 누르고 CSS탭을 활성화해서 편집창을 엽니다.

 

앞서 나온 속성을 무시하고 적용할 수 있도록 & 나중에 찾아서 편집이나 삭제하기 쉽도록 맨 아래에 새로운 속성을 추가했습니다.

/* by Misc **/
figure.imageblock img,
figure.imagegridblock div.image-container {
	border: 1px solid #dfdfdf;
}

첫 라인 /* by Misc **/ 는 나중에 알아보기 쉽게 하기 위한 주석 부분입니다. 없어도 되는 부분.

<figure class="imageblock"> 하위에 있는 <img>,
<figure class="imagegridblock"> 하위에 있는 <div class="image-container">

이 두 가지가 있으면 img와 div 사방으로 1px짜리 색상코드 #dfdfdf인 실선을 그으라는 의미입니다.

저장하고 왼쪽 보기창을 새로고침해보면, 단독 이미지, 그룹 이미지 모두 실선이 나타난 걸 볼 수 있습니다.

간단하게 목표를 해결했습니다. ^^