[CSS] 예쁜 디자인으로 제작된 애니메이션 사이드바(sidebar) 소개

이번시간에는 제 블로그에 사용중인 사이드바를 직접 만들어보겠습니다.

현재 제 블로그에는 70개가 넘는 게시물이 있습니다.

이 포스팅들을 한 곳에서 관리하고자 사이드바를 제작해봤으며 자바스크립트를 사용해 하위옵션으로 클릭되게 설계했습니다.

사이드바를 제작하니 게시물이 많아져도 관리하기 편리해졌습니다.

그럼 지금부터 코드 리뷰를 시작하겠습니다.

1. 블로그 사이드바 만들기 - HTML

2. 블로그 사이드바 만들기 - CSS

3. 블로그 사이드바 만들기 - JavaScript

4. 블로그 사이드바 만들기 - 결과화면

1. 블로그 사이드바 만들기 - HTML

HTML에는 for문과 if문을 사용해 원하는 게시물이 나오도록 설정해야 합니다.

총 2개의 영역을 잡아 sidebar 클래스를 제작해봤습니다.

sidebar_count는 블로그 정보를 입력했고 sidebar_position는 메뉴 영역으로 a태그를 모았습니다.

HTML 코드

<div class="sidebar_main sidebar_background">
    <!-- 블로그 정보 -->
    <div class="sidebar_count">
        <div>영화 & IT 개인 블로그</div>
        <div>총 게시글 <span>: 1개</span></div>
        <div>전체 방문자 <span>: 1명</span></div>
        <div>블로그 제작 <span>: Django 3.11.4</span></div>
    </div>

    <!-- 블로그 메뉴 -->
    <div class="sidebar_position">
        <div>
            <a class="sidebar_tag" onclick="toggleSidebarFor(event)">&#43; 큰 제목</a>
            <div class="sidebar_js">
                <a class="sidebar_tag_one" onclick="toggleSidebarFor(event)">&#43; 작은 제목 1</a>
                <div class="sidebar_js">
                    <a href="#" class="sidebar_for">
                        &raquo; 1번 링크
                    </a>
                    <a href="#" class="sidebar_for">
                        &raquo; 2번 링크
                    </a>
                    <a href="#" class="sidebar_for">
                        &raquo; 3번 링크
                    </a>
                </div>
                <a class="sidebar_tag_one" onclick="toggleSidebarFor(event)">&#43; 작은 제목 2</a>
                <div class="sidebar_js">
                    <a href="#" class="sidebar_for">
                        &raquo; 1번 링크
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

sidebar_count는 제일 최상단 목록으로 블로그에 기본 정보가 들어있는 공간입니다.

sidebar_position은 카테고리별로 게시글들을 분류시키고자 큰 틀을 잡았습니다.

sidebar_js로 자바스크립트를 사용해서 글자 클릭 시 메뉴가 나오도록 설정했습니다.

2. 블로그 사이드바 만들기 - CSS

반응형으로 제작하려고 했으나 영역낭비가 심했습니다.

그래서 모바일버전에는 안보이게 미디어 쿼리를 설정했습니다.

코드가 길어서 총 2개로 나눴습니다.

1. CSS 코드

.sidebar_main {
    position: relative;
    box-shadow: 5px 5px 5px rgba(10, 10, 10, 0.1), inset 0px -5px 10px rgba(10, 10, 10, 0.1);
    border-left: 1px solid rgb(212, 200, 200);
    padding-bottom: 3rem;
}

.sidebar_tag {
    cursor: pointer;
    display: block;
    color: rgb(70, 67, 67);
    padding-top: 1.5rem;
    text-decoration: none;
    font-size: 1.1rem;
    border-bottom: 1px solid rgb(223, 219, 219);
    padding-bottom: 0.3rem;
    text-align: left;
    font-weight: bold;
}

.sidebar_tag:first-child {
    padding-top: 0.5rem;
}

.sidebar_tag_one {
    cursor: pointer;
    display: block;
    color: rgb(70, 67, 67);
    padding-top: 1rem;
    padding-left: 0.5rem;
    text-decoration: none;
    font-size: 0.9rem;
    border-bottom: 1px solid rgb(223, 219, 219);
    padding-bottom: 0.3rem;
    text-align: left;
    font-weight: bold;
}

.sidebar_for {
    display: block;
    padding-left: 0.5rem;
    color: rgb(70, 67, 67);
    padding-top: 0.8rem;
    text-decoration: none;
    font-size: 0.85rem;
    white-space: nowrap; /* 줄 바꿈 방지 */
    overflow: hidden; /* 넘치는 내용 감춤 */
    text-overflow: ellipsis;
}

.sidebar_js {
    display: none;
}

sidebar_main은 전체적인 영역으로 position 설정과 배경색, 그림자 설정을 했습니다.

sidebar_tag는 메뉴바 제일 최상단 영역으로 제목이 잘보이도록 폰트 설정과 데코레이션을 했습니다.

sidebar_tag_one은 메뉴바 두번째 영역으로 조금 더 작은 폰트 설정을 했습니다.

sidebar_for은 a태그로 연결되는 포스팅들 글 제목입니다.

sidebar_js는 display: none;으로 해놓고 자바스크립트를 사용해 block으로 교체 할 겁니다.

2. CSS 코드

.sidebar_for:hover {
    translate: 0.5rem;
    text-decoration: underline;
    white-space: normal;
    overflow: visible;
}

.bar_check {
    color: goldenrod;
    font-weight: 600;
    white-space: normal;
    overflow: visible;
}

.sidebar_count {
    padding-top: 1.5rem;
    text-align: right;
}

.sidebar_count > div:first-child {
    font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgb(223, 219, 219);
}

.sidebar_count div {
    color: rgb(70, 67, 67);
    font-size: 0.85rem;
    font-weight: 500;
    padding-bottom: 0.5rem;
}

.sidebar_position {
    position: sticky;
    top: 0.5rem;
    bottom: 1rem;
    padding: 0.6rem 0.5rem 0rem 0rem;
    height: 100vh;
    overflow: auto;
}

.sidebar_position::-webkit-scrollbar {
    width: 6px;
}

.sidebar_position::-webkit-scrollbar-thumb {
    background-color: rgb(222, 221, 221);
    border-radius: 4px;
}

.sidebar_background {
    background-color: #ffffff;
}

@media (max-width: 992px) {
    .sidebar_main {
        display: none;
    }
}

bar_check는 현재 들어와있는 포스팅 제목을 알려주기 위해 색깔을 넣어봤습니다.

sidebar_count는 사이드바 목록 설정값으로 first-child를 이용해 기본적인 폰트 설정을 진행했습니다.

sidebar_position은 메뉴바 영역으로 글자가 한 줄이상 넘치지 않게 설정했습니다.

-webkit-scrollbar를 이용해 스크롤이 되도록 적용시켰고 position을 sticky으로 입력했습니다.

이제 사이드바가 화면에 따라 움직일 겁니다.

그리고 미디어 쿼리를 이용해 992px 미만은 안보이게 만들었습니다.

3. 블로그 사이드바 만들기 - JavaScript

마지막으로 자바스크립트를 설정해야합니다.

영역별로 버튼을 클릭하면 보였다가 다시 클릭하면 안보이도록 이벤트 함수를 구현했습니다.

display에 block과 none이 교차하도록 설정했습니다.

JavaScript 코드

const sidebarTags = document.getElementsByClassName('sidebar_tag');
for (let i = 0; i < sidebarTags.length; i++) {
    sidebarTags[i].addEventListener('click', function() {
        const sidebarJS = this.nextElementSibling;
        if (sidebarJS.style.display === 'block') {
            sidebarJS.style.display = 'none';
        } else {
            sidebarJS.style.display = 'block';
        }
    });
}

const sidebarTagones = document.getElementsByClassName('sidebar_tag_one');
for (let i = 0; i < sidebarTagones.length; i++) {
    sidebarTagones[i].addEventListener('click', function() {
        const sidebarJS = this.nextElementSibling;
        if (sidebarJS.style.display === 'block') {
            sidebarJS.style.display = 'none';
        } else {
            sidebarJS.style.display = 'block';
        }
    });
}

아까 만들어 둔 sidebar_js를 위의 코드에서 사용합니다.

sidebar_tag를 클래스 변수로 선언합니다.

for문으로 해당 변수가 addEventListener에 클릭되었을 때 sidebar_js가 작동되도록 만들어줬습니다.

마지막으로 코드에는 대제목과 소제목 2개가 있으니 자바스크립트도 2개로 만들어주면 됩니다.

4. 블로그 사이드바 만들기 - 결과화면

결과물을 보시면 플랫폼 블로그 사이드바랑 비슷한 형태로 만들어졌습니다.

포스팅을 내릴 때 해당 사이드바가 position : sticky이 적용돼 똑같이 내려오도록 만들었기에 더 자연스러운 모션을 줄 수 있습니다.

만약 구글 에드센스를 가입했다면 원하는 위치에 디스플레이 사각형 광고를 넣을 수 있습니다.

1. 블로그 사이드바 PC 버전

2. 블로그 사이드바 테블릿 버전

글을 마치며 개인 블로그에 사이드바를 제작해보고 포스팅을 한 곳에서 관리해봤습니다.

또한 모션 효과를 이용해 자연스러운 움직임을 만들면서 자바스크립트로 이벤트 함수를 구현했습니다.