Flatinum 스킨 네비게이션바 크기 줄이기

안녕하세요. 최근에 스킨을 바꿨는데요. Flatinum이라는 이름의 스킨으로 변경을 했습니다.

Flatinum 스킨은 전형적인 2단형 스킨으로써 사이드바가 1개 존재하기 때문에 사이드바를 활용하여 다양한 기능들을 넣을수 있다는 점이 매우 큰 장점입니다. 디자인도 상당히 깔끔하고 기본 폰트도 깔끔하여 그냥 써도 전혀 무리 없을 만큼 뛰어납니다만 그래도 초기상태로만 보았을때 이것저것 뜯어고치고 싶다라는 생각을 하는 블로거 분들이 많을것입니다.

저 또한 그렇기 때문에 HTML 초보이지만 이래저래 뜯어고치면서 바꾸었는데요. 첫번째는 네비게이션 바에 대해서 다루어볼까 합니다.

▲ 처음 네비게이션 바를 보았을때 크기가 좀 크다... 라는 생각을 하였는데요. 특히나 저는 노트북으로 포스팅을 하고 있는데 해상도가 1366 *768 밖에 안되다 보니 한 화면안에 많은 글이 들어오지 않습니다. 

때문에 저 네비게이션바가 더욱더 크게 다가왔는데요. 이것을 최대한 줄여서 적당한 크기로 만들어볼까 합니다.

▲ 블로그 관리 -> HTML/CSS 편집 -> CSS 에 들어가셔서 "nav.navbar-inverse.shrink" 검색을 해주세요.

그럼 위와 같은 코드가 나오게 됩니다. padding 값이 설정되어 있을텐데요. 이 값만 바꾸게 되면 네비게이션바 크기를 자유자재로 조절하실수가 있습니다.

▲ padding의 첫번째 값을 각각 바꾸어 주면 됩니다. 저 같은 경우는 28px -> 15px, 35px -> 10px로 바꾸어줬습니다.

이 정도로 값을 줄여주니 딱 로고 사이즈 만큼만 네비게이션 높이가 줄어들어 글을 덜 가리게 되어서 이렇게 했습니다. 값은 자유자재로 주시면 됩니다. 더 늘리셔도 되고 더 줄이셔도 됩니다.

▲ 수정하고 난 결과입니다. 네비게이션 바가 눈에 띄게 상당히 줄었죠? 이제 글을 덜 가리게 되어 가독성도 좋아지는 결과를 가져왔다고 생각합니다.

현재도 Flatinum 스킨을 수정중에 있습니다.(제작자 분이 재수정 및 저작권 남긴다는 조건하에 재배포도 허락하셨습니다.) HTML 초보라서 많이 부족하지만 좀더 Flatinum 스킨을 다듬어서 저만의 스킨으로 만들어보며 그 흔적들을 모두 Tistory에 담을까 합니다. 이것으로 포스팅 마치겠습니다.