<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>가상 선택자를 사용해 폼 꾸미기</title>
<style>
* {
margin:0;
padding:0;
}
body {
background:#ccc;
padding:20px;
}
#signup {
background:#fff;
border:1px solid #222;
border-radius:5px;
padding:20px;
width:400px;
margin:30px auto;
}
#signup fieldset {
border:1px solid #ccc;
margin-bottom:30px;
}
#signup legend {
font-size:16px;
font-weight:bold;
padding-left:5px;
padding-bottom:10px;
}
#signup ul li {
line-height:30px;
list-style:none;
padding:5px 10px;
margin-bottom:2px;
}
#signup button {
border:1px solid #222;
border-radius:20px;
display:block; /*인라인 레벨 요소를 블록레벨 요소로*/
font-size:16px;
letter-spacing:1px; /*글자 간격 조정*/
margin:auto;
padding:7px 25px;
}
#signup label {
float:left;/*왼쪽으로 배치 */
font-size:13px; /*글자 크기 13px*/
width:110px;
}
#signup input:not([type=radio])
{
/*가상 선택자를 사용해 간단히 줄이기 */
border:1px solid #ccc;
border-radius:3px;
font-size:13px;
padding:5px;
width:200px;
}
#signup input[required]{
/*필수 입력 필드의 스타일 */
border:1px red solid;
}
#signup input[readonly] {
/*읽기 전용 필드의 스타일 */
border: none;
}
#signup fieldset:last-of-type {
/*마지막 fieldset의 스타일 */
border:none;
margin-bottom:0;
}
#signup button:hover {
background-color:#222;
color:#fff;
}
</style>
</head>
<body>
<form id="signup">
<fieldset>
<legend>로그인 정보</legend>
<ul>
<li>
<label for="userid">아이디</label>
<input id="userid" name="userid" type="text" required autofocus>
</li>
<li>
<label for="pwd1">비밀번호</label>
<input id="pwd1" name="pwd1" type="password" required >
</li>
<li>
<label for="pwd2">비밀번호 확인</label>
<input id="pwd2" name="pwd2" type="password" required>
</li>
<li>
<label for="level">회원등급</label>
<input id="level" name="level" type="text" readonly value="준회원">
</li>
</ul>
</fieldset>
<fieldse>
<legend>개인 정보</legend>
<ul>
<li>
<label for="fullname">이름</label>
<input id="fullname" name="fullname" type="text" placeholder="5자미만 공백없이" required>
</li>
<li>
<label for="email">메일 주소</label>
<input id="email" name="email" type="email" placeholder="abcd@domain.com" required atuocomplete="off">
</li>
<li>
<label for="tel">연락처</label>
<input id="tel" name="text" type="tel" autofocus="off">
</li>
</ul>
</fieldset>
<filedset>
<button type="submit">제출</button>
</filedset>
</form>
</body>
</html>
'css' 카테고리의 다른 글
| 10장 마무리 문제 2 (0) | 2023.04.03 |
|---|---|
| 10장 마무리 문제 1 (0) | 2023.04.03 |
| 10장 예제 - 가상요소를 사용해 스타일 적용하기 (0) | 2023.04.03 |
| 10장 예제 - 열에 번갈아 가며 배경색 적용하기 (0) | 2023.04.03 |
| 10장 예제- 위치에 따라 자식 요소 선택하기 (0) | 2023.04.03 |
