카테고리 없음html + css 사이드바 만들기(2) 사이드바

사이드바 만들기

 <div class="sidebar">

            <div class="my-page-div">

                <div class="my-page-a">

                    <div class="member-id-div">

                        <p>asdasdasdasda님</p>

                        <p>My Page</p>

                     

                    </div>

                <div>

                    <a href="">개인 정보 변경</a>

                </div>

                <div>

                    <a href="">식당 예약 확인</a>

                </div>

                <div>

                    <a href="">도시락 예약 확인</a>

                </div>

                <div>

                    <a href="">메인으로</a>

                </div>

                <div>

                    <a href="">로그아웃</a>

                </div>

              </div>

            </div>

        </div>

 

        /*사이드 바 자리*/

        div[class="sidebar"]{

            width: 300px;

            height: 100%;

            background: #222;

            position: fixed;

            top: 0px;

            left: -300px;

            z-index: 1;

            transition: all .35s;

            display: flex;

            justify-content: center;

            align-items: center;

        }