이번 포스팅에서는 만들고있는 티스토리 상단바, 즉 네비게이션 바를 좀 더 섬세하게 다듬어보는 작업을 해보았다. 특히, 필자의 경우 이쁜 네온사인같은 블로그 간판을 만들고 싶었기 때문에, 포토샵으로 작업한 이미지를 업로드하여 진행했다.
문제는, 사람들이 보는 브라우져 창의 크기가 변해버리면, 이미지가 그에 맞게 자동으로 축소되거나, 사라지는 등의 효과가 있어야한다는 점이다. 그게 없이 이미지 크기가 그저 일정하기만 하다면, 웹 창 크기가 줄었을 때 보일 내 블로그 모습이 안봐도 눈에 뻔할만큼 기괴할 것이리라...
티스토리 상단바를 브라우져 창 크기에 따라 조절하기
먼저, 다양한 상단바를 제공하고 있는 부트스트랩을 이용한다. 지금까지 필자가 구현했던 코드와 웹페이지의 모습은 아래와 같다.
보다시피, 티스토리 스킨경로에 업로드한 'logo_2.png' 라는 이미지를 불러오고, 해당 이미지를 navbar 이라는 부트스트랩 클래스에 넣어준 모습이다. Navbar는 여러가지 형형태로 부트스트랩에서 제공을 하는데, 간략하게 설명하면 다음과 같다.
부트스트랩 NAVBAR 코드
sticky-top: 스크롤에 관계없이 상단바가 늘 위에 보이도록 함.
justify-content-center: 상단바에 들어가는 내용이 가운데정렬되도록 함.
이러한 이유로, 필자가 스킨연습용으로 만든 블로그에 들어가보면 네비게이션바가 항상 위에 있고, 또 가운데 이미지가 정렬되어 있는 것이다.
필자의 연습용 블로그 -->> doony-skin.tistory.com
여기에 추가로 필자가 구현하고자 하는 기능은 다음과 같다.
1. 카테고리 기능을 추가한다.
즉, 지금 블로그의 모습은 위 그림처럼, 어떤 카테고리로 이동하고 싶어도 할 수가 없다. 왜냐?! 아예 카테고리 코드 자체가 현재 없기 때문이다. 고로 카테고리 코드를 넣어서 블로그 방문자가 이동할 수 있게하고자 한다. 단, 모든 카테고리가 아닌 필자가 원하는 카테고리만 따로 빼서 넣고자 한다. (모든 카테고리에 대한 것은 블로그 최하단에 넣으면 될 것 같다.
2. 카테고리는 버튼 하나를 클릭하면 주르륵 나타난다.
즉, 모든 카테고리가 다 보여지는게 아니라, 어떤 버튼을 눌렀을 때에만 카테고리가 뜨도록 한다. 상단바에 모든 카테고리를 다 넣으면 너무 지저분할 것 같다. 사실 지금 18년 4월 시점에 필자가 쓰고 있는 이 블로그 스킨도 상단바에 카테고리가 있긴하지만... 보다 심플한 것으로 진행하고자 한다.
어려워보이지만, 사실 굉장히 쉽다. 부트스트랩에서 일단 잘 찾아보면, 아래와 같은 기능이 있다.
http://getbootstrap.com/docs/4.0/components/dropdowns/
일단 Dropdown 이라는 기능이다. 위 예제에서 보듯, 화살표를 누르면 항목에 대한 카테고리들이 나열되는 식이다. (홈페이지 접속하여 예시를 보면 쉽게 이해가 갈듯) 보다시피 색상도 다양하게 원하는대로 구현이 가능하다. 일단 아래 코드를 살펴보도록 하자.
구현된 모습에서 보다시피, 좌측상단에 드랍다운 형식의 버튼이 들어가있고, 화살표를 누르면 내가 지정해놓은 4가지 메뉴가 뜨게 된다. 또한, 네온사인의 블로그 배너는 가운데정렬되어 나타나게 설정하였다.
버튼에 대한 코드는 그대로 복붙만 하였고, 다만 같은 navbar 클래스에, 하나는 좌로 정렬, 하나는 가운데정렬되어야했기 때문에 div를 나눠서 관리하였다. 부트스트랩의 꽃이 grid라는 말을 들었는데, 바로 여기서 써먹을 수 있다.
즉, grid라는 것은 레이아웃 배치다. 어디다 정렬할지, 어느 위치에 어떤 걸 넣을지 쉽게 설정할 수 있다는 점이 아주 유용하다. 코드에 대해서 간단하게 구간을 나눠보자면 다음과 같다.
일단 가장 위의 <nav class>에 의해 모든 것이 묶여있다. 이것은 당연하다! 상단바에 한정된 코드들이니 말이다.
그 안에 1, 2, 3개의 div으로 이루어져 있다. 첫번째는 버튼이 들어가는 구역이고, col-1만큼의 크기로 한정지어놓았다. 두번째는 블로그 배너인 이미지가 들어갈 부분이고, col-auto로 지정하여 크기가 가변적이게 해놓았다. 마지막으로 세번째는 첫번째 구역과 동일한 크기로 지정해놓았다. (사실 두번째의 auto는 적용되는건지 잘 모르겠다만, 아무튼 현재는 비슷하게 적용되는 것 같아 그대로 두었다. 부트스트랩 홈페이지 상에는 col의 크기를 지정한 후에 auto를 붙여서 가변적인 크기를 구현할 수 있다고 되어있긴 하다만, 너무 복잡해지니 그냥 참고로만!)
단, 여기서도 문제가 발생하는데, 바로 이미지가 가운데정렬되기 위해서는 css에서의 편집이 필요하다는 점이다. 아마 html 상으로 바로 구현도 가능할 것 같다만은, 추후 이미지 크기 조절을 위해 미리 css로 가운데정렬 구현을 하기 위해 코드를 미리 넣어보았다.
이미지가 들어가있는 클래스는 위에서 보다시피, "navbar-brand" 라는 클래스이다. 따라서 css에 아래와 같은 클래스를 넣어보도록 하자.
이미지가 가운데 정렬된 모습을 볼 수 있다.
이렇게까지 하면, 이번 포스팅에서 구현하고자 했던 기능 3가지 중 두번째 것이 완료되었다. 이제는 만들어놓은 버튼에, 티스토리 카테고리를 넣어보도록 하자.
티스토리 카테고리를 버튼에 넣기
가이드에 의하면 카테고리 치환자는 다음과 같다.
,
해당 치환자를 버튼 항목에 넣어보면, 생각보다 예쁘지 않은 광경을 목격하게 되는데... 전체 카테고리가 나오긴하는데, 문제는 정말 다 나와버린다는 점이다. 필자는 내 블로그에서 노출되길 바라는 카테고리 항목만 집어넣고 싶기 때문에, 치환자를 사용하지 않았다.
그렇다면? 좀 번거롭지만, 다이렉트로 카테고리 링크를 따서 하나하나 버튼 항목에 넣어주기로 하였다. 방법은 매우쉽다. 현재 버튼의 각각의 항목에 카테고리 링크만 걸어주면 된다.
먼저, 각각의 버튼 항목의 <href> 안에는 카테고리에 해당하는 링크를 넣어준다. 여기서 말하는 링크란, 실제 웹상에서 블로그 카테고리에 접속했을 때 뜨는 주소이다. 그대로 복사붙여넣기 해주면 된다. 그리고 그 옆에 한글로 써진 부분에, 원하는 카테고리 명으로 입력만 해주면 되는 것이다.
어쩌면, 전체 카테고리를 예쁘게 다듬고 수정하여 버튼에 넣는 것보다 더 간단한 방법일 수도 있겠다. 아니 훨씬 간단한 것이 분명하다.
자 이렇게까지 했는데 문제가 생겼다. 바로 너무 안이쁘다는 것............ 그래서 처음에 잡았던 블로그 디자인을 다시 하기로 했다. 역시 디자인 비전공자는 웁니다.....
'Developer > 티스토리 스킨 제작' 카테고리의 다른 글
| #12. 티스토리 본문 하단 바 만들기 (HTML/CSS) (242) | 2018.04.16 |
|---|---|
| #11. 티스토리 스킨 상단바 만들기 2탄 (238) | 2018.04.11 |
| #9. 티스토리 본문 크기 제한 / 좌우 여백 주는 방법 (248) | 2018.04.05 |
| #8. 티스토리 본문 글자 크기 / 글씨체 바꾸는 방법 (597) | 2018.04.01 |
| #7. 티스토리 스킨 업로드하는 방법 (598) | 2018.03.30 |
댓글