Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
Tags
- 시멘틱 태그 #시멘틱 레이아웃
- javacript #javasript 객체 #객체 #배열
- border:0;
- doctype
- 인터랙티브 웹 클론 #BBC 코로나19가 바꿀 사무실의 미래 #1분코딩
- html #display #block #inline
- label 태그
- border
- border:none;
- @font-face
- html #fontawesome #폰트어썸
- label
Archives
- Today
- Total
yeji
높이를 알 수 없는 div 세로 가운데 정렬 본문
table 요소를 통해서 세로 가운데 정렬을 할 수 있다.
일단 <table> 태그에 대해서 알아보자.
- 표를 만들 때 table 태그로 만든다.
- 행은 tr 태그로 만든다. tr -> table row의 줄임말. 가로줄!
- 열의 제목이 들어가는 셀은 th 태그로 만든다. -> table hading
- 내용이 들어가는 셀은 td 태그로 만든다 -> table data
- 각 열의 의미에 따라 thead, tbody, tfoot 태그로 구분지을 수도 있다.
- 가로로 이웃한 셀을 합칠 때에는 colspan 속성 사용
- 세로로 이웃한 셀을 합칠 때에는 rowspan 속성 사용
- 표 제목은 caption 태그로 만든다.
table은 부모가 높이가 달라지면 자식도 달라진다, 뿐만 아니라 예를들어 td의 height값을 변경하면
모든 td의 height값도 똑같이 달라진다.
그리고 tbody의 vertical-align: middle로 설정되어 있으면 그 밑에 있는 td들도 똑같이 middle로 된다.
이유는 vertical-align이 inherit으로 부모의 설정을 물려받기 때문!
세로로 정렬하기 위해서는 예를 들어
<HTML>
<div class="cover">
<div class="cover-inner">
<div class="box">wow</div>
</div>
</div>
<CSS>
body{
margin:0;
}
.cover{
display: table;
width:100%;
background:skyblue;
height:100vh;
}
.cover-inner{
background: orange;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.box{
width:400px;
margin:0 auto;
background: red;
padding:2rem 0;
}
'CSS' 카테고리의 다른 글
| @font-face (0) | 2021.04.16 |
|---|---|
| border:none과 border:0의 차이점 (0) | 2021.04.16 |
| Pseudo Element (0) | 2021.03.26 |
| Pseudo-class (0) | 2021.03.26 |
| CSS의 박스모델 (0) | 2021.02.25 |
Comments