오늘은 display의 속성값 중 html 요소를 표(table)처럼 표현할 수 있는 display: table에 대해서
알아보는 시간을 갖도록 하겠습니다.
| 속성값 | 설명 |
| table | <table>(전체 요소)을 표현합니다. |
| table-caption | <caption>(표의 제목)을 표현합니다. |
| table-column-group | <colgroup>(td요소의 스타일 미리 적용) 역할입니다. |
| table-header-group | <thead>(테이블 제목 그룹) 역할입니다. |
| table-footer-group | <tfoot>(테이블 하단 콘텐츠 그룹) 역할입니다. |
| table-row-group | <tbody>(테이블 내용 콘텐츠 그룹) 역할입니다. |
| table-cell | <td>(테이블의 각 셀 요소) 역할입니다. |
| table-column | <col>(colgroup에 속하는 각 열의 속성 정의) 역할입니다. |
| table-row | <tr>(테이블의 가로줄 만듦) 역할입니다. |
위의 속성값으로 html 요소를 표처럼 표현되도록 만든 후, 표를 꾸미는 것과 같은 방법으로 해당 요소를
꾸밀 수 있습니다.
예제 코드를 한 번 보겠습니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>exhtml</title>
<style type="text/css">
div {
border: 1px solid black;
}
.table {
display: table;
width: 100%;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
padding: 0px 20px;
height: 150px;
}
.top {
vertical-align: top;
}
.middle {
vertical-align: middle;
}
.bottom {
vertical-align: bottom;
}
</style>
</head>
<body>
<div class="table">
<div class="table-row">
<div class="table-cell">
<p>안녕하세요.1</p>
</div>
<div class="table-cell">
<p>안녕하세요.2</p>
</div>
<div class="table-cell">
<p>안녕하세요.3</p>
</div>
</div>
<div class="table-row">
<div class="table-cell top">
<p>안녕하세요.4</p>
</div>
<div class="table-cell middle">
<p>안녕하세요.5</p>
</div>
<div class="table-cell bottom">
<p>안녕하세요.6</p>
</div>
</div>
</div>
</body>
</html>
실행 전 먼저 예상부터 해 볼까요?
html 코드부터 보면 div 태그들을 사용해 각각 요소를 꾸밀 수 있게 class값을 줬습니다.
그리고 style로 넘어가면 div 태그 모두에게 border로 외곽선을 만들어 줬습니다.
(css table은 기본적으로 border가 없기 때문에 따로 css를 해 줘야 합니다.)
그리고 전체를 감싸는 div table에 display table값을 주고, 가로 100%를 줬습니다.
그 뒤에 table-row 클래스와 table-cell 클래스에 맞는 display 속성값을 부여하였습니다.
table-cell을 보면 padding 요소로 좌우 20px씩 여백을 줬으니 글자는 좌우 여백이 들어간 상태에서
나올 것이고, 각 셀마다 높이값 150px씩을 갖고 나오게 될 것입니다.
그리고 html 코드의 밑에 3개의 div 태그들을 보면 각각 top, middle, bottom 클래스값을 추가로
줬었는데, 이 클래스값을 이용해서 세로 정렬을 위, 중간, 아래로 정렬하였습니다.
그럼 결과값이 이렇게 나오게 됩니다.
그런데 아직 한 가지 의문이 풀리지 않았습니다.
우리는 css나 html에서 각 셀에 총 가로값에서 일정한 크기씩 나눠 가지라고 한 적도, 1~3과 4~6이
줄바뀜이 되어서 나오라 한 적도 없는데 저렇게 표현이 되었습니다.
여기서 table의 특징이 나오게 되는 것인데요.
html 코드를 보시면 1~3까지 table-row로 한 번 묶고, 4~6까지도 table-row로 묶었습니다.
맨 위의 설명에서 table-row는 각 셀들의 가로줄을 묶는다고 했었죠?
그래서 1~3끼리 묶이고 줄바꿈이 된 후 4~6끼리 묶인 것입니다.
그리고 1~3과 4~6의 가로값이 균등하게 분배된 것은 table과 table-cell의 특징 때문에 저렇게 표현이
된 것인데요.
부모 태그에 display: table을 선언해 주고, 자식 태그에 display: table-cell을 선언해 주면 갯수가 몇 개가
되든 동일한 간격으로 영역을 가지게 됩니다.
그럼 저기서 table-cell값을 추가로 넣어도 동일한 간격을 가지게 되겠죠?
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>exhtml</title>
<style type="text/css">
div {
border: 1px solid black;
}
.table {
display: table;
width: 100%;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
padding: 0px 20px;
height: 150px;
}
.top {
vertical-align: top;
}
.middle {
vertical-align: middle;
}
.bottom {
vertical-align: bottom;
}
</style>
</head>
<body>
<div class="table">
<div class="table-row">
<div class="table-cell">
<p>안녕하세요.1</p>
</div>
<div class="table-cell">
<p>안녕하세요.2</p>
</div>
<div class="table-cell">
<p>안녕하세요.3</p>
</div>
<div class="table-cell">
<p>안녕하세요.A</p>
</div>
<div class="table-cell">
<p>안녕하세요.B</p>
</div>
</div>
<div class="table-row">
<div class="table-cell top">
<p>안녕하세요.4</p>
</div>
<div class="table-cell middle">
<p>안녕하세요.5</p>
</div>
<div class="table-cell bottom">
<p>안녕하세요.6</p>
</div>
<div class="table-cell">
<p>안녕하세요.C</p>
</div>
<div class="table-cell">
<p>안녕하세요.D</p>
</div>
</div>
</div>
</body>
</html>
위아래로 2개씩 table-cell을 추가해 봤습니다.
이렇게 동일하게 영역을 나눠 가지는 것을 볼 수 있습니다.
table의 특징을 이용하면 가로로 컨텐츠들이 있는 디자인에서 유동적으로 갯수가 변하는 상황이라면
매번 css를 바꿀 필요 없이 table 특징으로 쉽게 해결이 가능하겠죠?
이런 상황처럼 실사용에서 table을 활용할 상황은 생기니 table의 세부 속성을 잘 기억하고 계셨다가
활용하시면 좋겠다는 마음으로 마무리 짓겠습니다.
'웹 개발 > 주요 태그, 속성들' 카테고리의 다른 글
| css z-index 속성 (0) | 2021.12.23 |
|---|---|
| css vertical-align 속성 (0) | 2021.12.23 |
| css block, inline, inline-block 속성 (0) | 2021.12.22 |
| css box-sizing 속성 (0) | 2021.12.22 |
| css opacity 속성 (0) | 2021.12.20 |
댓글