[HTML/CSS] 사이드바 세로 메뉴바 Navbar 세로버전 글씨 겹침 해결

Web 개발 프로젝트 도중 좌측 세로 메뉴바를 추가 해야했다.

 

기본적인 틀을 오픈소스에서 빌려 세로 메뉴바를 추가 해주었다.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>

<style>
    /* 사이드바 래퍼 스타일 */
    #page-wrapper {
        padding-left: 250px;
    }

    #sidebar-wrapper {
        position: fixed;
        width: 250px;
        height: 100%;
        margin-left: -250px;
        background: whitesmoke;
        overflow-x: hidden;
        overflow-y: auto;
    }

    #page-content-wrapper {
        width: 100%;
        padding: 20px;
    }
    /* 사이드바 스타일 */

    .sidebar-nav {
        width: 250px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .sidebar-nav li {
        text-indent: 1.5em;
        line-height: 2.8em;
    }

    .sidebar-nav li a {
        display: block;
        text-decoration: none;
        color: #999;
    }

    .sidebar-nav li a:hover {
        color: black;
        background: rgba(255, 255, 255, 0.2);
    }

    .sidebar-nav > .sidebar-brand {
        font-size: 1.3em;
        line-height: 3em;
    }

</style>

<div id="page-wrapper">
    <!-- 사이드바 -->
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li class="sidebar-brand">
                <a href="#">Home</a>
            </li>
            <li><a href="#">메뉴 1</a></li>
            <li><a href="#">메뉴 2</a></li>
            <li><a href="#">메뉴 3</a></li>
            <li><a href="#">메뉴 4</a></li>
            <li><a href="#">메뉴 5</a></li>
            <li><a href="#">메뉴 6</a></li>
            <li><a href="#">메뉴 7</a></li>
            <li><a href="#">메뉴 8</a></li>
            <li><a href="#">메뉴 9</a></li>
        </ul>
    </div>
</div>

결과는 아래와 같았다.

기존에 만들어둔 화면과 세로 Navbar(세로 메뉴바)가 겹쳐서 나타났다.

---

해결을 위한 오답1.

메인화면 스타일에 바디태그가 왼쪽으로 이동하도록 적용해준다.

body{
    padding-left: 250px;
}

결과는 아래와 같았다.

겹쳐진 부분이 모두 하나로 250px 옆으로 이동해버렸다.

 

---

해결 완료 해법

div 태그의 style 태그에 padding을 추가해준다.

<div style="margin: 25px; padding-left: 250px">

---

footer 부분도 해결해야 하지만 1차원적으로 해결하고자 하는 부분은 해결!