<template> <div class="box"> <p style="font-size:2rem; font-weight:800; margin-bottom:10px">기본 Search Bar</p> <div> <p style="font-size:1.5rem; font-weight:500; margin-bottom:10px">1번 디자인</p> <div> <!-- 여기서 부터 복사 --> <div class="flex-start"> <div class="search-bar flex"> <select name="" id=""> <option value="all">전체</option> </select> <input type="text" name="" id=""> </div> <button class="blue-btn small-btn">검색</button> </div> <!-- 여기서 부터 복사 --> <div class="flex-center"> <div class="search-bar flex"> <select name="" id=""> <option value="all">전체</option> </select> <input type="text" name="" id=""> </div> <button class="blue-btn small-btn">검색</button> </div> <!-- 여기서 부터 복사 --> <div class="flex-end"> <div class="search-bar flex"> <select name="" id=""> <option value="all">전체</option> </select> <input type="text" name="" id=""> </div> <button class="blue-btn small-btn">검색</button> </div> </div> </div> <div> <p style="font-size:1.5rem; font-weight:500; margin-bottom:10px">2번 디자인</p> <div> <!-- 여기서 부터 복사 --> <div class="flex-start"> <div class="block-searchbar flex"> <select name="" id=""> <option value="all">전체</option> </select> <input type="text" name="" id=""> </div> <button class="blue-btn small-btn">검색</button> </div> <!-- 여기서 부터 복사 --> <div class="flex-center"> <div class="block-searchbar flex"> <select name="" id=""> <option value="all">전체</option> </select> <input type="text" name="" id=""> </div> <button class="blue-btn small-btn">검색</button> </div> <!-- 여기서 부터 복사 --> <div class="flex-end"> <div class="block-searchbar flex"> <select name="" id=""> <option value="all">전체</option> </select> <input type="text" name="" id=""> </div> <button class="blue-btn small-btn">검색</button> </div> </div> </div> </div> <div class="box"> <p style="font-size:2rem; font-weight:800; margin-bottom:10px">날짜 추가 Search Bar</p> <div> <p style="font-size:1.5rem; font-weight:500; margin-bottom:10px">1번 디자인</p> <div> <!-- 여기서 부터 복사 --> <div class="flex-start"> <input type="date" name="" id="" data-placeholder="ex) 2024-01-01"> <span class="coupler">~</span> <input type="date" name="" id="" data-placeholder="ex) 2024-01-01"> <div class="search-bar flex"> <select name="" id=""> <option value="all">전체</option> </select> <input type="text" name="" id=""> </div> <button class="blue-btn small-btn">검색</button> </div> <!-- 여기서 부터 복사 --> <div class="flex-center"> <input type="date" name="" id="" data-placeholder="ex) 2024-01-01"> <span class="coupler">~</span> <input type="date" name="" id="" data-placeholder="ex) 2024-01-01"> <div class="search-bar flex"> <select name="" id=""> <option value="all">전체</option> </select> <input type="text" name="" id=""> </div> <button class="blue-btn small-btn">검색</button> </div> <!-- 여기서 부터 복사 --> <div class="flex-end"> <input type="date" name="" id="" data-placeholder="ex) 2024-01-01"> <span class="coupler">~</span> <input type="date" name="" id="" data-placeholder="ex) 2024-01-01"> <div class="search-bar flex"> <select name="" id=""> <option value="all">전체</option> </select> <input type="text" name="" id=""> </div> <button class="blue-btn small-btn">검색</button> </div> </div> </div> <div> <p style="font-size:1.5rem; font-weight:500; margin-bottom:10px">2번 디자인</p> <div> <!-- 여기서 부터 복사 --> <div class="flex-start"> <input type="date" name="" id="" data-placeholder="ex) 2024-01-01 ~ 2024-01-04"> <div class="block-searchbar flex"> <select name="" id=""> <option value="all">전체</option> </select> <input type="text" name="" id=""> </div> <button class="blue-btn small-btn">검색</button> </div> <!-- 여기서 부터 복사 --> <div class="flex-center"> <input type="date" name="" id="" data-placeholder="ex) 2024-01-01 ~ 2024-01-04"> <div class="block-searchbar flex"> <select name="" id=""> <option value="all">전체</option> </select> <input type="text" name="" id=""> </div> <button class="blue-btn small-btn">검색</button> </div> <!-- 여기서 부터 복사 --> <div class="flex-end"> <input type="date" name="" id="" data-placeholder="ex) 2024-01-01 ~ 2024-01-04"> <div class="block-searchbar flex"> <select name="" id=""> <option value="all">전체</option> </select> <input type="text" name="" id=""> </div> <button class="blue-btn small-btn">검색</button> </div> </div> </div> </div> <div class="box"> <p style="font-size:2rem; font-weight:800; margin-bottom:10px">체크 조건 추가 Search Bar</p> <div> <p style="font-size:1.5rem; font-weight:500; margin-bottom:10px">1번 디자인</p> <div> <!-- 여기서 부터 복사 --> <div class="flex-center content"> <div> <div class="search-top flex"> <input type="date" name="" id="" data-placeholder="ex) 2024-01-01"> <div class="search-bar flex"> <select name="" id=""> <option value="all">전체</option> </select> <input type="text" name="" id=""> </div> </div> <div class="flex"> <ul class="input-group flex"> <li><label for=""> <input type="checkbox"> <span>남</span> </label> </li> <li><label for=""> <input type="checkbox"> <span>여</span> </label> </li> </ul> </div> </div> <button class="blue-btn small-btn">검색</button> </div> <!-- 여기서 부터 복사 --> <div class="flex-center content"> <div> <div class="search-top flex"> <input type="date" name="" id="" data-placeholder="ex) 2024-01-01"> <div class="search-bar flex"> <select name="" id=""> <option value="all">전체</option> </select> <input type="text" name="" id=""> </div> </div> <div class="flex"> <ul class="input-group flex"> <li>성별 : </li> <li class="input-container"> <label for="male"> <input type="radio" id="male" name="gender" class="custom-radiobox"> <span>남</span> </label> </li> <li class="input-container"> <label for="female"> <input type="radio" id="female" name="gender" class="custom-radiobox"> <span>여</span> </label> </li> </ul> </div> </div> <button class="blue-btn small-btn">검색</button> </div> </div> </div> </div> </template> <script> export default { data() { return { } }, methods: { }, watch: { }, computed: { }, components: { }, mounted() { console.log('main mounted'); } } </script> <style scoped> /* */ .box { padding: 50px; border: 1px solid #eee; margin-bottom: 30px; } /* 1-1디자인 */ .search-bar { border: 1px solid #eee; border-radius: 5px; background-color: #fff; margin-left: 5px; } .search-bar select, .search-bar input[type="text"] { border: none; } /* 3-1디자인 */ .search-top { margin-bottom: 10px; } /* radio css */ .input-container label { display: flex; cursor: pointer; font-weight: 500; position: relative; overflow: hidden; margin-bottom: 3px; } .input-container label input.custom-radiobox { position: absolute; left: -9999px; } .input-container label input.custom-radiobox:checked+span { background-color: #5b72b8; color: #fff; } .input-container label input.custom-radiobox:checked+span:before { box-shadow: inset 0 0 0 4px #213f99; } .input-container label span { display: flex; align-items: center; padding: 3px 7px 3px 3px; border-radius: 10px; transition: 0.25s ease; color: #414181; } .input-container label span:hover { background-color: #d6d6e5; } .input-container label span:before { display: flex; flex-shrink: 0; content: ""; background-color: #fff; width: 15px; height: 15px; border-radius: 50%; margin-right: 3px; transition: 0.25s ease; box-shadow: inset 0 0 0 1px #213f99; } </style>