hELLO. 스킨 (헬로스킨)을 적용한 지 일주일째. 군더더기 없이 깔끔한 데다 목차도 자동으로 만들어져서 가독성 높은 글쓰기에 적합합니다. 단 한 가지 마음에 안 드는 게 있었습니다. 글의 대표 사진이 제목 사진에도 그대로 반영된다는 겁니다. 사진이 잘려서 영 예쁘지가 않죠. html만 간단히 편집해서 제목 사진을 없애거나 다른 사진으로 대체할 수 있습니다. 정말 쉬우니 따라 해보세요!
기본 제목사진
헬로 스킨의 경우 대표 사진이 있을 때와 없을 때의 제목 디자인이 다릅니다.
- 대표 사진 지정 시 : 제목 사진에도 반영. 글자는 하얀색.
- 대표 사진 지정 안 할 시 : 제목 사진 없음. 글자는 검은색.
저는 대표 사진 유무와 관계없이 오른쪽처럼 깔끔한 디자인으로 통일해보려고 합니다.
제목 사진 없애는 법
먼저 블로그 관리 - 스킨 편집 - HTML 편집으로 진입합니다.
227행으로 이동해서 코드 맨 앞에 <!-- 을 적고 맨 뒤에 -->을 적습니다.
간단히 원리를 설명하자면, 227행이 대표 사진을 지정했을 때의 제목 디자인을 담은 코드이고, 코드 앞뒤로 넣는 <!-- -->는 해당 코드를 반영하지 않겠다는 의미입니다. 즉, 해당 코드를 지워버린 것과 같은 효과를 냅니다.
<!--<div class='thumbnail absolute right-0 top-0 w-full h-64 before:content-[""] before:absolute before:right-0 before:top-0 before:w-full before:h-64 before:bg-h-900/50 before:z-10 [&+.description]:text-h-200'><img class="absolute right-0 top-0 w-full h-64 z-0 object-cover" src="https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbzS0Vg%2Fbtr1UTltjqe%2FPV8WMskskqynrdzSLFsyJ1%2Fimg.png" alt=""></div>-->
코드 앞뒤로 <!-- -->을 넣어주면 227행 전체가 초록색으로 바뀝니다. 혹시 227행 아래까지 전부 초록색으로 바뀌어버렸다면 227행 코드 끝에 -->가 제대로 안 들어갔기 때문입니다. 꼭 확인하세요!
코드를 변경해 준 후에 왼편에 새로고침 버튼을 눌러서 게시글에 들어가 보면 대표사진 없이 깔끔하게 제목만 뜨는 걸 확인할 수 있습니다. 혹시 바뀌지 않았다면 html 편집 화면에 적용 버튼을 누르고 확인해 보시면 됩니다.
제목 사진 바꾸는 방법
이번엔 대표 사진을 지정하더라도 제목 사진을 특정 이미지로 통일하는 방법을 알아보겠습니다. 이미지는 자유롭게 찾아주시면 되는데, 제목 글씨가 하얀색이기 때문에 어두운 이미지로 찾는 것이 좋습니다.
저는 이 정도 밝기의 이미지를 사용해 보겠습니다.
마찬가지로 HTML 편집으로 진입해서 '파일업로드' 탭을 눌러줍니다.
아래에 '+추가' 버튼을 누른 뒤 제목 사진으로 쓸 사진을 업로드합니다. 이때 사진파일명은 영어나 숫자여야 합니다.
해당 이미지가 정상 업로드됐다면 마우스 우클릭을 해서 링크 주소를 복사해 둡니다.
마찬가지로 227행을 수정할 건데요.
<div class='thumbnail absolute right-0 top-0 w-full h-64 before:content-[""] before:absolute before:right-0 before:top-0 before:w-full before:h-64 before:bg-h-900/50 before:z-10 [&+.description]:text-h-200'><img class="absolute right-0 top-0 w-full h-64 z-0 object-cover" src="https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbzS0Vg%2Fbtr1UTltjqe%2FPV8WMskskqynrdzSLFsyJ1%2Fimg.png" alt=""></div>
227행 후반부에 src="~~~" 가 있습니다.
따옴표 안에 적힌 걸 지우고 복사해 둔 링크 주소를 넣어주면 됩니다.
src="복사한 링크 주소" 이런 식으로요.
마찬가지로 새로고침 버튼을 눌러보면 제대로 적용됐는지 확인할 수 있습니다.
이렇게 하면 대표 사진으로 지정하더라도 제목 부분은 미리 지정해 놓은 사진이 뜨게 됩니다.
회사 다니면서 취미로 html을 끄적끄적 배워봤는데 이렇게 쓰이게 되네요. 이걸 알아내는 데까지 상당한 시간이 걸리긴 했지만요. 깔끔한 헬로스킨 만들어주신 제작자님 감사합니다!
같이 보면 좋은 글