Web 6일차 1(선생님과 함께하는 Oven clone page)

카카오 오븐은 부트스트랩을 토대로 만들어진 베타버전

우리는 노가다 중

혼자만들때는 더 노가다였다.

 

 <div class="row">
            <ul class="nav-stacked">
                <li class="nav-stacked-list active-list">나의 프로젝트</li>
                <li class="nav-stacked-list">나에게 공유된 프로젝트</li>
            </ul>
            <div class="project-main">
                <div class="project-action">
                    <button class="btn btn-default">모두 선택</button>
                    <button class="btn btn-primary"><i class="fa-solid fa-magnifying-glass-plus"></i>새로운 프로젝트 만들기</button>
                </div>
                <div class="project-list-wrapper">

                </div>
            </div>            
        </div>
    </main>

1교시

.row{
    display: flex; /**/
}

.nav-stacked{
    margin: 0;
    padding: 0px 15px 0px 0px;
    width: 277.5px;
    list-style-type: none;
    
}

.nav-stacked-list{
    margin-bottom: 1px;
    border-radius: 2px;
    padding: 10px 15px;
    width: 262.5px;
    height: 40px;

    cursor: pointer;
}

.nav-stacked-list:not([class *= active-list]):hover{
    background-color: #eee;
}

.active-list{
    background-color: #3498db;
    color: #fff;
}