티스토리 뷰

WEB/css

복합 구조 상세 페이지

silverline79 2026. 2. 5. 21:46

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>복합 열 반응형 테이블 (Flexbox)</title>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: sans-serif; padding: 20px; background-color: #f4f7f6; }

        .flex-table {
            max-width: 1200px;
            margin: 0 auto;
            list-style: none;
            display: flex;
            flex-wrap: wrap; /* 다음 줄로 넘김 필수 */
            border-top: 2px solid #333;
            background-color: #fff;
            border-left: 1px solid #ddd; /* 왼쪽 테두리 시작 */
        }

        .flex-item {
            display: flex;
            border-bottom: 1px solid #ddd;
            border-right: 1px solid #ddd;
            min-height: 50px;
        }

        .item-label {
            width: 100px;
            background-color: #f9f9f9;
            padding: 10px;
            font-weight: bold;
            font-size: 13px;
            display: flex;
            align-items: center;
            flex-shrink: 0;
            border-right: 1px solid #eee;
        }

        .item-content {
            flex-grow: 1;
            padding: 10px;
            font-size: 13px;
            display: flex;
            align-items: center;
        }

        /* --- 열 너비 클래스 정의 --- */
        .col-2 { flex-basis: 50%; }
        .col-3 { flex-basis: 33.33%; }
        .col-4 { flex-basis: 25%; }
        .col-6 { flex-basis: 16.66%; }
        .col-12 { flex-basis: 100%; }

        /* --- 반응형 설정 --- */

        /* 태블릿: 모든 열을 2열(50%)로 통일 */
        @media (max-width: 1024px) {
            .col-3, .col-4, .col-6 { flex-basis: 50%; }
        }

        /* 모바일: 모든 열을 1열(100%)로 통일 */
        @media (max-width: 600px) {
            .flex-item { flex-basis: 100% !important; border-right: none; }
            .item-label { width: 80px; }
        }
    </style>
</head>
<body>

    <h2 style="margin-bottom:20px;">복합 구조 상세 페이지</h2>

    <ul class="flex-table">
        <li class="flex-item col-2">
            <div class="item-label">작성자</div>
            <div class="item-content">제미니</div>
        </li>
        <li class="flex-item col-2">
            <div class="item-label">등록일</div>
            <div class="item-content">2026-02-05</div>
        </li>

        <li class="flex-item col-3">
            <div class="item-label">카테고리</div>
            <div class="item-content">공지사항</div>
        </li>
        <li class="flex-item col-3">
            <div class="item-label">조회수</div>
            <div class="item-content">1,240</div>
        </li>
        <li class="flex-item col-3">
            <div class="item-label">우선순위</div>
            <div class="item-content">높음</div>
        </li>

        <li class="flex-item col-4"><div class="item-label">A</div><div class="item-content">데이터1</div></li>
        <li class="flex-item col-4"><div class="item-label">B</div><div class="item-content">데이터2</div></li>
        <li class="flex-item col-4"><div class="item-label">C</div><div class="item-content">데이터3</div></li>
        <li class="flex-item col-4"><div class="item-label">D</div><div class="item-content">데이터4</div></li>

        <li class="flex-item col-6"><div class="item-label">항목1</div><div class="item-content">1</div></li>
        <li class="flex-item col-6"><div class="item-label">항목2</div><div class="item-content">2</div></li>
        <li class="flex-item col-6"><div class="item-label">항목3</div><div class="item-content">3</div></li>
        <li class="flex-item col-6"><div class="item-label">항목4</div><div class="item-content">4</div></li>
        <li class="flex-item col-6"><div class="item-label">항목5</div><div class="item-content">5</div></li>
        <li class="flex-item col-6"><div class="item-label">항목6</div><div class="item-content">6</div></li>

        <li class="flex-item col-12">
            <div class="item-label">상세내용</div>
            <div class="item-content">여기는 100% 너비를 차지하는 상세 내용 영역입니다.</div>
        </li>
    </ul>

</body>
</html>

 

복합 열 반응형 테이블.html
0.00MB

 

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

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

체크박스 포함 반응형 테이블  (0) 2026.02.05
웹접근성 준수 복합 테이블  (0) 2026.02.05
Flexbox 3열 반응형 테이블  (0) 2026.02.05
UL/LI 3열 반응형 테이블  (0) 2026.02.05
table 테그를 반응형으로 만들기  (0) 2026.02.05
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
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
글 보관함