자기발전소/# html
HTML & CSS source: fieldset 태그
iamlucia
2020. 6. 7. 11:36
출력되어야 할 웹페이지 화면 :
내가 작성한 소스코드 :
<!DOCTYPE html>
<head>
<meta charset="UTF-8"/>
<title>HTML_신상정보 입력</title>
<style>
fieldset {
width: 300px;
padding: 20px;
padding-bottom: 30px;
padding-right: 30px;
border: 3px solid palevioletred;
}
</style>
</head>
<body>
<fieldset>
<legend>신상정보</legend>
<ol>
<li>이름 <input type = "text" placeholder="이름"> </li>
<li>이메일 <input type = "email" placeholder="example@domain.com"></li>
<li>휴대폰 번호 <input type="tel" placeholder="01012345678" pattern="[0-9]{11}"> </li>
</ol>
</fieldset>
</body>
</html>Visual Studio Code
1. <fieldset> : 여러 개의 control들을 그룹지을 때 활용
이때 <legend> 태그는 <fieldset> 태그의 캡션 역할
2. 새로 배운 것
- padding 값을 통해 <fieldset> 그룹 안 여백 크기를 조절
- <input>태그의 "placeholder" 속성: 해당 타입에서 입력하게 될 내용의 예시를 미리 보여주기
-<input> 태그의 "pattern" 속성: 해당 타입에서 입력받는 값을 어떤 패턴으로 받을 것인지 설정