<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>이름과 나이</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Stylish&display=swap"
rel="stylesheet"
/>
<link href="./form.css" rel="stylesheet" />
</head>
<body>
<main id="main">
<section id="container">
<h3>이름과 나이를 입력해주세요</h3>
<form id="form" action="./check.jsp" method ="post">
<div>
<label for="name">이름</label>
<input
type="text"
id="name"
name="name"
placeholder="이름 입력(3글자)"
minlength="3"
maxlength="3"
required
/>
</div>
<div>
<label for="age">나이</label>
<input
type="number"
id="age"
name="age"
placeholder="나이 입력(20~100)"
min="20"
max="100"
required
/>
</div>
<div><input type="submit" value="제출" /></div>
</form>
</section>
</main>
</body>
</html>
<body> <main> <section><form>
1. 구글 폰트 사용법은 사용하기 원하는 폰트 선택하고 Link 복사 후 헤드에 넣어준다
2. input 영역에는 css에서 따로 설정해주어야한다 (CSS rules to specify families)를 복사하여 설정
input[type="text"],
input[type="number"]::placeholder {
font-family: "Stylish", sans-serif;
}
3. css파일 참조하는 법 <link href="./form.css" rel="stylesheet" />
4. <div>는 아무 의미 없는 박스로 Label 과 input을 같이 담아준다
여기서 Lable은 input이 무슨 값을 받는 지 알려주는 지표임
5. input type ="text" (문자열 입력)
input type ="number" (숫자만 입력)
id 는 서식 지정시에 참조할 id
name은 파라미터 값을 주고 받을 때 사용할 파라미터 이름
6. required 무조건 입력값을 받아야하는 제약
body {
font-family: "Stylish", sans-serif;
margin: 0;
padding: 0;
}
#main {
background-image: url("./11.jpg"); /*캐시로 저장되어서 이미지를 지워도 남아있음*/
background-position: center;
background-size: cover;
height: 100vh;
display: flex;
align-items: center; /*중앙에 위치*/
justify-content: space-around;
}
#container {
background-color: rgba(255, 255, 255, 0.9);
padding: 20px;
/* border-top: 1px;
border-top-color: rgb(250, 212, 131);
border-top-style: solid; */
/* border-top: 1px solid rgb(250, 212, 131);*/
border: 1px solid rgb(247, 117, 30);
border-radius: 6px;
box-shadow: 0 5px 8px 0 tan;
}
#form > div {
margin: 8px;
}
#form label {
display: block;
margin-bottom: 0.5em; /*폰트 크기에 상대적인 단위 rem은 그 요소의 부모 요소의 글자 크기를 기준으로 한다*/
font-weight: bold;
}
/*모든 인풋 요소 input {
} */
#name,
#age {
border: 1px solid coral;
border-radius: 4px;
}
input {
width: 100%;
height: 38px;
padding: 6px 10px;
/*테두리를 기준으로 박스를 그리는 보더 박스, 컨텐츠를 기준으로 박스를 그리는 컨텐츠 박스 등 */
box-sizing: border-box;
}
input[type="submit"] {
display: block;
color: #fff;
background-color: coral;
border-color: coral;
box-shadow: none;
cursor: pointer;
}
input[type="submit"]:hover {
/*의사 클래스*/
background-color: rgb(241, 96, 52);
}
input[type="text"],
input[type="number"]::placeholder {
font-family: "Stylish", sans-serif;
}
/* input[type="text"] {
width: 100%;
height: 38px;
border: 1px solid coral;
border-radius: 4px;
}*/7. id는 고유해야한다 같은 아이디를 가지는 요소는 있을 수 없다
id="red" #red 1개일때
class="red" .red 여러개 사용할 때
8. 의사클래스 가상 클래스는 특정한 선택자에 추가하는 키워드
:hover은 마우스가 올라갔을 때의 설정
::placeholder은 input부분에 개별 설정을 할 때 사용
'HTML & CSS' 카테고리의 다른 글
| Visual Studio code 초기 설정 (0) | 2022.03.21 |
|---|
