[1일 1코딩][HTML-CSS] 공지사항의 검색

 

마켓컬리 UI 본따와서 공지사항 만들기

 

 

HTML

<div class="boardSearchBox">
        <div>
            <span>검색어</span>
            <ul>
                <li><input type="checkbox">이름</li>
                <li><input type="checkbox">제목</li>
                <li><input type="checkbox">내용</li>
            </ul>
        </div>
        <div class="searchBar">
            <input type="search">
            <input type="image" name="submit" src="search.png">
        </div>
    </div>
</div>

 

CSS

html, body {
    box-sizing: border-box;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.main {
    width: 100%;
    display: flex;
    justify-content: center;
    font-family:'Noto Sans KR', sans-serif;
}

.main .infoContainer {
    flex-basis: 80%;
    height: 800px;
    background-color: white;
}

.titleArea {
    display: flex;
    /* justify-content: center; */
    gap: 3%; 
    align-items: center;
    padding: 2% 4%;
}

.boardSearchBox {
    /* justify-content의 letf,right,center 위치 외에 세부조정하고 싶으면,
     justify-content: space-between으로 공백을 줘서 조정하면 됨*/
    display: flex;
    justify-content: space-between; /* space-between의 디폴트 범위지정값은 나머지 텍스트나 범위를 제외한 전부를 먼저 준다 */
    align-items: center;
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid #FCD2D1;
}

.boardSearchBox > div {
    display: flex;
    gap: 10px;
}
.boardSearchBox span {
    font-size: x-small;
}

.boardSearchBox > div > ul {
    display: flex;
    /* justify-content: space-between;  */
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 10px;
    font-size: smaller;
}