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

<pre> 태그 줄바꿈을 다 먹는다.

한줄로 쓴다. tab 하는데로 다 인식해버린다.

 

2교시 여기까지

 <div class="project-list-wrapper">
                    <div class="project-itm">
                        <div class="project-container">
                            <div class="item-header">
                                <input type="checkbox" class="item-check">
                                <div class="item-option-btn">
                                    <i class="fa-solid fa-gear"></i>
                                    <i class="fa-solid fa-caret-down"></i>
                                </div>
                            </div>
                            <div class="item-img-container">
                                <img src="/KakaoOven/images/thumb.png" alt="" style="width: 242px; height:162px;">
                            </div>
                            <div class="item-content">
                                <a href="#" class="itme-title">title</a>
                                <pre class="item-description">test</pre>
                                <div class="item-footer">
                                    <div class="project-time">
                                        <i class="fa-regular fa-clock"></i>2022-12-27
                                        <button class="btn btn-test"> 로그인없이 테스트 가능</button>
                                    </div>
                                </div>
                            </div>
                        </div>                        
                    </div>
                </div>
            </div>            
        </div>

css

.project-main{
    padding-left: 15px;
    width: 862.5px;
}

.project-action{
    display: flex;
    justify-content: space-between;
}
.btn{
    border: 1px solid #adadad;
    border-radius: 2px;
    padding: 6px 12px;
    height: 34px;

    cursor: pointer;
}

/* .btn:hover{
    background-color: #285e8e;
} */

.btn-default{
    background-color: white;
}

.btn-default:hover{
    background-color: #eee;
}

.btn-primary{
    color: white;
    background-color: #3498db;
}

.btn-primary:hover{
    background-color: #357ebd;
}

.project-list-wrapper{
    padding: 15px 0px;
}

.project-item{
    padding: 0px 15px;
}

.project-container{
    margin-bottom: 20px;
    border-radius: 4px;
    border: 1px solid #ddd;
    padding: 4px;
    width: 252.5px;
}

.item-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 4px;
}

.item-option-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #888;

    width: 35px;
    height: 22px;
}

.item-option-btn .fa-solid{
    font-size: 11px;
    margin: 0px 1px;
}

.item-option-btn:hover{
    border: 1px solid #ddd;
    border-radius: 2px;
    background-color: #e6e6e6;
}