고정 헤더 영역
상세 컨텐츠
본문
▶ table
table은 부모의 역할로 안에 자식으로 존재하는 아이템은 td가 되어짐
table은 표의 성격을 가지고 있으며, 이 표의 성격을 응용하게 되면 컨텐츠 배치시 유용하게 응용가능
이를 위해서는 원래의 표가 가진 스타일을 파악해보면 좋음
[ table base css ]
table {
display: table;
border-collapse: separate;
box-sizing: border-box;
text-indent: initial;
border-spacing: 2px;
border-color: grey;
}
- border-collapse : table의 테두리와 td의 테두리 사이간격 "유무" 결정하는 속성
> 기본값 : separate (간격있게)
> collapse : table의 테두리와 td의 테두리 사이간격 제거 (한줄표현)
- text-indent : 들여쓰기와 내어쓰기를 결정하는 속성
> 기본값은 0 / 그외 숫자로 표현
- border-spacing : table의 테두리와 td의 테두리 사이의 간격 (값부여)
> 기본값 : 2px / 숫자로 표현
[ td base css ]
td{
display: table-cell;
vertical-align: inherit;
}
- vertical-align : inline 또는 table-cell에서의 수직 정렬을 지정하는 속성
( * inline과 table-cell 엘리먼트에만 적용된다는 것에 주의 )
> baseline (기본값)
> middle : 수직상 중앙 정렬
> top : 수직상 상단 정렬
> bottom : 수직상 하단 정렬
[ tr base css ]
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
- 많이 사용하지 않음.
- display : table
: 보여지는 속성을 table로 만들어주는 성격
- display : table-cell
: 보여지는 속성을 table-cell 즉 td로 만들어주는 성격
>> td의 성격은 자동으로 컨텐츠에 따라 폭이 분배
>> 자동으로 옆으로 칸이 나열되며 만들어짐
- display : table-row
: 보여지는 속성을 table-row 즉 tr로 만들어주는 성격
<body>
<!-- taable > 표를 만드는 태그 -->
<table>
<tr>
<!-- 줄 -->
<td>table-test<br>table-test<br>table-test</td><!-- 칸 -->
<td>table-test<br>table-test<br>table-test</td><!-- 칸 -->
</tr>
</table>
<div>
<p>table-display<br>table-display<br>table-display</p>
<p>table-display<br>table-display<br>table-display</p>
</div>
</body>
<style>
* {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
width: 80%;
height: 300px;
margin: 100px auto;
border: 2px solid #000;
/*
기본값
display: table-table을 만들어주는 성격
box-sizing : border-box(padding, border 폭안으로 표현)
*/
}
td {
border: 1px solid #000;
/* 일정한 폭이 생성, 수직상 중앙정렬
display : table-cell
vertical-align : middle
*/
text-align: center;
}
/* display : table로 변환 > 부모박스(height) */
div {
width: 80%;
height: 300px;
margin: 100px auto;
border: 2px solid #000;
display: table;
}
p {
/* 일반박스상태
float: left;
border: 1px solid #000;
text-align: center;
width: 50%;
box-sizing: border-box;
line-height: 300px; */
display: table-cell;
/* td */
vertical-align: middle;
border: 1px solid #000;
text-align: center;
}
</style>
'♥ 코딩(Coding) > 반응형' 카테고리의 다른 글
| ( 공부복습 ) table 레이아웃 반응형 적용하기 (0) | 2022.01.15 |
|---|---|
| ( 공부복습 ) table 레이아웃의 활용_응용 (0) | 2022.01.15 |
| ( 공부복습 ) 기초 반응형 레이아웃 설계 (0) | 2022.01.12 |
| (공부복습) 반응형을 위한 다양한 단위 (0) | 2022.01.07 |
| (공부복습) 반응형기초_개념이해 (0) | 2022.01.07 |
