Post

[CSS] 목록, 테이블 관련 속성

목록과 테이블 관련 속성들은 HTML의 목록 및 표 요소의 시각적 표현과 레이아웃을 제어하는 데 사용됩니다. 이 속성들을 통해 목록과 표의 스타일을 다양하게 조정할 수 있습니다.

Posted
Preview Image
By
9 min read
[CSS] 목록, 테이블 관련 속성

CSS 목록, 테이블 속성

#01. 목록 스타일 속성 (List Style)

HTML의 순서 없는 목록(<ul>)과 순서 있는 목록(<ol>)의 스타일을 제어하는 속성들이다.

속성설명
list-style-type목록 마커의 종류 지정
• none: 마커 없음
• disc: 검은 원(기본값, ul)
• circle: 빈 원
• square: 검은 사각형
• decimal: 숫자(기본값, ol)
• lower-roman: 소문자 로마숫자
• upper-roman: 대문자 로마숫자
• lower-alpha: 소문자 알파벳
• upper-alpha: 대문자 알파벳
list-style-position목록 마커의 위치 지정
• outside(기본값): 마커가 목록 항목 바깥쪽에 위치
• inside: 마커가 목록 항목 안쪽에 위치하여 텍스트와 함께 정렬
list-style-image목록 마커를 사용자 정의 이미지로 대체
• none(기본값): 이미지 사용 안함
• url(“이미지경로”): 지정된 이미지를 마커로 사용
list-style일괄표현 속성
• [list-style-type] [list-style-position] [list-style-image] 순서로 지정하며 필요 없는 항목은 생략 가능
• ex) list-style: circle inside url(“dot.png”);

실습: /11-CSS-목록,테이블-속성/01-list-style.html

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

<!DOCTYPE html>
<html lang="ko" translate="no">

<head>
    <meta charset="UTF-8">
    <meta name="google" content="notranslate" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-list-style</title>
    <style>
        body {
            font-size: 24px;
            line-height: 150%;
            font-weight: bold;
        }

        .list1 {
            list-style-type: upper-roman;
            list-style-position: inside;
        }

        .list2 {
            list-style-type: lower-alpha;
            list-style-position: outside;
        }

        .list3 {
            list-style-image: url("img/dot.png");
        }

        .list4 {
            .circle {
                list-style-type: circle
            }

            .disc {
                list-style-type: disc
            }

            .square {
                list-style-type: square
            }

            .decimal {
                list-style-type: decimal
            }

            .lower-roman {
                list-style-type: lower-roman
            }

            .upper-roman {
                list-style-type: upper-roman
            }

            .lower-alpha {
                list-style-type: lower-alpha
            }

            .upper-alpha {
                list-style-type: upper-alpha
            }

            .none {
                list-style-type: none
            }
        }
    </style>
</head>

<body>
    <h1>목록 전체에 대한 스타일 적용</h1>

    <h2>upper-roman, inside</h2>
    <ul class="list1">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>React</li>
    </ul>

    <h2>lower-alpha, outside</h2>
    <ul class="list2">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>React</li>
    </ul>

    <h3>list-image</h3>
    <ul class="list3">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>React</li>
    </ul>

    <h3>list-item에 개별 스타일 지정</h3>
    <ul class="list4">
        <li class="circle">circle</li>
        <li class="disc">disc</li>
        <li class="square">square</li>
        <li class="decimal">decimal</li>
        <li class="lower-roman">lower-roman</li>
        <li class="upper-roman">upper-roman</li>
        <li class="lower-alpha">lower-alpha</li>
        <li class="upper-alpha">upper-alpha</li>
        <li class="none">none</li>
    </ul>
</body>

</html>

#02. 테이블 스타일 속성 (Table Style)

HTML 테이블(<table>)의 외형과 레이아웃을 제어하는 속성들이다.

속성설명
caption-side테이블 캡션(<caption>)의 위치 지정
• top(기본값): 테이블 위쪽
• bottom: 테이블 아래쪽
border-collapse테이블 테두리 표시 방식 지정
• separate(기본값): 각 셀이 독립적인 테두리를 가짐
• collapse: 인접한 셀들의 테두리를 합쳐서 하나의 선으로 표시
border-spacing셀 간의 간격 지정 (border-collapse가 separate일 때만 적용)
• 값 하나: 수평, 수직 간격을 동일하게 설정
• 값 두 개: 첫 번째는 수평, 두 번째는 수직 간격
empty-cells빈 셀의 표시 여부 지정 (border-collapse가 separate일 때만 적용)
• show(기본값): 빈 셀도 테두리와 배경 표시
• hide: 빈 셀의 테두리와 배경을 숨김

대부분 테이블은 border-collapse를 collapse로 지정하고 사용하기 때문에 border-spacing과 empty-cells는 필요 없는 속성이라고 봐도 무방함

실습: /11-CSS-목록,테이블-속성/02-table.html

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

<!DOCTYPE html>
<html lang="ko" translate="no">

<head>
    <meta charset="UTF-8">
    <meta name="google" content="notranslate" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-table</title>
    <style>
        .mytable {
            /* 표 캡션 위치 */
            caption-side: bottom;

            /* 표 테두리는 검은 색 실선으로 */
            border: 1px solid black;

            /* 표 테두리를 1줄로 그리기 */
            border-collapse: collapse;

            th {
                background-color: #d5d5d5;
            }

            td,
            th {
                /* 셀 테두리는 검은 색 점선으로 */
                border: 1px solid black;

                /* 셀 테두리와 내용 사이의 여백 */
                padding: 10px;

                /* 셀 내용 가운데 정렬 */
                text-align: center;
            }
        }
    </style>
</head>

<body>
    <h1>상품 구성</h1>
    <table class="mytable">
        <caption>선물용과 가정용 상품 구성</caption>
        <thead>
            <tr>
                <th>용도</th>
                <th>중량</th>
                <th>갯수</t>
                <th>가격</th>
                <th>비고</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">선물용</td>
                <td>3kg</td>
                <td>11~16과</td>
                <td>35,000원</td>
                <td></td>
            </tr>
            <tr>
                <td>5kg</td>
                <td>18~26과</td>
                <td>52,000원</td>
                <td></td>
            </tr>
            <tr>
                <td rowspan="2">가정용</td>
                <td>3kg</td>
                <td>11~16과</td>
                <td>30,000원</td>
                <td></td>
            </tr>
            <tr>
                <td>5kg</td>
                <td>18~26과</td>
                <td>47,000원</td>
                <td></td>
            </tr>
        </tbody>
    </table>
</body>

</html>

#03. 실무 활용 - 게시판 테이블 스타일링

목록과 테이블 속성을 활용한 실제 웹사이트의 게시판 형태 구현 예제이다.

주요 구현 기법

  1. 테이블 기본 스타일링
    • border-collapse: collapse: 테두리 합치기
  2. 헤더 스타일링
    • 배경색과 텍스트 색상으로 구분
    • 테두리 제거로 깔끔한 외관
  3. 호버 효과
    • tr:hover: 행에 마우스 올릴 때 배경색 변경
    • 사용자 경험 향상
  4. 링크 스타일링
    • 기본 링크 스타일 제거
    • 상태별 색상 지정 (link, visited, hover, active)

실습: /11-CSS-목록,테이블-속성/03-공지사항.html

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

<!DOCTYPE html>
<html lang="ko" translate="no">

<head>
    <meta charset="UTF-8">
    <meta name="google" content="notranslate" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03-공지사항</title>
    <style>
        a {
            &:link, &:visited {
                color: #000;
                text-decoration: none;
            }

            &:hover {
                color: #00f;
            }

            &:active {
                color: #f00;
            }
        }

        .my-table {
            border-collapse: collapse;
            font-size: 14px;
            text-align: center;

            th {
                color: #168;
                background-color: #f0f6f9;

                /* 테두리 속성: 굵기 종류(직선) 색상 */
                border: 1px solid #ddd;

                /* 테두리와 내용 사이의 여백 크기 */
                padding: 10px;
            }

            tbody {
                tr {
                    &:hover {
                        background-color: #ecefff;
                    }
                }

                td {
                    /* 테두리 속성: 굵기 종류(직선) 색상 */
                    border: 1px solid #ddd;

                    /* 테두리와 내용 사이의 여백 크기 */
                    padding: 10px;
                }
            }
        }
    </style>
</head>

<body>
    <!-- 공지사항 게시판 영역 -->
    <h2>공지사항</h2>

    <!-- 게시판 테이블 -->
    <table class="my-table">
        <thead>
            <tr>
                <th>번호</th>
                <th>제목</th>
                <th>작성자</th>
                <th>작성일</th>
                <th>조회수</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>10</td>
                <td><a href="#">[안내] 5월 휴무일 공지</a></td>
                <td>관리자</td>
                <td>2025-04-30</td>
                <td>124</td>
            </tr>
            <!-- 나머지 9개 생략 -->
        </tbody>
    </table>
</body>

</html>
05.Frontend, HTML&CSS
Web Development Frontend CSS
This post is licensed under CC BY 4.0 by the author.