티스토리 뷰

WEB/css

UL/LI 3열 반응형 테이블

silverline79 2026. 2. 5. 21:23 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UL/LI 3열 반응형 테이블</title>
    <style>
        /* 기본 스타일 초기화 */
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Pretendard', sans-serif; padding: 20px; background-color: #f8f9fa; }

        .form-container {
            max-width: 1200px;
            margin: 0 auto;
            border-top: 2px solid #333;
            background-color: #fff;
        }

        /* UL을 그리드로 설정 */
        .info-list {
            list-style: none;
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 데스크탑: 3칸 */
        }

        /* LI 항목 스타일 */
        .info-item {
            display: flex;
            border-bottom: 1px solid #e9ecef;
            border-right: 1px solid #e9ecef;
            min-height: 50px;
        }

        /* 3번째 칸마다 우측 테두리 제거 */
        .info-item:nth-child(3n) { border-right: none; }

        /* 제목 (Label) */
        .title {
            width: 120px;
            background-color: #f1f3f5;
            padding: 15px;
            font-weight: 600;
            color: #495057;
            display: flex;
            align-items: center;
            font-size: 14px;
        }

        /* 내용 (Value) */
        .value {
            flex: 1;
            padding: 15px;
            color: #212529;
            display: flex;
            align-items: center;
            font-size: 14px;
        }

        /* --- 반응형 구간 --- */

        /* 태블릿 (1024px 이하): 2열 */
        @media (max-width: 1024px) {
            .info-list { grid-template-columns: repeat(2, 1fr); }
            .info-item { border-right: 1px solid #e9ecef; }
            .info-item:nth-child(2n) { border-right: none; }
            .info-item:nth-child(3n) { border-right: 1px solid #e9ecef; } /* 초기화 후 다시 설정 */
            .info-item:nth-child(2n) { border-right: none; }
        }

        /* 모바일 (640px 이하): 1열 */
        @media (max-width: 640px) {
            .info-list { grid-template-columns: 1fr; }
            .info-item { border-right: none; }
            .title { width: 100px; padding: 12px; }
            .value { padding: 12px; }
        }
    </style>
</head>
<body>

    <h3 style="margin-bottom: 15px; color: #333;">문서 정보 상세</h3>

    <div class="form-container">
        <ul class="info-list">
            <li class="info-item">
                <div class="title">문서번호</div>
                <div class="value">DOC-20260205</div>
            </li>
            <li class="info-item">
                <div class="title">작성자</div>
                <div class="value">제미니</div>
            </li>
            <li class="info-item">
                <div class="title">비밀번호</div>
                <div class="value">****</div>
            </li>
            <li class="info-item">
                <div class="title">분류</div>
                <div class="value">기술공유</div>
            </li>
            <li class="info-item">
                <div class="title">공개여부</div>
                <div class="value">전체공개</div>
            </li>
            <li class="info-item">
                <div class="title">조회수</div>
                <div class="value">256</div>
            </li>
            <li class="info-item">
                <div class="title">등록일</div>
                <div class="value">2026-02-05</div>
            </li>
            <li class="info-item">
                <div class="title">최종수정일</div>
                <div class="value">2026-02-05</div>
            </li>
            <li class="info-item">
                <div class="title">상태</div>
                <div class="value">승인완료</div>
            </li>
        </ul>
    </div>

</body>
</html>

UL_LI 3열 반응형 테이블.html
0.00MB

 

 

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

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

복합 구조 상세 페이지  (0) 2026.02.05
Flexbox 3열 반응형 테이블  (0) 2026.02.05
table 테그를 반응형으로 만들기  (0) 2026.02.05
조직도 css html  (0) 2026.01.29
검색영역 가로 3개 반응형  (0) 2026.01.26
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
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
글 보관함