반응형
ch04/numberinputtag.html
p.131
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>numberinputtag.html</title>
</head>
<body>
<h1>숫자 관련 인풋 타입</h1>
<form action="#">
<label>
number <input type="number" placeholder="0~10" min="0" max="10">
</label>
<br><br>
<label>
range <input type="range" min="0" max="100" step="1">
</label>
<br><br>
<label>
date <input type="date" min="2020-01-01" max="2030-12-31" value="2025-12-05">
</label>
<br><br>
<button type="submit">제출</button>
</form>
</body>
</html>
숫자 관련 인풋 타입
ch04/checkinputtag.html
p.134
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>checkinputtag.html</title>
</head>
<body>
<h1>체크 관련 인풋 타입</h1>
<form action="#">
<h2>checkbox</h2>
<label><input type="checkbox" checked>유기농</label><br>
<h2>radio</h2>
<label><input type="radio" name="fruit" value="apple" checked>사과</label>
<label><input type="radio" name="fruit" value="grape">포도</label>
<label><input type="radio" name="fruit" value="orange">오렌지</label>
<br>
<label><input type="radio" name="vege" value="carrot" checked>당근</label>
<label><input type="radio" name="vege" value="tomato">토마토</label>
<label><input type="radio" name="vege" value="eggplant">가지</label>
<br>
<button>제출</button>
</form>
</body>
</html>
체크 관련 인풋 타입
ch04/etcinputtag.html
p.137
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>etcinputtag.html</title>
</head>
<body>
<h1>기타 인풋 타입</h1>
<form action="#">
<label>
<!-- 애스터리스크/아스트릭 -->
file <br> <input type="file" accept="image/*" multiple>
</label>
<br><br>
<label>
hidden <br> <input type="hidden" name="hidden" value="홍길동">
</label>
<br><br>
<button>제출</button>
</form>
<hr>
<form action="#">
<label>
email <br> <input type="email" name="email">
</label>
<br><br>
<button>제출</button>
</form>
</body>
</html>
기타 인풋 타입
ch04/commoninputtag.html
p.139
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>commoninputtag.html</title>
</head>
<body>
<h1>인풋 요소 공통(대부분) 속성</h1>
<form action="#">
<label>
value <br> <input type="text" name="val" value="지정됨">
</label>
<br><br>
<label>
autofocus <br> <input type="text" name="val2" placeholder="자동 포커스" autofocus>
</label>
<br><br>
<label>
readonly <br> <input type="text" name="val3" value="수정 불가능" readonly>
</label>
<br><br>
<label>
disabled <br> <input type="text" name="val4" value="수정,전송 불가" disabled>
</label>
<br><br>
<label>
required <br> <input type="text" name="val5" placeholder="필수입력" required>
</label>
<br><br>
<label><input type="radio" name="fruit" value="apple" checked>사과</label>
<label><input type="radio" name="fruit" value="grape">포도</label>
<label><input type="radio" name="fruit" value="orange" disabled>오렌지(품절)</label>
<br><br>
<button>제출</button>
</form>
</body>
</html>
인풋 요소 공통(대부분) 속성
ch04/textarea.html
p.143
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style> textarea { width: 300px; height: 200px; } </style>
<title>textarea.html</title>
</head>
<body>
<form action="#">
<h1>textarea</h1>
<label>
메시지를 입력하세요.
<br>
<textarea name="comment" required maxlength="5"></textarea>
</label>
<br>
<button>제출</button>
</form>
</body>
</html>
ch04/optiontag.html
p.144
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>optiontag.html</title>
</head>
<body>
<h1>옵션들을 사용하는 태그</h1>
<form action="#">
<label>
언어
<select name="lang">
<option>----</option>
<option value="01">HTML</option>
<option value="02">CSS</option>
<option value="03">자바스크립트</option>
<option value="04">타입스크립트</option>
</select>
</label>
<br><br>
<label>
쇼핑 목록
<select name="shopping">
<optgroup label="과일">
<option value="f_apl">사과</option>
<option value="f_grp">포도</option>
<option value="f_org">오렌지</option>
</optgroup>
<optgroup label="채소">
<option value="v_crt">당근</option>
<option value="v_tmt">토마토</option>
<option value="v_ept">가지</option>
</optgroup>
</select>
</label>
<br><br>
<label>
현재 직업
<input list="jobs" name="job">
<datalist id="jobs">
<option value="학생">
<option value="디자이너">
<option value="퍼블리셔">
<option value="퍼블리셔 디자이너">
<option value="개발자">
</datalist>
</label>
<br>
<button>제출</button>
</form>
</body>
</html>
옵션들을 사용하는 태그
ch04/metertag.html
p.148
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>metertag.html</title>
</head>
<body>
<h1>정도를 표현하는 태그</h1>
<h2>progress 태그</h2>
<progress></progress>
<progress max="100" value="50">50%</progress>
<br><br>
<h2>meter 태그</h2>
<meter min="0" max="100" low="33" high="67" optimum="50" value="20">20달러</meter>
<meter min="0" max="100" low="33" high="67" optimum="50" value="50">50달러</meter>
<meter min="0" max="100" low="33" high="67" optimum="50" value="80">80달러</meter>
<br>
<meter min="0" max="100" low="33" high="67" optimum="10" value="20">20달러</meter>
<meter min="0" max="100" low="33" high="67" optimum="10" value="50">50달러</meter>
<meter min="0" max="100" low="33" high="67" optimum="10" value="80">80달러</meter>
<br>
<meter min="0" max="100" low="33" high="67" optimum="90" value="20">20달러</meter>
<meter min="0" max="100" low="33" high="67" optimum="90" value="50">50달러</meter>
<meter min="0" max="100" low="33" high="67" optimum="90" value="80">80달러</meter>
</body>
</html>
정도를 표현하는 태그
progress 태그
meter 태그
meter 태그
min, max: 범위를 지정
low, high: 구간을 3칸으로 나눔, low보다 낮은 값, low~high 값, high보다 큰 값
optimum: 3 구간 중 최적값 구간을 정할 때 사용. 값 크기는 상관없고 구간 안에만 있는 값이면 결과는 동일, 위 코드 기준으로 0~32는 결과 동일, 33~67는 결과 동일, 68~100은 결과 동일합니다.
최적 구간에 포함된 value값이면 초록색, 한 구간만 다르면 노란색, 두 구간이 다르면 빨간색으로 표시된다.
ch04/iframe.html
p.154
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iframe.html</title>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/x8JOdj82A_o?si=ZVkZR8tQuIhBdxIk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</body>
</html>
ch04/etctag.html
p.156
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>etctag.html</title>
</head>
<body>
<h1>알아두면 좋은 태그들</h1>
<p>
kbd 태그는 <kbd>Ctrl</kbd>+<kbd>C</kbd>와
같이 키보드 입력을 나타낼 때 사용합니다.
</p>
<p>
<dfn>dfn 태그</dfn>는 특정 맥락에서 정의, 설명하고
있는 용어를 나타낼 때 사용합니다.
</p>
<p>
small 태그는 <small>이와 같이 텍스트를 작게</small>
표시하는 데 사용합니다.
</p>
</body>
</html>
알아두면 좋은 태그들
kbd 태그는
Ctrl+
C와 같이 키보드 입력을 나타낼 때 사용합니다.
dfn 태그는 특정 맥락에서 정의, 설명하고 있는 용어를 나타낼 때 사용합니다.
small 태그는
이와 같이 텍스트를 작게표시하는 데 사용합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>spandivtag.html</title>
</head>
<body class="my-body">
<h1>아무것도 하지 않는 두 태그</h1>
<span>span 태그</span>
<span>span 태그</span>
<span>span 태그</span>
<span>span 태그</span>
<span>span 태그</span>
<hr>
<style>
.my-body > div:first-of-type { background-color: antiquewhite; width: 50px; }
.my-body > div:nth-of-type(2) {background-color: aqua; width: 50px; }
</style>
<div>div 태그</div>
<div>div 태그</div>
<div>div 태그</div>
<div>div 태그</div>
<div>div 태그</div>
<div>div 태그</div>
<div>div 메롱</div>
</body>
</html>
아무것도 하지 않는 두 태그
span 태그 span 태그 span 태그 span 태그 span 태그div 태그
div 태그
div 태그
div 태그
div 태그
div 태그
div 메롱
반응형