티스토리 뷰

WEB/css

검색영역 가로 3개 반응형

silverline79 2026. 1. 26. 14:21 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>반응형 검색 영역</title>
    <style>
        /* 기본 초기화 */
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Pretendard', sans-serif; padding: 20px; background-color: #f5f5f5; }

        .search-wrapper {
            max-width: 1200px;
            margin: 0 auto;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        /* 테이블 스타일 구조 */
        .search-table {
            list-style: none;
            border-top: 2px solid #333;
        }

        .search-table li {
            display: flex;
            flex-wrap: wrap; /* 반응형을 위해 wrap 설정 */
            border-bottom: 1px solid #eee;
        }

        /* 각 검색 항목 (가로 3개 배치를 위해 33.33%) */
        .search-item {
            display: flex;
            flex: 1 1 33.33%; 
            min-width: 300px; /* 특정 너비 이하로 줄어들면 줄바꿈 */
        }

        /* 꽉 차는 줄 (예: 기간 선택) */
        .search-item.full {
            flex: 1 1 100%;
        }

        /* 제목 부분 */
        .th {
            width: 120px;
            background-color: #f9fafb;
            padding: 15px;
            font-size: 14px;
            font-weight: 600;
            color: #444;
            display: flex;
            align-items: center;
            border-right: 1px solid #eee;
        }

        /* 내용 입력 부분 */
        .td {
            flex: 1;
            padding: 10px 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        /* 입력 요소 스타일 */
        input[type="text"], select, input[type="date"] {
            width: 100%;
            height: 38px;
            padding: 0 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            outline: none;
            font-size: 14px;
        }

        input[type="text"]:focus, select:focus {
            border-color: #007bff;
        }

        /* 버튼 영역 */
        .btn-group {
            margin-top: 20px;
            text-align: center;
            display: flex;
            justify-content: center;
            gap: 10px;
        }

        .btn {
            padding: 10px 30px;
            border-radius: 4px;
            font-weight: bold;
            cursor: pointer;
            border: none;
            font-size: 14px;
        }

        .btn-submit { background-color: #007bff; color: white; }
        .btn-reset { background-color: #6c757d; color: white; }

        /* 모바일 대응 (768px 이하) */
        @media (max-width: 768px) {
            .search-item {
                flex: 1 1 100%; /* 한 줄에 하나씩 */
            }
            .th {
                width: 100px; /* 제목 너비 살짝 축소 */
                font-size: 13px;
            }
        }
    </style>
</head>
<body>

<div class="search-wrapper">
    <ul class="search-table">
        <li>
            <div class="search-item">
                <div class="th">검색어</div>
                <div class="td"><input type="text" placeholder="검색어를 입력하세요"></div>
            </div>
            <div class="search-item">
                <div class="th">카테고리</div>
                <div class="td">
                    <select>
                        <option value="">전체 선택</option>
                        <option value="1">공지사항</option>
                        <option value="2">자유게시판</option>
                    </select>
                </div>
            </div>
            <div class="search-item">
                <div class="th">공개 여부</div>
                <div class="td">
                    <label style="font-size: 14px;"><input type="radio" name="display" checked> 전체</label>
                    <label style="font-size: 14px;"><input type="radio" name="display"> 공개</label>
                </div>
            </div>
        </li>

        <li>
            <div class="search-item">
                <div class="th">담당자</div>
                <div class="td"><input type="text" placeholder="이름 검색"></div>
            </div>
            <div class="search-item">
                <div class="th">진행상태</div>
                <div class="td">
                    <select>
                        <option value="">전체</option>
                        <option value="1">대기</option>
                        <option value="2">완료</option>
                    </select>
                </div>
            </div>
            <div class="search-item">
                <div class="th">우선순위</div>
                <div class="td">
                    <select>
                        <option value="">선택</option>
                        <option value="H">높음</option>
                        <option value="M">보통</option>
                    </select>
                </div>
            </div>
        </li>

        <li>
            <div class="search-item full">
                <div class="th">등록 일자</div>
                <div class="td">
                    <input type="date" style="width: auto;"> 
                    <span>~</span> 
                    <input type="date" style="width: auto;">
                </div>
            </div>
        </li>
    </ul>

    <div class="btn-group">
        <button type="button" class="btn btn-reset">초기화</button>
        <button type="submit" class="btn btn-submit">조회하기</button>
    </div>
</div>

</body>
</html>

 

 

 

반응형 검색 영역.html
0.01MB

 

 

※ 해당 내용은 Google Gmini3.0에서 작성되었습니다.

 

'WEB > css' 카테고리의 다른 글

조직도 css html  (0) 2026.01.29
다크 모드 전환 스위치  (0) 2026.01.14
clamp() 함수와 **CSS 변수(Variables)**  (0) 2026.01.14
폼(Form) 요소의 상태를 제어하거나 특정한 위치를 타겟팅할 때 유용한 선택자  (0) 2026.01.14
논리 가상 클래스 선택자 :where() / :is() / :has() / :not()  (0) 2026.01.14
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/02   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
글 보관함