티스토리 뷰

WEB/css

웹접근성 준수 복합 테이블

silverline79 2026. 2. 5. 22:07

 

<!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: #f8f9fa; }

        .accessible-table {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            border-top: 2px solid #222;
            background-color: #fff;
            list-style: none;
        }

        /* 셀(Cell) 공통 스타일 */
        .cell {
            display: flex;
            border-bottom: 1px solid #ddd;
            border-right: 1px solid #ddd;
            min-height: 50px;
        }

        /* 헤더/제목 스타일 (TH 역할) */
        .cell-header {
            width: 110px;
            background-color: #f1f3f5;
            padding: 12px;
            font-weight: 700;
            font-size: 14px;
            color: #333;
            display: flex;
            align-items: center;
            flex-shrink: 0;
        }

        /* 데이터 스타일 (TD 역할) */
        .cell-data {
            flex-grow: 1;
            padding: 12px;
            font-size: 14px;
            color: #444;
            display: flex;
            align-items: center;
        }

        /* 너비 클래스 */
        .w-50 { flex-basis: 50%; }
        .w-33 { flex-basis: 33.33%; }
        .w-25 { flex-basis: 25%; }
        .w-100 { flex-basis: 100%; border-right: none; }

        /* 반응형 처리 */
        @media (max-width: 1024px) {
            .w-33, .w-25 { flex-basis: 50%; }
        }

        @media (max-width: 650px) {
            .cell { flex-basis: 100% !important; border-right: none; }
            .cell-header { width: 90px; font-size: 13px; }
        }

        /* 시각적 초점 표시 (키보드 사용자 배려) */
        .cell-data:focus {
            outline: 2px solid #007bff;
            outline-offset: -2px;
        }
    </style>
</head>
<body>

    <h2 id="table-title" style="margin-bottom: 20px;">사원 상세 정보 (웹접근성 적용)</h2>

    <ul class="accessible-table" role="table" aria-labelledby="table-title">
        
        <li class="cell w-50" role="row">
            <div class="cell-header" role="rowheader">성명</div>
            <div class="cell-data" role="cell">홍길동</div>
        </li>
        <li class="cell w-50" role="row">
            <div class="cell-header" role="rowheader">사원번호</div>
            <div class="cell-data" role="cell">2026-001</div>
        </li>

        <li class="cell w-33" role="row">
            <div class="cell-header" role="rowheader">부서</div>
            <div class="cell-data" role="cell">운영팀</div>
        </li>
        <li class="cell w-33" role="row">
            <div class="cell-header" role="rowheader">직급</div>
            <div class="cell-data" role="cell">과장</div>
        </li>
        <li class="cell w-33" role="row">
            <div class="cell-header" role="rowheader">내선번호</div>
            <div class="cell-data" role="cell">104</div>
        </li>

        <li class="cell w-100" role="row">
            <div class="cell-header" role="rowheader">담당업무</div>
            <div class="cell-data" role="cell">웹 표준 준수 및 접근성 가이드 수립, 시스템 유지보수</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
글 보관함