CSS 폼
폼 요소의 스타일을 설정
입력부분
선택자 : focus - 폼 요소가 포커싱 되어있을 때의 스타일을 설정
ex) outline : none
버튼 ex) cursor:pointer >> 마우스를 올렸을 때 커서 모양을 설정
textarea : resize : none >> textarea 크기를 사용자가 변경 불가능하도록 설정
6) Practice
<!DOCTYPE html>
<html lang="en">
<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>
input{box-sizing: border-box;
width: 100%;
padding: 10px 20px;
background-color: ivory;
margin: 5px 0;}
input[type=text]{
border-radius: 15px;
color: deeppink;
}
input[type=text]:focus{
background-color: lavenderblush;
outline: none;
}
input[type=password]{
border: none;
border-bottom: 3px solid hotpink;
}
input[type=password]:focus{
border-bottom: 3px dashed red; /*dashed 굵은 점선*/
}
select{
width: 100%;
box-sizing: border-box;
padding: 10px;
margin: 5px 0;
border: 2px solid yellowgreen;
font-weight: bold;
}
textarea{
box-sizing: border-box;
width: 100%;
height: 200px;
font-size: 16px;
resize: none; /*사용자 임의로 조절 불가*/
}
input[type=button], input[type=reset], input[type=submit]{
width: 160px;
background-color: powderblue;
color: black;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<h2>폼</h2>
<form action="">
<p>아이디 : <input type="text" placeholder="아이디를 입력하세요" required></p>
<p>비밀번호 : <input type="password" placeholder="비밀번호를 입력하세요" required></p>
<p>직업
<select>
<option>교사</option>
<option>강사</option>
<option>의사</option>
<option>판사</option>
<option>학생</option>
<option>주부</option>
<option>사무직</option>
<option>기타</option>
</select>
</p>
<p>자기소개
<textarea></textarea>
</p>
<p>
<input type="submit" value="회원가입">
<input type="reset" value="다시작성">
<input type="button" value="돌아가기">
</p>
</form>
</body>
</html>
'IT Study > HTML & CSS' 카테고리의 다른 글
| CSS - flex & 미디어 쿼리 & em, rem (0) | 2022.12.30 |
|---|---|
| CSS - Position & z-index & float & clear & layout (0) | 2022.12.29 |
| CSS - Display (0) | 2022.12.29 |
| CSS - 박스 모델(테두리, padding, margin, box-sizing) (0) | 2022.12.29 |
| CSS - 배경 편집 (0) | 2022.12.29 |
댓글