블로그 스킨 교체

 

✂️

 

기존까지 Oreo라는 스킨을 사용해 오다가, 본문에 텍스트가 많아지는 경우 본문 가독성이 떨어지는 것 같아서 이 김에 다른 스킨을 사용해 보기로 했다.

 

내가 사용하고 있었던 Oreo 스킨의 프리뷰 파일 모습

 

어떤 스킨이 가독성이 좋을까? 고민 중 티스토리 글쓰기 환경처럼 본문 폭과 글자 간격이 좀 더 넓은 스킨이 좀 더 눈에 잘 들어올 것이라는 생각이 들었고, 때마침 티스토리에서 만든 Letter라는 스킨이 눈에 들어왔다.

 

Letter 최소한의 디자인, 깔끔한 스킨을 원하는 블로거를 위해 만들었습니다. 깔끔한 편지지 위에 여러분의 이야기를 들려주세요.

-Letter 스킨 페이지의 소개 문구

 

이 스킨은 티스토리에서 직접 배포하는 스킨이었는데, 이전에 사용중인 Oreo 스킨과 동일하게 본문을 간결하게 보여주는 특징을 가지고 있었다. 또한, 내가 이때까지 사용해보지 않았던 썸네일이 출력되는 관련 글 보기와 같은 비교적 최신 기능들도 활용하고 있었다.

 

간결하고 뚜렷하게 본문을 볼 수 있는 디자인이 마음에 들어서, 우선 기존에 사용하던 스킨을 백업하고 잠시 사용해보기로 하였다. 약 10분 정도 사용해 본 결과 이전에 사용하던 스킨과 비교했을 때, 나은 부분과, 더 좋지 않은 부분을 발견할 수 있었다.

 

Letter 스킨 프리뷰 일부

</footer>

 

 

6. 첨부 파일의 파일 이름의 하단부가 잘려서 나타나는 문제 해결

첨부 파일 파일 이름의 하단부가 잘려서 표현되는 문제를 발견했다. 파일 이름을 표시해주는 공간의 높이가 좁아서 생긴 문제 같아서 파일이름 표시 구역의 높이를 자동으로 조정되게 CSS에 추가하였다.

 

/*파일 이름이 수직으로 잘리는 현상 수정*/

figure.fileblock .name, #tt-body-page figure.fileblock .name {
    height: auto;
}

 

첨부 파일의 글자의 아랫 부분이 잘린 모습. 파일 명의 언더바(_)가 나오지 않는다.

 

첨부 파일의 글자 아랫 부분 잘림 현상이 수정된 모습

 

 

7. 본문 하단에 각주 번호 추가

이유는 잘 모르겠지만, 각주를 모아놓은 본문 하단에는 하단에 번호가 표시되지 않아서 번호 표시를 추가하였다. 그냥 숫자만 뜨면 아쉬울 것 같아서 앞에 각주 (번호). 형식으로 수정하였다.

 

/*각주 번호 추가*/
body ol.footnotes{
	list-style-type: none;
	counter-reset: footnotecounter;
}

body ol.footnotes > li:before {
  content: "각주 " counter(footnotecounter) ". ";
  counter-increment: footnotecounter;
}

 

각주 하단에 번호가 없어서 몇 번 각주였는지 파악하기가 힘들다

 

각주 하단에 번호가 추가된 모습

 

참조: https://stackoverflow.com/questions/23498447/printed-html-per-page-footnotes/23622470#23622470

 

 

8. 검색 버튼 누를 때, 자동으로 포커스 변경

 

검색 버튼을 누르면 검색창이 나오기는 하는데, 검색 창이 아닌 검색 버튼에 포커스가 맞춰져 있어서 마우스나 손가락을 한 번 더 이동시켜야 한다. 자바스크립트에 대한 지식이 많이 없지만, 이전 스킨에 있던 검색창 기능을 살펴보고 jQuery를 이용하여 기능을 구현할 수 있음을 알게 되었다.

 

common.js 파일을 열어서 function searchToggle() 아래에 입력창을 포커스로 맞춰주는 코드를 추가하였다.

 

 //common.js 내용
 
 function searchToggle()
    {
        $('#container').toggleClass('search_on');
        $('.area_search').toggle();
        $('.area_search').find("input").focus(); //추가한 내용
		

        if ($('#container').has('search_on')) {
            $('#wrap').removeClass('menu_on');
        }
    }

 

9. 썸네일 이미지 잘림 문제 해결?

블로그 메인 화면의 썸네일이 잘려서 표시가 되는 문제가 발생했다. 썸네일 크기가 192*192px인 1:1비율 고정되어 표시가 돼서 그런데, 내가 사용하는 대표 이미지들은 비율이 보통 1:1이 아닌 16:9나 4:3 비율을 가지고 있다. 그래서 이미지가 잘려서 표시가 되는 경우가 많다. 사실 글을 읽는데 큰 문제는 없지만, 그래도 신경이 쓰이니 이를 수정해 보아야겠다는 생각이 들었다. max-width나 height auto 등으로 CSS로 이미지를 축소하여 표시하는 방법은 많이 나오는데, 이상하게 적용이 모두 되지 않았다.

 

알고 보니 Letter 스킨은 썸네일이 배경 이미지로 처리가 되어있어서 그런데, 이 경우에는 background-size: contain 값을 주면 됐다. 이렇게 하면 이미지가 잘리는 현상이 사라지긴 하지만, 여백이 좀 많이 남게 되어 뭔가 허전한 기분이 든다. 그래도 뭐, 안 하는 것보다는 나은 것 같다.

 

.index_type_horizontal .thumbnail_post {
  width: 192px;
  height: 192px;
  margin-right: 24px;
  background-size: contain; /*이미지 자동 크기 조정*/
}

 

썸네일 이미지가 잘려서 표시된 모습

썸네일 이미지가 완전히 표시된 모습

 

 

출처: https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images

 

 

10. 상단 홈 화면 이동 링크 구역 변경

기존에는 홈 화면 링크 클릭 범위가 화면 너비의 70%였는데, 모바일에서는 검색 버튼을 누르려다가 홈 화면으로 이동되는 불상사가 일어나지 않을까 싶어서 70%에서 40%로 변경하였다.

 

.inner_header .logo {
  display: flex;
  -ms-display: flexbox;
  /* IE 10 */
  display: -webkit-flex;
  width: 40%; /* 40%로 변경 */
  height: 100%;
  margin: 0 auto;
  flex-direction: column;
  justify-content: center;
}

 

11. 상단 홈 타이틀과 메뉴, 검색 아이콘 수평 맞추기

모바일 버전에서는 묘하게 상단 홈 타이틀과 메뉴, 검색 아이콘의 수평이 맞지 않다. 수치적으로 수평을 맞추고 싶었지만, 방법이 생각나지 않아서 margin-top을 -25에서 -18로 조정하는 것으로 마무리 지었다.

 

.inner_header .btn_menu, .inner_header .btn_search {
  position: absolute;
  display: block;
  top: 50%;
  width: 50px;
  height: 50px;
  margin-top: -18px; /* -18로 수정 */
  background: none;
  line-height: 0;
  color: #000;
  cursor: pointer;
  outline: none;
}

 

수동으로 수평을 맞추는 모습

 

12. 모바일 웹 화면에서 About Me 제거

제작자의 실수인지 아니면 의도한 것인지는 잘 모르겠지만, 모바일 버전에서의 메뉴는 PC버전에서의 메뉴에 존재하지 않는 About me 라는 블로그 소개 공간이 생긴다. 블로그 소개를 사용하지 않아서 해당 구문을 주석처리하였다.

 

<!-- about_me -->
<!--주석 처리
	<div class="about_me_mobile">
		<div class="box_sidebar about_me">
			<h3 class="title_sidebar">ABOUT ME</h3>
			<p class="text_about">-</p>
		</div>
	</div>
-->

 

오늘은 스킨을 바꾼 기념으로 이 정도까지 수정하고, 나중에 틈틈이 수정을 해 나가 봐야겠다.

 

여담

스킨을 수정하면서 티스토리가 html/css 수정 기능을 잘 제공해줘서 참 다행이라는 생각이 들었다. 어떻게 보면 티스토리의 최고 강점 중 하나인 것 같다.

 

파이어폭스에서 방문 기록 일자를 확인하는 방법은 Ctrl + H을 눌려서 확인하는 것이 아니라, 라이브러리의 방문 기록에서 열 설정에서 가장 최근 방문 일자를 클릭해야 했다. 방문 시간 정도는 Ctrl + H를 눌려서 확인할 수 있었으면 더 좋았을 탠데, 아쉽다.

 

파이어폭스 라이브러리에서 방문 시간대를 확인하는 모습