Post

css - display 종류02

Posted Updated
Preview Image
By HwangInJi 11 min read

css display 종류

▶ CSS에서 display는 요소의 렌더링 방식을 결정하는 속성으로 이를 활용하면 요소를 블록 레벨 요소, 인라인 요소, 그리드, 플렉스박스 등으로 지정할 수 있습니다.
display에는 다양한 종류가 있는데 오늘은 table속성들에 대해서 먼저 알아보도록 하겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13

<style>
.body {
    display: table;
    display: table-caption;
    display: table-cell;
    display: table-column;
    display: table-column-group;
    display: table-footer-group;
    display: table-header-group;
    display: table-row;
    display: table-row-group;
}
</style>


1. display: table;

▶ “display: table;”은 CSS(Cascading Style Sheets)의 일부로, 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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table 예시</title>
<style>
    .table-container {
        display: table;
        width: 100%;
    }
    .row {
        display: table-row;
    }
    .cell {
        display: table-cell;
        border: 1px solid #000;
        padding: 10px;
    }
</style>
</head>
<body>
    <div class="table-container">
        <div class="row">
            <div class="cell">셀 1</div>
            <div class="cell">셀 2</div>
            <div class="cell">셀 3</div>
        </div>
    </div>
</body>
</html>

▶ 위의 예시에서는 “display: table;”을 사용하여 .table-container를 표 형식으로 만들고, .row 클래스를 각 행으로, .cell 클래스를 각 셀로 사용합니다. 이렇게 하면 요소를 표 형식으로 배열한 레이아웃을 만들 수 있습니다.


2. display: table-caption;

▶ “display: table-caption;”은 표(Table) 요소의 캡션(Caption)을 스타일링할 때 사용됩니다. 캡션은 표의 제목을 나타내며 주로 표 위에 표시됩니다.
하지만, display: table-caption;은 실제로는 존재하지 않는 display 값이기 때문에 해당 속성에는 포함되지 않으며, 테이블의 캡션을 스타일링하기 위해서는 table-caption 요소 자체가 아닌 caption 요소를 선택하여 스타일을 적용해야 합니다.
즉, table 요소를 사용하여 테이블을 만들고, 그 하위에 caption 요소를 추가하여 캡션을 표현해야 속성이 적용됩니다. 

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table Caption 간단 예시</title>
<style>
    table {
        display: table;
        caption-side: top;
        border-collapse: collapse;
    }
    caption {
        font-weight: bold;
        background-color: #f0f0f0;
        padding: 5px;
    }
    th, td {
        padding: 10px;
        border: 1px solid #000;
    }
</style>
</head>
<body>
    <table>
        <caption>표 제목</caption>
        <tr>
            <th>헤더 1</th>
            <th>헤더 2</th>
        </tr>
        <tr>
            <td>셀 1</td>
            <td>셀 2</td>
        </tr>
    </table>
</body>
</html>

▶ 위의 예시에서 table 요소로 표를 만들고, 그 아래에 caption 요소를 추가하여 표의 캡션을 표현하고 있습니다.

3. display: table-cell;

▶ “display: table-cell;”은 해당 요소를 표(Table)의 셀(Cell)로 지정하며, 주로 표(Table)의 레이아웃을 조정하고 텍스트나 내용을 표 형식으로 표시할 때 사용됩니다. 

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Cell 예시</title>
<style>
    .table {
        display: table;
        width: 100%;
        border-collapse: collapse;
    }
    .row {
        display: table-row;
    }
    .cell {
        display: table-cell;
        border: 1px solid #000;
        padding: 10px;
    }
</style>
</head>
<body>
    <div class="table">
        <div class="row">
            <div class="cell">셀 1</div>
            <div class="cell">셀 2</div>
            <div class="cell">셀 3</div>
        </div>
    </div>
</body>
</html>

▶ 위의 예시에서는 “display: table-cell;”을 사용하여 요소를 표(Table)의 셀(Cell)로 지정하였고, table, row , cell 클래스에 값을 넣어 표 형식으로 배열하고 스타일링했습니다.


4. display: table-column-group;

▶ “display: table-column-group;”은 해당 요소를 표(Table)의 열 그룹(Column Group)으로 지정할 때 사용되며, 이를 활용하면 열 그룹에 스타일을 적용하거나 표의 열에 대한 일부 속성을 설정할 수 있습니다. 

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Column Group 예시</title>
<style>
    .table {
        display: table;
        width: 100%;
        border-collapse: collapse;
    }
    .col-group {
        display: table-column-group;
        background-color: #f0f0f0;
    }
    .col {
        display: table-column;
        width: 100px;
        border: 1px solid #000;
    }
    .cell {
        display: table-cell;
        border: 1px solid #000;
        padding: 10px;
    }
</style>
</head>
<body>
    <div class="table">
        <div class="col-group">
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="cell">셀 1</div>
            <div class="cell">셀 2</div>
            <div class="cell">셀 3</div>
        </div>
    </div>
</body>
</html>

▶ 위의 예시에서는 display: table-column-group;을 사용하여 열 그룹(Column Group)을 만들고, display: table-column;을 사용하여 각 열의 너비를 설정했습니다. 그리고 display: table-cell;을 사용하여 각 셀을 만들어 표를 구성했습니다.


5. display: table-row;

▶ “display: table-row;”은 해당 요소를 표(Table)의 행(Row)으로 지정할 때 사용되며, 이를 활용하면 행을 생성하고 각 셀을 행 안에 배치할 수 있습니다. 

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Row 예시</title>
<style>
    .table {
        display: table;
        width: 100%;
        border-collapse: collapse;
    }
    .row {
        display: table-row;
    }
    .cell {
        display: table-cell;
        border: 1px solid #000;
        padding: 10px;
    }
</style>
</head>
<body>
    <div class="table">
        <div class="row">
            <div class="cell">셀 1</div>
            <div class="cell">셀 2</div>
            <div class="cell">셀 3</div>
        </div>
    </div>
</body>
</html>

▶ 위의 예시에서 display: table-row;를 사용하여 각 요소를 표(Table)의 행(Row)으로 지정했고, table 클래스를 사용하여 표(Table)를 만든 후 row 클래스를 사용하여 각 행을 만들었습니다.


▶ “display: table-footer-group;”은 해당 요소를 표(Table)의 푸터 그룹(Footer Group)으로 지정할 때 사용되며, 주로 표의 바닥글 부분을 나타내는데 사용됩니다. 

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Footer Group 예시</title>
<style>
    .table {
        display: table;
        width: 100%;
        border-collapse: collapse;
    }
    .header-group {
        display: table-header-group;
        font-weight: bold;
        background-color: #f0f0f0;
    }
    .row-group {
        display: table-row-group;
    }
    .footer-group {
        display: table-footer-group;
        font-style: italic;
        background-color: #f0f0f0;
    }
    .cell {
        display: table-cell;
        border: 1px solid #000;
        padding: 10px;
    }
</style>
</head>
<body>
    <div class="table">
        <div class="header-group">
            <div class="cell">Header 1</div>
            <div class="cell">Header 2</div>
        </div>
        <div class="row-group">
            <div class="cell">Data 1</div>
            <div class="cell">Data 2</div>
        </div>
        <div class="footer-group">
            <div class="cell">Footer 1</div>
            <div class="cell">Footer 2</div>
        </div>
    </div>
</body>
</html>

▶ 위의 예시에서는 display: table-footer-group;을 사용하여 표(Table)의 푸터 그룹(Footer Group)을 만들고, 푸터 부분의 스타일을 설정했습니다. 또한 각 그룹을 .header-group, .row-group, .footer-group 클래스로 나눈 후, 각각의 셀을 .cell 클래스로 스타일링했기 때문에 표의 헤더, 본문, 푸터가 각각 구분되어 보여지게 됩니다.


7. display: table-header-group;

▶ “display: table-header-group;”은 해당 요소를 표(Table)의 헤더 그룹(Header Group)으로 지정할 때 사용되며, 주로 표의 헤더 부분을 나타내는데 사용됩니다. 

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Header Group 예시</title>
<style>
    .table {
        display: table;
        width: 100%;
        border-collapse: collapse;
    }
    .header-group {
        display: table-header-group;
        font-weight: bold;
        background-color: #f0f0f0;
    }
    .row-group {
        display: table-row-group;
    }
    .footer-group {
        display: table-footer-group;
        font-style: italic;
        background-color: #f0f0f0;
    }
    .cell {
        display: table-cell;
        border: 1px solid #000;
        padding: 10px;
    }
</style>
</head>
<body>
    <div class="table">
        <div class="header-group">
            <div class="cell">Header 1</div>
            <div class="cell">Header 2</div>
        </div>
        <div class="row-group">
            <div class="cell">Data 1</div>
            <div class="cell">Data 2</div>
        </div>
        <div class="footer-group">
            <div class="cell">Footer 1</div>
            <div class="cell">Footer 2</div>
        </div>
    </div>
</body>
</html>

▶ 위의 예시에서는 display: table-header-group;을 사용하여 표(Table)의 헤더 그룹(Header Group)을 만들고, 헤더 부분의 스타일을 설정했습니다. 또한 각 그룹을 .header-group, .row-group, .footer-group 클래스로 나눈 후, 각각의 셀을 .cell 클래스로 스타일링했기 때문에 표의 헤더, 본문, 푸터가 각각 구분되어 보여지게 됩니다.


오늘은 display의 다양한 옵션 중 table관련 속성들에 대해서 알아봤는데요,
다양한 옵션들을 활용하면 더 다양한 느낌의 웹사이트를 만들 수 있으니 조금씩 알아가보면 코드를 만들 때 도움이 되겠죠?
다음엔 다른 display의 옵션을 소개하는 글을 들고 오도록 할게요😁!

자바스크립트
css javascript
This post is licensed under CC BY 4.0 by the author.