728x90
반응형
<!DOCTYPE html>
<html lang="en" dir="ltr" >
<head>
<meta charset="utf-8">
<title></title>
<style>
table {
height: 100%;
width: 100%;
border: 1px solid;
/* 셀의 border와 테이블 border 간격 없애기 */
border-collapse: collapse;
margin: 10px;
/* 상 우 하 좌 */
border-width: 1px medium medium 1px;
border-bottom-color: red;
border-right-color: red;
}
tr, td {
border: 1px solid;
}
.atext {
text-align: center;
vertical-align: top;
padding-top: 15px;
}
.btext {
text-align: center;
vertical-align: bottom;
padding-bottom: 15px;
}
.backcolor {
background: linear-gradient( to bottom, yellow, green );
/* 불투명 */
opacity: 0.5;
}
.backcolor1 {
background: linear-gradient( to right, yellow, green );
}
.backcolor2 {
background: linear-gradient( 120deg, yellow, green );
}
div {
/* 스크롤없이 브라우저 화면에 맞게 */
position: fixed;
height: calc(100% - 35px);
width: calc(100% - 35px);
}
</style>
</head>
<body>
<div>
<table>
<tr>
<td rowspan="2" width=50% class="backcolor" ></td>
<td class="atext backcolor1">A AREA</td>
<tr>
<td class="btext backcolor2">B AREA</td>
</table>
</div>
</body>
</html>728x90
반응형
'Fiori > UI5' 카테고리의 다른 글
| [JavaScript] 형변환 내장함수 (0) | 2023.03.06 |
|---|---|
| [JavaScript] 변수와 데이터 타입 (0) | 2023.03.06 |
| [WEB] HTML & CSS 2 (0) | 2023.03.06 |
| [WEB] HTML & CSS (0) | 2023.03.06 |
| [WEB] HTML (0) | 2023.03.06 |
댓글