-
728x90
- CSS 폼 예제
- 아래 링크를 통해 태그 설명을 볼 수 있다.
- https://jm-rograming.tistory.com/74
(35)CSS_태그 설명
font-size 텍스트 크기를 설정 px, %, em, rem font-family 텍스트의 글꼴을 설정 ✔ 글꼴을 선택하는 방법 누구나 설치되어 있는 기본 글꼴을 사용 이미지로 처리 클라리언트에 글꼴을 다운로드 시켜 사
jm-rograming.tistory.com
<!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%;background-color: gold;padding: 10px 20px;margin: 5px 0;}input[type="text"]{border-radius: 15px;}input[type="text"]:focus {background-color: greenyellow;border: 3px dotted black;}input[type="password"]:focus {border-bottom: 3px dotted black;}input[type="password"] {background-color: white;border: none;border-bottom: 3px solid black;}select {box-sizing: border-box;width: 100%;padding: 10px;background-color: pink;margin: 5px 0;border: 2px solid deeppink;}textarea#content {box-sizing: border-box;width: 100%;height: 200px;resize: none;font-size: 20px;}button.btn {width: 150px;background-color: seagreen;color: white;padding: 15px 25px;cursor: pointer;border: none;}p.center {text-align: center;}</style></head><body><h2>폼</h2><form action="#"><p>아이디: <input type="text" id="userid" class="input" maxlength="20" placeholder="아이디를 입력하세요"></p><p>비밀번호: <input type="password" id="user" class="input" maxlength="20" placeholder="비밀번호를 입력하세요"></p><p>직업:<select><option value="프로그래머">프로그래머</option><option value="디자이너">디자이너</option><option value="학생">학생</option><option value="유튜버">유튜버</option><option value="공무원">공무원</option></select></p><p><textarea id="content"></textarea></p><p class="center"><button class="btn">회원가입</button></p></form></body></html>
'HTML, CSS' 카테고리의 다른 글
(49)CSS_고정 위치 지정 방식 (0) 2023.04.03 (48)CSS_상대 위치 지정 방식 (0) 2023.04.03 (46)CSS_디스플레이 (0) 2023.04.03 (45)CSS_박스사이징 (0) 2023.03.30 (44)CSS_마진 (0) 2023.03.30
