티스토리 뷰
반응형
✏️ 5장 마무리 문제 - 1번
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>5-1 마무리 문제</title>
<style>
ul {
list-style: none;
}
li {
line-height: 50px;
}
label {
width: 60px;
float: left;
}
</style>
</head>
<body>
<h1>예약 정보</h1>
<form>
<ul>
<li>
<label for="user-name">이 름</label>
<input type="text" id="user-name" />
</li>
<li>
<label for="user-tel">전 화</label>
<input type="tel" id="user-tel" />
</li>
<li>
<label for="user-email">이메일</label>
<input type="email" id="user-email" />
</li>
<li>
<input type="submit" value="예약하기" />
</li>
</ul>
</form>
</body>
</html>
✏️ 5장 마무리 문제 - 2번
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>5-2 마무리 문제</title>
<style>
#content {
border: 1px solid black;
margin: 0 auto;
width: 520px;
padding: 20px 40px;
}
ul {
list-style: none;
}
li {
line-height: 30px;
}
</style>
</head>
<body>
<div id="content">
<h1>프런트엔드 개발자 지원서</h1>
<p>
HTML, CSS, 자바스크립틔 기술을 이해하고 실무 경검이 있는 분을 찾습니다.
</p>
<hr />
<form>
<h4>개인정보</h4>
<ul>
<li>
<label for="name">이름</label>
<input
type="text"
id="name"
placeholder="공백 없이 입력하세요"
autofocus
/>
</li>
<li>
<label for="tel">연락처</label>
<input type="tel" id="tel" />
</li>
</ul>
<h4>지원 분야</h4>
<ul>
<li>
<label
><input type="radio" value="an" name="field" />웹 퍼블리싱</label
>
</li>
<li>
<label
><input type="radio" value="develop" name="field" />웹
애플리케이션 개발</label
>
</li>
<li>
<label
><input type="radio" value="envi" name="field" />개발 환경
개선</label
>
</li>
</ul>
<h4>지원동기</h4>
<textarea
id="motive"
cols="60"
rows="5"
placeholder="봉사 지원 동기를 간략히 써 주세요."
></textarea>
<div id="container">
<input type="submit" value="접수하기" />
<input type="reset" value="다시 끄기" />
</div>
</form>
</div>
</body>
</html>
반응형
'Web > Basic' 카테고리의 다른 글
HTML+CSS+자바스크립트 웹 표준의 정석 8장 마무리 문제 (0) | 2024.07.02 |
---|---|
HTML+CSS+자바스크립트 웹 표준의 정석 7장 마무리 문제 (0) | 2024.07.02 |
HTML+CSS+자바스크립트 웹 표준의 정석 6장 마무리 문제 (0) | 2024.07.02 |
HTML+CSS+자바스크립트 웹 표준의 정석 4장 마무리 문제 (0) | 2024.07.02 |
[Web] 기본 지식 익히기 (0) | 2024.04.13 |
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- Do it!
- java
- BFS
- HTML5
- 자바스크립트
- html
- 이분 매칭
- DFS
- 스택
- 알고리즘 공부
- C++ Stack
- 유클리드 호제법
- js
- c++ string
- 카운팅 정렬
- DP
- 유니온 파인드
- 알고리즘
- 최단 경로
- 투 포인터
- 세그먼트 트리
- 자바
- 백준
- 반복문
- C++
- 자료구조
- 우선순위 큐
- 에라토스테네스의 체
- 백준 풀이
- CSS
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
글 보관함