티스토리 Book Club 스킨 최적화하기 - 상단 포스트 커버

 제가 현재(2019년 10월 8일) 사용하고 있는 스킨은 Book Club 스킨입니다.

깔끔하고 좋긴 하지만 완벽히 저에게 있어서 마음에 들지는 않기 때문에 여러 부분을 수정해서 사용하고 있습니다.

상단 커버 이미지 투명도 조절하기

 가장 먼저 상단 커버 이미지의 투명도를 조절해보도록 하겠습니다.

원래 위 사진에 보이는 것과는 달리 커버 이미지의 투명도 정도가 약해서 흰 글씨가 잘 보이지 않는 문제가 있었습니다. 그렇게 되면 방문자들이 쉽게 글 영역을 구분하지 못할 거라고 판단해서 이 부분을 수정하려고 했습니다.

 

스킨 수정에서 CSS 코드의 대략 1050번 위치에 해당하는 부분을 수정해주시면 됩니다.

.post-cover:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.65); /** rgba(0,0,0,0.25); */ /* 2019-10-08 커버이미지 어둡기 정도 조절  */
}

위에서 background-color 속성을 변경해줍니다. 이때 rgba() 괄호 안에서 가장 마지막 부분(위 코드에서는 0.65)이 투명도를 설정할 수 있습니다. 기본값으로는 0.25가 설정되어있는데 이 값을 크게 해 주면(1과 가깝게) 투명도를 조절할 수 있습니다. 투명도에 정답은 없으니까 본인이 원하는 투명도를 찾아가면서 조절해보시기 바랍니다. 

값을 변경하고 나서 바로 확인해 보고 싶다면 위처럼 새로고침 버튼을 눌러주시면 바로바로 확인이 가능합니다.

 

포스트 커버 영역 크기 조절

포스트 커버(post-cover) 영역은 위 사진에 보이는 영역입니다. 바로 글쓰기를 할 때 입력한 제목과 카테고리 그리고 작성일 등이 표시되는 부분입니다. Book Club스킨은 이 부분이 너무 과하게 큰 것 같은 느낌이 들어서 저는 따로 수정을 해주었습니다.

 

문제의 코드는 CSS 코드의 1041라인 코드입니다. (주의: 코드의 위치는 사용자마다 다를 수 있습니다.)

.post-cover { /**2019-10-08 포스트커버 영역 크기 수정*/
	position: relative;
	z-index: 20;
	display: table;
	width: 100%;
	height: 200px; /**340px;*/
	background-color: #cbcbcb;
	background-position: 50% 50%;
	background-size: cover;
	box-sizing: content-box; /**border-box;*/
}

우선 해당 코드에서 height 속성을 본인이 원하는 크기로 수정해주시기 바랍니다.

이후 box-sizing 속성을 border-box에서 content-box 값으로 바꿔주시기 바랍니다.

 

만약 다른 속성인 예를 들어서 display를 table이 아닌 값으로 바꿔주게 되면 또는 해당 코드를 지운다면 브라우저 창 크기를 늘리거나 줄일 때 외관상 문제가 발생할 수 있습니다.

 

커버 이미지와 본문 사이 간격 조절

커버 이미지에 대한 수정이 끝났다면, 위에 보이는 것처럼 본문+카테고리 와 커버 이미지의 간격을 조절해주어야 합니다. CSS 코드의 439번 줄을 수정해야 합니다.

#tt-body-page #container {
	padding-top: 225px; /*339px;*/ /**2019-10-08 본문영역과 커버이미지 상단간격*/
}

해당 코드에서 padding-top 속성을 변경해줍니다. 이때 새로고침을 통해서 확인하면서 알맞은 크기를 찾아주시기 바랍니다. 주의할 점은 컴퓨터 모니터뿐 아니라 태블릿, 스마트폰 등의 모바일 환경 크기에서도 잘 보이는지 확인해야 합니다. 간혹 가다 잘못된 크기를 주어버리면 본문 또는 카테고리가 가려서 보이지 않게 됩니다. 잘 보인다면 성공입니다!

 

본문과 커버 이미지를 바짝 붙이고 싶으나 이것을 위한 속성을 아직 못 찾고 있습니다! 혹시나 아시는 분들 혹은 발견하신 분은 덧글로 공유해주시면 제가 글을 수정하도록 하겠습니다.

아쉽지만 오늘의 팁은 여기까지입니다. 사실 위 내용이 완벽한 내용은 아니기 때문에 버그가 있을 수 있습니다. (찾으신 분들은 덧글로..) 그래도 이 정도만 수정해도 어느 정도 만족할 수 있다고 생각합니다. 저는 그럼 이후에 또 다른 최적화 방법을 찾아서 다음 글로 돌아오도록 하겠습니다. 감사합니다.