IT 강좌 CSS 기초 029_리스트와 테이블

리스트

CSS에서 list-style-type list-style-image list-style-position 등의 속성을 통해 리스트 스타일을 최적화할 수 있습니다.

리스트 타입

리스트의 타입을 정의하며, 비순서 리스트, 순서 리스트, 정의 리스트를 포함합니다. none 표시 안 함, disc 원점, circle 원, square 정사각형, decimal 숫자, lower-alpha 소문자, upper-alpha 대문자, decimal-leading-zero 숫자 앞에 0 추가, lower-roman 소문자 로마 숫자, upper-roman 대문자 로마 숫자 등이 있습니다.

예제:

1
.ul-none{
2
    list-style-type: none;
3
}
4
.ul-disc{
5
    list-style-type: disc;
6
}
7
.ul-circle{
8
    list-style-type: circle;
9
}
10
.ul-square{
11
    list-style-type: square;
12
}
13
.ul-decimal{
14
    list-style-type: decimal;
15
}
16
.ul-lower-alpha{
17
    list-style-type: lower-alpha;
18
}
19
.ul-upper-alpha{
20
    list-style-type: upper-alpha;
21
}
22
.ul-decimal-leading-zero{
23
    list-style-type: decimal-leading-zero;
24
}
25
.ul-lower-roman{
26
    list-style-type: lower-roman;
27
}
28
.ul-upper-roman{
29
    list-style-type: upper-roman;
30
}

1
    <ul class="ul-none">
2
        <li>리스트 타입 데모</li>
3
        <li>리스트 타입 데모</li>
4
        <li>리스트 타입 데모</li>
5
    </ul>
6
    <ul class="ul-disc">
7
        <li>리스트 타입 데모</li>
8
        <li>리스트 타입 데모</li>
9
        <li>리스트 타입 데모</li>
10
    </ul>
11
    <ul class="ul-circle">
12
        <li>리스트 타입 데모</li>
13
        <li>리스트 타입 데모</li>
14
        <li>리스트 타입 데모</li>
15
    </ul>
16
    <ul class="ul-square">
17
        <li>리스트 타입 데모</li>
18
        <li>리스트 타입 데모</li>
19
        <li>리스트 타입 데모</li>
20
    </ul>
21
    <ul class="ul-decimal">
22
        <li>리스트 타입 데모</li>
23
        <li>리스트 타입 데모</li>
24
        <li>리스트 타입 데모</li>
25
    </ul>
26
    <ul class="ul-lower-alpha">
27
        <li>리스트 타입 데모</li>
28
        <li>리스트 타입 데모</li>
29
        <li>리스트 타입 데모</li>
30
    </ul>
31
    <ul class="ul-upper-roman">
32
        <li>리스트 타입 데모</li>
33
        <li>리스트 타입 데모</li>
34
        <li>리스트 타입 데모</li>
35
    </ul>
36
    <ul class="ul-decimal-leading-zero">
37
        <li>리스트 타입 데모</li>
38
        <li>리스트 타입 데모</li>
39
        <li>리스트 타입 데모</li>
40
    </ul>
41
    <ul class="ul-lower-roman">
42
        <li>리스트 타입 데모</li>
43
        <li>리스트 타입 데모</li>
44
        <li>리스트 타입 데모</li>
45
    </ul>
46
    <ul class="ul-upper-roman">
47
        <li>리스트 타입 데모</li>
48
        <li>리스트 타입 데모</li>
49
        <li>리스트 타입 데모</li>
50
    </ul>

효과: 예제 효과

리스트 마커

리스트 항목의 마커 위치(내부 또는 외부)를 설정합니다. inside 내부, outside 외부

예제:

1
.ul-inside{
2
    list-style-position: inside;
3
}
4
.ul-outside{
5
    list-style-position: outside;
6
}
7
li{
8
    background-color: aquamarine;
9
}

1
    <ul class="ul-inside">
2
        <li>리스트 마커 데모</li>
3
        <li>리스트 마커 데모</li>
4
        <li>리스트 마커 데모</li>
5
    </ul>
6
    <ul class="ul-outside">
7
        <li>리스트 마커 데모</li>
8
        <li>리스트 마커 데모</li>
9
        <li>리스트 마커 데모</li>
10
    </ul>

효과: 예제 효과

리스트 이미지

리스트 마커의 이미지를 설정하며, 이미지의 URL 주소로 설정할 수 있습니다.

예제:

1
.ul-image1{
2
    list-style-image: url("li1.png");
3
}
4
.ul-image2{
5
    list-style-image: url("li2.png");
6
}
7
.ul-image3{
8
    list-style-image: url("li3.png");
9
}

1
    <ul class="ul-image1">
2
        <li>리스트 마커 데모</li>
3
        <li>리스트 마커 데모</li>
4
        <li>리스트 마커 데모</li>
5
    </ul>
6
    <ul class="ul-image2">
7
        <li>리스트 마커 데모</li>
8
        <li>리스트 마커 데모</li>
9
        <li>리스트 마커 데모</li>
10
    </ul>
11
    <ul class="ul-image3">
12
        <li>리스트 마커 데모</li>
13
        <li>리스트 마커 데모</li>
14
        <li>리스트 마커 데모</li>
15
    </ul>

효과:

예제 효과 ul을 통해 설정한 크기는 이미지가 늘어나거나 압축될 수 있으므로, 편집 도구를 사용하여 이미지의 원본 크기를 설정하는 것이 좋습니다. 이미지 자체를 변경하지 않고 리스트 항목에서 이미지의 표시 크기를 조정하려면 li의 background-image(배경 이미지)를 사용하여 리스트 이미지를 유연하게 제어할 수 있습니다.

예제:

1
li{
2
    list-style-type: none;
3
    background-image: url("li1.png");
4
    background-size: 10px 10px;
5
    background-repeat: no-repeat;
6
    background-position: 2px center;
7
    padding-left: 20px;
8
}

1
    <ul>
2
        <li>리스트 마커 데모</li>
3
        <li>리스트 마커 데모</li>
4
        <li>리스트 마커 데모</li>
5
    </ul>

효과: 예제 효과 단축 표기법: list-style 속성은 리스트 항목 마커의 세 가지 스타일 속성인 list-style-type, list-style-position, list-style-image를 동시에 설정하는 데 사용됩니다. 값을 생략할 수 있지만 순서는 변경할 수 없습니다.

예제:

1
ul{
2
    list-style: square inside url('li1.png');
3
}

테이블

CSS에서 border 등 여러 속성을 통해 테이블의 외관과 레이아웃을 제어할 수 있습니다.

`border`

테이블의 테두리를 정의하며, 테두리의 너비, 색상 및 스타일을 설정할 수 있습니다.

예제:

1
table {
2
    border: 1px solid red;
3
}

1
<table>
2
    <tr>
3
        <td>테이블 데모 1</td>
4
        <td>테이블 데모 2</td>
5
        <td>테이블 데모 3</td>
6
        <td>테이블 데모 4</td>
7
    </tr>
8
    <tr>
9
        <td>테이블 데모 1</td>
10
        <td>테이블 데모 2</td>
11
        <td>테이블 데모 3</td>
12
        <td>테이블 데모 4</td>
13
    </tr>
14
    <tr>
15
        <td>테이블 데모 1</td>
16
        <td>테이블 데모 2</td>
17
        <td>테이블 데모 3</td>
18
        <td>테이블 데모 4</td>
19
    </tr>
20
</table>

효과:

예제 효과

`th` `td`

CSS에서 th, td는 테이블의 헤더, 테이블 행 및 테이블 데이터 셀의 스타일을 제어할 수 있습니다.

예제:

1
table {
2
    border: 1px solid red;
3
}
4
th {
5
    background-color: #d6d7d8; /* 헤더 배경색 설정 */
6
    color: #333; /* 헤더 텍스트 색상 설정 */
7
    font-weight: bold; /* 헤더 텍스트 굵게 설정 */
8
    padding: 10px; /* 헤더 패딩 설정 */
9
    text-align: center; /* 텍스트 가운데 정렬 설정 */
10
}
11
td {
12
    border: 1px solid green; /* 행 사이의 하단 테두리 설정 */
13
    padding: 8px; /* 셀 패딩 설정 */
14
    text-align: center; /* 텍스트 가운데 정렬 설정 */
15
}

1
    <table>
2
        <tr>
3
            <th>테이블 데모 1</th>
4
            <th>테이블 데모 2</th>
5
            <th>테이블 데모 3</th>
6
            <th>테이블 데모 4</th>
7
        </tr>
8
        <tr>
9
            <td>테이블 데모 1</td>
10
            <td>테이블 데모 2</td>
11
            <td>테이블 데모 3</td>
12
            <td>테이블 데모 4</td>
13
        </tr>
14
        <tr>
15
            <td>테이블 데모 1</td>
16
            <td>테이블 데모 2</td>
17
            <td>테이블 데모 3</td>
18
            <td>테이블 데모 4</td>
19
        </tr>
20
    </table>

효과:

예제 효과

`border-collapse`

테이블의 인접 테두리 병합 방식을 제어하는 속성입니다.

separate: 테두리를 병합하지 않으며, 테이블의 테두리가 독립적으로 유지됩니다.
collapse: 테두리를 병합하며, 테이블의 테두리가 하나로 합쳐집니다.

예제:

1
.table1 {
2
    border: 2px solid red;
3
    border-collapse: separate;
4
}
5
.table2 {
6
    border: 2px solid red;
7
    border-collapse: collapse;
8
}

1
    <table class="table1">
2
        <tr>
3
            <td>테이블 데모 1</td>
4
            <td>테이블 데모 2</td>
5
            <td>테이블 데모 3</td>
6
            <td>테이블 데모 4</td>
7
        </tr>
8
        <tr>
9
            <td>테이블 데모 1</td>
10
            <td>테이블 데모 2</td>
11
            <td>테이블 데모 3</td>
12
            <td>테이블 데모 4</td>
13
        </tr>
14
        <tr>
15
            <td>테이블 데모 1</td>
16
            <td>테이블 데모 2</td>
17
            <td>테이블 데모 3</td>
18
            <td>테이블 데모 4</td>
19
        </tr>
20
    </table>
21
    <table class="table2">
22
        <tr>
23
            <td>테이블 데모 1</td>
24
            <td>테이블 데모 2</td>
25
            <td>테이블 데모 3</td>
26
            <td>테이블 데모 4</td>
27
        </tr>
28
        <tr>
29
            <td>테이블 데모 1</td>
30
            <td>테이블 데모 2</td>
31
            <td>테이블 데모 3</td>
32
            <td>테이블 데모 4</td>
33
        </tr>
34
        <tr>
35
            <td>테이블 데모 1</td>
36
            <td>테이블 데모 2</td>
37
            <td>테이블 데모 3</td>
38
            <td>테이블 데모 4</td>
39
        </tr>
40
    </table>

효과:

예제 효과

`border-spacing`

테이블의 테두리 간격을 정의하며, 테두리 사이의 간격을 설정할 수 있습니다.

예제:

1
table {
2
    border: 1px solid red;
3
    border-spacing: 10px;
4
}

1
    <table>
2
        <tr>
3
            <td>테이블 데모 1</td>
4
            <td>테이블 데모 2</td>
5
            <td>테이블 데모 3</td>
6
            <td>테이블 데모 4</td>
7
        </tr>
8
        <tr>
9
            <td>테이블 데모 1</td>
10
            <td>테이블 데모 2</td>
11
            <td>테이블 데모 3</td>
12
            <td>테이블 데모 4</td>
13
        </tr>
14
        <tr>
15
            <td>테이블 데모 1</td>
16
            <td>테이블 데모 2</td>
17
            <td>테이블 데모 3</td>
18
            <td>테이블 데모 4</td>
19
        </tr>
20
    </table>

효과:

예제 효과

`table-layout`

테이블의 레이아웃 방식을 정의합니다.

auto: 자동 레이아웃, 테이블의 너비와 높이가 콘텐츠에 의해 결정됩니다.
fixed: 고정 레이아웃, 테이블의 너비와 높이가 지정된 값에 의해 결정됩니다.

예제:

1
.table1 {
2
    border: 1px solid red;
3
    table-layout: auto;
4
    width: 100%;
5
}
6
.table2 {
7
    border: 1px solid red;
8
    table-layout: fixed;
9
    width: 100%;
10
}
11
th, td {
12
    border: 1px solid red;
13
}

1
    <table class="table1">
2
        <tr>
3
            <td>테이블 데모 1테이블 데모 1테이블 데모 1테이블 데모 1</td>
4
            <td>테이블 데모 2</td>
5
            <td>테이블 데모 3</td>
6
            <td>테이블 데모 4</td>
7
        </tr>
8
        <tr>
9
            <td>테이블 데모 1</td>
10
            <td>테이블 데모 2</td>
11
            <td>테이블 데모 3</td>
12
            <td>테이블 데모 4</td>
13
        </tr>
14
        <tr>
15
            <td>테이블 데모 1</td>
16
            <td>테이블 데모 2</td>
17
            <td>테이블 데모 3</td>
18
            <td>테이블 데모 4</td>
19
        </tr>
20
    </table>
21
    <br>
22
    <table class="table2">
23
        <tr>
24
            <td>테이블 데모 1테이블 데모 1테이블 데모 1테이블 데모 1</td>
25
            <td>테이블 데모 2</td>
26
            <td>테이블 데모 3</td>
27
            <td>테이블 데모 4</td>
28
        </tr>
29
        <tr>
30
            <td>테이블 데모 1</td>
31
            <td>테이블 데모 2</td>
32
            <td>테이블 데모 3</td>
33
            <td>테이블 데모 4</td>
34
        </tr>
35
        <tr>
36
            <td>테이블 데모 1</td>
37
            <td>테이블 데모 2</td>
38
            <td>테이블 데모 3</td>
39
            <td>테이블 데모 4</td>
40
        </tr>
41
    </table>

효과:

예제 효과

`caption-side`

헤더의 위치를 정의하며, 다음 값을 설정할 수 있습니다.

top: 헤더가 테이블의 상단에 위치합니다.
bottom: 헤더가 테이블의 하단에 위치합니다.

예제:

1
.table1 {
2
    border: 1px solid red;
3
    caption-side: top;
4
}
5
.table2 {
6
    border: 1px solid red;
7
    caption-side: bottom;
8
}

1
    <table class="table1">
2
        <caption>헤더 데모 ABC123</caption>
3
        <tr>
4
            <td>테이블 데모 1테이블 데모 1테이블 데모 1테이블 데모 1</td>
5
            <td>테이블 데모 2</td>
6
            <td>테이블 데모 3</td>
7
            <td>테이블 데모 4</td>
8
        </tr>
9
        <tr>
10
            <td>테이블 데모 1</td>
11
            <td>테이블 데모 2</td>
12
            <td>테이블 데모 3</td>
13
            <td>테이블 데모 4</td>
14
        </tr>
15
        <tr>
16
            <td>테이블 데모 1</td>
17
            <td>테이블 데모 2</td>
18
            <td>테이블 데모 3</td>
19
            <td>테이블 데모 4</td>
20
        </tr>
21
    </table>
22
    <br>
23
    <table class="table2">
24
        <caption>헤더 데모 ABC123</caption>
25
        <tr>
26
            <td>테이블 데모 1테이블 데모 1테이블 데모 1테이블 데모 1</td>
27
            <td>테이블 데모 2</td>
28
            <td>테이블 데모 3</td>
29
            <td>테이블 데모 4</td>
30
        </tr>
31
        <tr>
32
            <td>테이블 데모 1</td>
33
            <td>테이블 데모 2</td>
34
            <td>테이블 데모 3</td>
35
            <td>테이블 데모 4</td>
36
        </tr>
37
        <tr>
38
            <td>테이블 데모 1</td>
39
            <td>테이블 데모 2</td>
40
            <td>테이블 데모 3</td>
41
            <td>테이블 데모 4</td>
42
        </tr>
43
    </table>

효과: 예제 효과

리스트

리스트 타입

리스트 마커

리스트 이미지

테이블

border

th td

border-collapse

border-spacing

table-layout

caption-side

댓글

`border`

`th` `td`

`border-collapse`

`border-spacing`

`table-layout`

`caption-side`