[티스토리 반응형 스킨 편집] 반응형 커스터마이징(상단 메뉴, 크기 변경 수정)

* 이전글

2016/05/09 - [티스토리 반응형 스킨 편집] 페이스북 좋아요 버튼, 구글+1버튼 넣기

* 시작

: 이번에는 먼저 반응형 스킨을 하나 선택해서 기존의 반응형으로 동작하고 있는 부분 중에서 마음에 들지 않는 부분들을 수정할 것이다. 가장 먼저 일단 반응형 스킨을 하나 선택할 것인데, 아래의 반응형 스킨이 깔끔한 것이 마음에 들어서 선택하였다.

: 마음에 들었던 점은 스킨에서 메뉴가 오른쪽에 있다는 점이 제일 컸고, 하얀색 바탕을 중요하게 생각해서 좋은 스킨이라고 생각하여 선택하였다. 그런데 전체적으로 디자인은 내 마음에 들지 않아서 이제부터 편집, 커스터마이징을 해보려고 한다.

* 상단바 수정

: 스킨을 일단 적용해보면 가장 마음에 들지 않는 것은 상단에 크게 떠있는 이미지이다. 혹자는 이러한 디자인을 좋아할지도 모르지만, 개발자의 입장에서 많은 이미지, 그것도 큰 이미지는 별로 좋아하지 않는다. 아래는 일단 초기에 적용된 모습이다.

* 반응형 상단바 수정

: 개인적으로 이러한 디자인은 정말 안 좋아한다. 특히 이미지의 용량이 너무 크기 때문에 모바일은 전혀 고려하지 않고 있다고 볼 수 있다. 용량을 보면 기겁할수도 있을 것이다.

: 반응형이면 모바일도 고려를 해주어야 하는데, 사이트에 접속하게 되면 여지없이 5MB를 순수 이미지로만 다운로드 받아야 한다. 이 부분은 예시로 해놓은 것이기는 해도 처음에 굳이 이미지를 많이 다운로드 받게 할 필요는 없을 것이다. 따라서 이부분은 삭제할 것이다. 먼저 class="carousel"가 있는 <div>는 전부 삭제하였다.

: 물론 무거운 이미지를 삭제하는게 더욱더 중요한 이유이기는 했지만, 삭제해주니 조금 더 깔끔해진 것 같다. 그런데 상단 메뉴 왼쪽 위를 보면 이미지 배너가 있고, 겹쳐지게 되어있는 것을 확인할 수 있다. 그리고 반응형 화면으로 보면 항상 상단에 떠있는 것을 확인할 수 있다. 

: 이 부분을 항상 떠있는 것이 아니라 페이지의 맨위에만 있도록 하고 맨위에 있을 때에도 공간과 배경이 있게 수정할 것이다. 일반 반응형으로 상단 메뉴가 변하는 것을 삭제하기 위해 아래의 스크립트를 삭제할 것이다.

<script>
$(window).scroll(function() {
  if ($(document).scrollTop() > 50) {
    $('nav').addClass('shrink');
  } else {
    $('nav').removeClass('shrink');
  }
});
</script>

: 필요 없는 스크립트는 최소화하려고 한다. 나중에 성능 최적화할 때에도 불필요한 스크립트는 다 삭제할 것이지만, 각 스크립트의 역할을 분명히 알고 삭제하는 것이 좋으므로, 일단 반응형 상단 메뉴와 관련된 위의 스크립트를 먼저 지웠다. 그러면 이제 반응형으로 변경 되지 않고 그냥 항상 떠있게 되었다. 그리고 지금은 흰색 바탕으로 되어있는데, 이제 #header는 검은색 바탕색으로 유지하고 싶어서 아래의 CSS를 추가하였다.

#header {
    background-color: black;
}

: 그리고 왼쪽 상단의 이미지를 그냥 블로그 이름으로 바꾸려면 윗줄의 소스를 아랫줄처럼 수정하였다.

<a href="https://unikys.tistory.com/" title="All-round programmer" class="navbar-brand"><img src="./images/logo_shrink.png" width="170px"></a>
<a href="https://unikys.tistory.com/" title="All-round programmer" class="navbar-brand">All-round programmer</a>

: 이렇게 수정하고 화면을 보니 상단 메뉴의 아래에 약간 보기 싫게 추가 공간이 있어서 아래와 같이 원래 15px가 있던 공간을 삭제하였다.

.navbar {
    margin-bottom: 0px;
}

 : 이렇게까지 수정하니 어느정도 마음에는 든다. 지금의 블로그 상태는 여기에 메뉴 HTML들을 더 추가한 상태이고, 어느 정도 마음에 든다.

: 그런데 문제는 화면이 작아지면 반응형으로 크기가 작아짐으로써 아래와 같이 화면이 아래로 밀리게 된다는 점이다. 이 부분에 대해서 수정하려고 한다.

: 이를 수정하기 위하여 반응형으로 사용하는 @media 의 스타일에 아래와 같이 메뉴의 가격을 줄이도록 수정하였다.

@media (min-width: 768px) and (max-width: 991px) {
	nav.navbar-inverse .navbar-nav > li > a {
		padding:30px 10px
	}
}

: 그러니 아래와 같이 잘 정리가 되었다.

: 이제 상단 메뉴는 페이지의 상단에 고정으로 박혀서 원래의 반응형처럼 항상 위에 떠있지 않게 되어 사용자들이 한번에 읽을 수 있는 글이 많아져서 사용자 경험을 살려주려고 하였고, 메뉴를 추가함으로써 약간 어긋났던 크기들을 수정하였다. 이제 상단 메뉴는 height만 조금 줄이는 등의 수정을 하면 될 것이다. 이렇게 상단 메뉴를 수정하고 블로그 첫페이지를 테터데스크로 설정을 했는데..

* 버그가 발생..

: 지금 블로그 상태에서는 테터데스크를 추가하니 상단의 More 버튼이 동작 안한다. bootstrap에서 사용하고 있는 jquery 라이브러리와 테터데스크에서 사용하고 있는 prototype 라이브러리간의 충돌 때문에 동작을 안하는데 이부분에 대해서 수정을 해야 한다. 어떻게 수정할지는 조금 고민해서 해야 할 것 같다.

* 진행 예정

2016/06/03 - [티스토리 스킨 편집] 사이드바 이미지 배너 넣기

- 테터데스크와 반응형 스킨의 충돌 해결

- 사이드바, 하단바의 위젯 변경/수정

- 글 템플릿 수정(소셜 플러그인 수정)

- 성능 최적화