본문 바로가기
공부일지

230920 (HTML)

CD가참둥그렇다 2023. 9. 20. 13:06

테스트 16. 생일 날짜 입력 받기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>시간 정보 입력 응용</title>
</head>
<body>
	<h3>생일축하합니다.</h3>
	<hr>
	당신의 생일은 2003년 2월 9일 입니다. 틀리면 수정하시고
	파티 시간과 장소를 입력하세요
	<hr>
	<form>
		<table>
			<tr><td>생일</td>
			<td><input type="date" value="2003-02-09"></td>
			<tr><td>생일파티시간</td>
			<td><input type="time"></td>
			<tr><td>생일파티장소</td>
			<td><input type="text"></td>
		</table>
		<input type="submit">
	</form>
</body>
</html>

 

테스트 17. <input type="number|range">로 편리한 숫자 입력

  • number 태그로 일정한 수치로 증가하는 숫자를 선택하는 박스를 만들 수 있다.
  • range 태그를 이용하여 볼륨 조절 같은 라인을 만들 수 있다.
  • list와 datalist를 이용하여 특정 구간에 표시를 넣을 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>편리한 숫자 입력</title>
</head>
<body>
	<h3>홈 제어 시스템 - 온도 조절</h3>
	<hr>
	<form>
		지속시간 (0.0~10.0시간)
		<input type="number" min="0.0" max="10.0" step="0.5"><br><br>
		온도 설정 : 10&deg;
		<input type="range" min="10" max="30" list="temperatures">30&deg;
		<datalist>
			<option value="12" label="Low">
			<option value="20" label="Medium">
			<option value="28" label="High">
		</datalist>
	</form>
</body>
</html>

테스트 18. 형식을 가진 텍스트 입력

  • input에 다양한 타입을 넣을 수 있고, placeholder에 입력 값이 없을 때 띄울 텍스트를 정할 수 있다.
  • email, url, tel, search 타입은 기본적으로 text와 같은 입력이 가능하다.
  • email, url 타입에 입력된 값이 양식에 맞지 않는 경우 submit시 경고창이 뜨게 된다.
  • search 타입은 입력창 옆에 입력 문자를 전부 지우는 버튼이 추가된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>형식을 가진 텍스트 입력</title>
</head>
<body>
	<h3>회원 정보를 입력해주세요.</h3>
	<hr>
	<form>
		email : <input type="email" placeholder="id@host"><br>
		홈페이지 : <input type="url" placeholder="http://"><br>
		전화번호 : <input type="tel" placeholder="010-1234-5678">
		<input type="submit" value="확인"><br><br><hr>
		검색어 : <input type="search" placeholder="검색어">
		<input type="button" value="검색">
	</form>
</body>
</html>

테스트 19.

  • fieldset 태그를 통해 작은 박스를 만들 수 있다.
  • legend 태그를 이용하여 박스 경계면에 텍스트를 입력할 수 있다.
  • small 태그는 작성한 내용이 기본 서식보다 조금 작은 글자로 출력된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>폼 입력 그룹으로 묶기</title>
</head>
<body>
	<h3>회원 정보를 입력해주세요.</h3>
	<hr>
	<form>
		<fieldset>
			<legend>회원정보</legend>
			이메일 : <input type="email"><br>
			홈페이지 : <input type="url"><br>
			전화번호 : <input type="tel"><br>
		</fieldset>
		<small>질문 : Tel. 010-111-1111</small>
	</form>
</body>
</html>

테스트1. 페이지 제작1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 테스트</title>
<style>
</style>
</head>
<body>
	<fieldset style="width:75%">
		<h1>수습 국원 모집</h1>
		<h2>방송에 관심 있는 새내기 여러분 환영합니다.</h2>
		<p>교내 방송국에서 신입생을 대상으로 수습 국원을 모집합니다. 학부와 전공은 상관 없습니다.</p>
		<p>방송에 관심 있는 여러 학우의 지원 바랍니다.</p>
		<ul>
		<li> <b>모집 기간 :</b> 3월 2일 ~ 3월 11일
		<li> <b>모집 분야 :</b> 아나운서, PD, 엔지니어
		<li> <b>모집 방법 :</b> 양식 작성 후 이메일 접수
		<br><i>지원서 양식은 교내 방송국 홈페이지 공지 게시판에 있습니다.</i>
		</ul>
		<h3>혜택</h3>
		<ol type="a">
		<li>수습기자 활둥 중 소정의 활동비 지급
		<li>정기자로 진급하면 장학금 지급
		</ol>
		<img src="media/KakaoTalk_20230920_110139327.jpg">
		<br>
		<br>
		<br>
		<br>
	</fieldset>
</body>
</html>

테스트2. 페이지 제작2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 테스트</title>
<style>
</style>
</head>
<body>
	<h1>수습 국원 지원 양식</h1>
	<table border="1" style="width: 600px; height:200px">
		<tr>
			<th rowspan="3" style="width: 20%">개인정보</th>
			<th style="width: 20%">이름</th>
			<td style="width: 60%"></td>
		</tr>
		<tr>
			<th>학과/학번</th>
			<td></td>
		</tr>
		<tr>
			<th>연락처</th>
			<td></td>
		</tr>
		<tr>
			<th>지원 분야</th>
			<td colspan="2"></td>
		</tr>
	</table>
</body>
</html>

테스트3. 페이지 제작3

테스트3. 페이지 제작3

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 테스트</title>
<style>
</style>
</head>
<body>
	<h1>수습 국원 지원 양식</h1>
	<table border="1" style="width: 600px; height:200px">
		<tr>
			<th rowspan="3" style="width: 20%">개인정보</th>
			<th style="width: 20%">이름</th>
			<td style="width: 60%"></td>
		</tr>
		<tr>
			<th>학과/학번</th>
			<td></td>
		</tr>
		<tr>
			<th>연락처</th>
			<td></td>
		</tr>
		<tr>
			<th>지원 분야</th>
			<td colspan="2"></td>
		</tr>
	</table>
</body>
</html>

테스트4. 페이지 제작4

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 테스트</title>
<style>
</style>
</head>
<body>
	<fieldset style="padding: 30px">
		<h1>프런트엔드 개발자 지원서</h1>
		HTML, CSS, 자바스크립트의 기술을 이해하고 실무 경험이 있는 분을 찾습니다.
		<hr>
		<form style=" line-height: 30px">
			<b>개인 정보</b>
			<ul type="none">
				<li>이름 <input type="text" placeholder="공백 없이 입력하세요">
				<li>연락처 <input type="tel">
			</ul>
			<b>지원 분야</b>
			<ul type="none">
				<li><input type="radio" name="part" value="1">웹 퍼블리싱
				<li><input type="radio" name="part" value="2">웹 애플리케이션
					개발
				<li><input type="radio" name="part" value="3">개발 환경 개선
			</ul>
			<b>지원 동기</b><br>
			<textarea rows="5" placeholder="본사 지원 동기를 간략히 써 주세요" maxlength="60"
				style="width: 80%; height: 100px"></textarea>
			<br> <input type="submit" value="접수하기"> <input
				type="submit" value="다시 쓰기">
		</form>
	</fieldset>
</body>
</html>

 

 

 

 

 

 

 

 

4장 CSS

 

 

테스트 2. CSS3 스타일 시트로 꾸민 웹 페이지

  • head에 style 태그를 이용해 다양한 기본 서식을 작성할 수 있다.
  • background-color : 배경 색 / color : 폰트 색 / border : 테두리 서식을 지정
  • span {} : span 태그로 강조할 문구의 서식을 지정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>스타일을 가진 웹 페이지</title>
<style>
	body {background-color: mistyrose;}
	h3 { color: purple;}
	hr { border: 5px solid yellowgreen;}
	span { color: blue; font-size: 20px;}
</style>
</head>
<body>
	<h3>CSS 스타일 맛보기</h3>
	<hr>
	<p>나는 <span>웹 프로그래밍</span>을 좋아합니다.</p>
</body>
</html>

'공부일지' 카테고리의 다른 글

230921 (HTML)  (0) 2023.09.21
230920 (Java)  (0) 2023.09.20
230919 (Java)  (0) 2023.09.19
230919 (HTML)  (1) 2023.09.19
230918 (Java)  (0) 2023.09.18

'공부일지' Related Articles

티스토리툴바