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

2교시

 

위쪽정렬

<main class="container">
        <div class="page-header">
            <h1 class="pull-left">프로젝트 대쉬보드</h1>
            <div class="pull-right">
                <div  class="search-project">
                    <input type="text" class="form-control" placeholder="프로젝트 검색">
                    <i class="fa-solid fa-magnifying-glass"></i>                                        
                </div>
                <div class="">
                    <button class="btm change-viewtype">
                        <i class="fa-solid fa-list"></i>
                    </button>
                    <button class="btm change-viewtype active">
                        <i class="fa-solid fa-table-cells-large"></i>
                    </button>
                </div>
            </div>
        </div>
    </main>

css

*{
    box-sizing: border-box;
    font-size: 14px;
}

body{
    margin: 0;
}

a{
    text-decoration: none;
}
.container{
    margin: 0px auto;
    padding: 0px 15px;
    width: 1170px;
}

header {
    margin-bottom: 20px;
    border-bottom: 1px solid #e7e7e7;
    background-color: #383d40;
}

.navbar{
    display: flex;
    justify-content: space-between; /* 중앙을 비운다.*/
    align-items: center; /*가운데 정렬*/
    width: 100%; 
}

.brand-text{
    display: flex;
    padding: 15px;
    padding-left: 0;
    height: 50px;
}

.bt-left{
    line-height: 18px;
    font-size: 22px;
    font-weight: 500;
    color: white;
}
.bt-right{
    padding: 1px 3px;
    line-height: 9px;

    font-size: 11px;
    font-weight: 600;   
    color: #aaa;    
}

.nav{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.dropdown-toggle{
    display: flex;
    align-items: center; /*가운데 정렬*/
    color: white;
}
.profile-image{
    border-radius: 50%;
    width: 30px;
    height: 30px;
}

.dropdown-toggle .name{
    padding: 0px 10px;
}

.dropdown-toggle .fa-caret-down{
    font-size: 11px;
}

.pull-left{
    margin: 20px 0px 10px;
    font-size: 36px;
    font-weight: 400;
}