Categories
[Github 블로그 리모델링] 6. 카테고리 추가
1. 카테고리를 추가한 이유
본인이 쓴 글에 관심이 있어할 다른 사람들이, 또 다른 글들을 검색할 여지를 주기 위해 카테고리 메뉴를 숨겨두려고 한다. 글을 읽을 때에는 가독성에 큰 영향을 주지 않다가, 갑자기 이 블로그가 궁금해져 눈길을 다른 곳으로 돌렸을 때, 내 블로그가 어떤 블로그인지를 어필하고, 더욱더 궁금증을 자극시키기 위해 카테고리 메뉴가 필요하다 생각했다.
더 상세하게, 카테고리 메뉴 내에서는 본인이 어떠한 글들을 썼는지 분류한 일종의 리스트와, 직관적으로 이해하기 쉬운 숏 컷 링크 아이콘 (프로필, 홈 링크로 이동할 수 있는 아이콘 등)을 넣고자 했다.
지금, 데스크탑 큰 화면에서 좌측 하단에 있는 » 기호를 눌러보자.
카테고리 메뉴는 일반적으로 넓지 않은 화면에서는 아예 접근할 수 없도록 했다. 축소화면일 때 다른 링크로 이동할 수 있는 날개 메뉴는 이전에 구축해두었다. 여기에는 프로필 및 홈 링크가 이미 있고, 안 그래도 좁은 화면에다가 카테고리 리스트들까지 끼워넣기에는 사람들이 이것들을 주의깊게 볼 지 의문이 들었다. 따라서 좁은 화면에서는 단순히 “내가 프로젝트나 다른 글들을 쓰고 있다”라는 것을 암시만 (즉 project, note, profile 링크만 남겨놔서) 해놓고, 하여금 사람들이 관심이 생겼을 때 그 링크들을 클릭하게끔 하였다 (전의 글 참고).
2. 카테고리 확장 버튼
먼저 카테고리를 확장할 수 있는 버튼 (큰 화면 기준 좌측 하단 ‘»’ 기호)를 추가했다.
<!--post.html-->
<div id="category-menu" class="category-before">
❯❯ <!-- 카테고리 확장 버튼, 즉 꺽쇠 기호-->
</div>
// custom-styles.scss
.category-menu {
text-align: left;
font-size: 20px;
color: $link-hover-color;
margin-left: 10%;
cursor: pointer;
user-select: none;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 0;
transition: 0.3s;
padding-bottom: 10px;
}
.category-menu:hover{
font-size: 23px;
transition: 0.3s;
}
해당 버튼이 있다는 것을 사용자가 인식하게 하기 위해, 사용자가 스크롤을 어느 정도 내렸을 때, 카테고리 메뉴 버튼이 드러나도록 다음과 같은 코드를 작성하였다.
<!--post.html-->
<script type=text/javascript>
$(document).ready(function(){
$("#category-menu").hide(); // 카테고리 버튼 숨김
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) { // 스크롤 내림
$('#category-menu').fadeIn();
}else {
$('#category-menu').fadeOut();
}
});
});
});
</script>
3. 카테고리 및 숏컷아이콘이 들어갈 박스 추가
먼저 다음과 같이, 카테고리 리스트가 들어갈 박스 태그를 정의하고, 원하는 텍스트 및 아이콘을 넣은 후에 scss까지 지정해준다.
<!--post.html-->
<div id="more-box">
<div id="category-text-box">
<h1 class="category-font">Categories</h1>
</div>
<div id="button-box">
<div id="close-category">
❮❮ <!--카테고리 닫기 버튼, 즉 꺽쇠 기호-->
</div>
<a href="/">
<div id="home-link-icon" href="/">
⌂ <!--홈 링크 숏컷 아이콘-->
</div>
</a>
<a href="/profile">
<div id="profile-link-icon" href="/profile">
⛾ <!--프로필 링크 숏컷 아이콘-->
</div>
</a>
</div>
</div>
// custom-styles.scss
#more-box {
background-color: black;
height: 100%;
left: -25%; // 카테고리 확장 버튼을 누르기 전까지는 화면의 바깥에 숨겨져 있도록 한다.
z-index: 100;
top: 0;
position: fixed;
width: 24.9%;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
#button-box{
height: 45px;
}
4. 각 버튼 별 동작 설정
카테고리 리스트 및 숏컷아이콘 버튼에 대한 scss는 일부러 설정해놓지 않았다. 카테고리 확장 버튼을 누른 후에 more-box 내에 보이도록 해야 한다.
코드가 살짝 복잡한데, 본인이 설정한 로직 별 코드 및 설명을 작성해두었으니 천천히 읽어보자. 아래 코드가 반드시 모든 개발자에게 반드시 작동하는 코드가 아니니, 반드시 한 줄 한 줄 씩 작성해가며 실제로 작동하는지를 확인해보시는 것을 추천한다.
addClass()
사용자가 만약 카테고리 확장 버튼 (좌측 하단 ‘»’ 기호)를 누를 경우 카테고리 박스 (#more-box)에는 ‘expand-box’라는 클래스가 추가된다. 이때 .expand-box를 지정하는 scss가 작동하게 되고, 따라서 이전에 설정해 놓은 태그 (즉 #more-box, 위 코드 참고) 및 다른 태그 (.expand-box)에 대해서까지 scss가 작동하게 되어, 결과적으로는 카테고리 박스가 확장되게 된다.
유사한 방식으로, 확장 버튼을 누를 경우에는 카테고리 박스 뿐만 아니라 다른 버튼에도 특정 클래스 (.close-category, .profile-link-icon, .home-link-icon)가 추가되도록 하고, scss가 클래스에 맞춰 변화되도록 하였다. 즉 예를들어 close-category라는 id를 가지는 태그 (바로 위의 html 코드 참고)에, close-category라는 클래스가 추가되도록 하였다. 해당 클래스가 추가되어야만 scss가 작동하게 된다. #close-category가 아닌 .close-category 관련 scss만 작성했기 때문이다. 아래 scss 코드를 참조하자.
<!--post.html-->
<script type=text/javascript>
<!--스크립트 내 관련 없는 코드는 삭제했다.-->
$(function(){
$('#category-menu').click(function(){
$('#more-box').addClass('expand-box');
$('#close-category').addClass('close-category');
$('#profile-link-icon').addClass('profile-link-icon');
$('#home-link-icon').addClass('home-link-icon');
})
})
</script>
// custom-styles.scss
.expand-box{
background-color: grey;
-webkit-transform: translateX(100%); // X축 변경함으로써 박스 확장
-moz-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
z-index: 60;
}
.close-category{
-webkit-tap-highlight-color: transparent;
margin-left: 10%;
margin-bottom: 45px;
height: 50px;
cursor: pointer;
left: 0;
bottom: 0;
z-index: 80;
color: $link-hover-color;
position: fixed;
font-weight: bold;
font-size:45px;
transition: 0.8s;
}
// 이외 .profile-link-icon, .home-link-icon도 위 코드와 똑같이 작성했다. 다만 위치만 margin-left로 다르게 설정했다.
removeClass()
removeClass 함수는 addClass 함수와는 기능이 정반대이다. 즉 본인은 카테고리 닫힘버튼 (#close-category)을 클릭했을 때, 확장된 카테고리 박스 (.expand-box) 및 다른 숏컷아이콘 (.profile-link-icon, .home-link-icon, .close-category)가 사라지도록 아래와 같은 코드를 작성했다.
<!--post.html-->
<script type=text/javascript>
<!--스크립트 내 관련 없는 코드는 삭제했다.-->
$(function(){
$('#close-category').click(function(){
$('#more-box').removeClass('expand-box');
$('#close-category').removeClass('close-category');
$('#profile-link-icon').removeClass('profile-link-icon');
$('#home-link-icon').removeClass('home-link-icon');
})
})
5. 카테고리 리스트 추가
카테고리 리스트를 어떻게 추가했는지까지 여기에 적기는 글이 너무 길어진다. 또한 카테고리 리스트 관련해서는 본인이 모두 코드를 직접 작성한 것이 아니기 때문에, 참조한 블로그 링크를 남겨놓으려고 한다.