똑같이 만들기.
table : 가운데 정렬 사용
===========================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1 {
font-size:50px;
text-align:center;
}
table {
border-spacing:0px;
border-top:3px double darkblue;
border-bottom:3px double darkblue;
width:450px;
margin:0px auto; /*가운데 정렬*/
/*상하 좌우*/
}
.cell1 {
background-color:skyblue;
border-bottom:2px dotted darkblue;
border-right:2px dotted darkblue;
font-size:16px;
}
.cell2 {
background-color:skyblue;
border-right:2px dotted darkblue;
font-size:16px;
}
.cell3 {
font-size:16px;
border-bottom:2px dotted darkblue;
}
.cell4 {
font-size:16px;
}
.box {
font-size:12px;
border:1px solid gray;
background-color:skyblue;
color:red; /*input type="text"에도 class를 지정해서 꾸밀 수 있다.*/
}
</style>
</head>
<body>
<h1>회 원 가 입</h1>
<table>
<tr>
<td class="cell1">*ID</td>
<td class="cell3"><input type="text" name="userid" class="box"></td>
</tr>
<tr>
<td class="cell1">*Password</td>
<td class="cell3"><input type="password" name="userpwd" class="box"></td>
</tr>
<tr>
<td class="cell2">연락처</td>
<td class="cell4"><input type="text" name="tel" class="box"></td>
</tr>
</table>
</body>
</html>
'html css' 카테고리의 다른 글
| CSS - 개념+예제 (0) | 2022.07.20 |
|---|---|
| HTML - 실습1 (0) | 2022.07.19 |
| HTML - 입력태그 폼의 속성들 (0) | 2022.07.19 |
| HTML - 테이블 (0) | 2022.07.19 |
| HTML - html 이미지 링크 설정 (0) | 2022.07.19 |
