출력되어야 할 웹페이지 화면 :
내가 작성한 소스코드 :
<!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" 속성: 해당 타입에서 입력받는 값을 어떤 패턴으로 받을 것인지 설정
'자기발전소 > # html' 카테고리의 다른 글
| HTML & CSS : fieldset inside fieldset , <hr> (0) | 2020.06.07 |
|---|---|
| HTML source : input (0) | 2020.06.07 |
| Materials for HTML & CSS: MDN & Color Tool (0) | 2020.04.28 |
