티스토리 뷰

WEB/css

Flexbox 3열 반응형 테이블

silverline79 2026. 2. 5. 21:43 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox 3열 반응형 테이블</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 #444;
            background-color: #fff;
        }

        .flex-item {
            display: flex;
            /* 데스크탑: 3열 구조 (100% / 3) */
            flex-basis: calc(100% / 3); 
            border-bottom: 1px solid #ddd;
            border-right: 1px solid #ddd;
        }

        /* 3번째 열마다 오른쪽 테두리 제거 */
        .flex-item:nth-child(3n) {
            border-right: none;
        }

        /* 제목 영역 */
        .item-label {
            width: 100px;
            background-color: #f9f9f9;
            padding: 15px 10px;
            font-weight: bold;
            font-size: 14px;
            color: #555;
            display: flex;
            align-items: center;
            flex-shrink: 0; /* 제목 너비 고정 */
            border-right: 1px solid #eee;
        }

        /* 내용 영역 */
        .item-content {
            flex-grow: 1; /* 남은 공간 모두 차지 */
            padding: 15px;
            font-size: 14px;
            color: #333;
            display: flex;
            align-items: center;
            word-break: break-all;
        }

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

        /* 태블릿 (1024px 이하): 2열 */
        @media (max-width: 1024px) {
            .flex-item {
                flex-basis: 50%;
            }
            .flex-item:nth-child(3n) { border-right: 1px solid #ddd; } /* 초기화 */
            .flex-item:nth-child(2n) { border-right: none; } /* 2번째마다 제거 */
        }

        /* 모바일 (600px 이하): 1열 */
        @media (max-width: 600px) {
            .flex-item {
                flex-basis: 100%;
                border-right: none;
            }
            .item-label {
                width: 80px;
                font-size: 13px;
            }
        }
    </style>
</head>
<body>

    <h2 style="margin-bottom:20px;">Flexbox 상세 정보 테이블</h2>

    <ul class="flex-table">
        <li class="flex-item">
            <div class="item-label">이름</div>
            <div class="item-content">홍길동</div>
        </li>
        <li class="flex-item">
            <div class="item-label">연락처</div>
            <div class="item-content">010-1234-5678</div>
        </li>
        <li class="flex-item">
            <div class="item-label">이메일</div>
            <div class="item-content">hong@example.com</div>
        </li>
        <li class="flex-item">
            <div class="item-label">부서</div>
            <div class="item-content">개발팀</div>
        </li>
        <li class="flex-item">
            <div class="item-label">직급</div>
            <div class="item-content">팀장</div>
        </li>
        <li class="flex-item">
            <div class="item-label">입사일</div>
            <div class="item-content">2026-01-01</div>
        </li>
        <li class="flex-item" style="flex-basis: 100%; border-right: none;">
            <div class="item-label">주소</div>
            <div class="item-content">서울특별시 강남구 테헤란로 123 (반응형 100% 적용)</div>
        </li>
    </ul>

</body>
</html>

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

 

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

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

웹접근성 준수 복합 테이블  (0) 2026.02.05
복합 구조 상세 페이지  (0) 2026.02.05
UL/LI 3열 반응형 테이블  (0) 2026.02.05
table 테그를 반응형으로 만들기  (0) 2026.02.05
조직도 css html  (0) 2026.01.29
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
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
글 보관함