코밍이의 하루

[HTML5] 여러 데이터 나열해 보여 주기 본문

웹언어 공부/HTML5

[HTML5] 여러 데이터 나열해 보여 주기

코밍이 2021. 8. 26. 09:14

1. 개발 환경

구분 내용
사용 언어 HTML5, CSS3
개발환경 Visual Studio Code
참고 도서 [Do it] HTML5 + CSS3 웹 표준의 정석
웹브라우저 Chrome

 

2. 주요 문법

1) <select>, <optgroup>, <option> - 드롭다운 목록 만들기

- 드롭다운 목록 : 클릭했을 때 옵션들이 요소 아래쪽으로 펼쳐짐

- 여러 옵션 중에서 선택하도록 하고 싶을 때 사용

- 공간을 최소한으로 사용하면서 여러 옵션을 표시하기에 적당

기본형
<select 속성 = "속성 값">
  <option value="값" [속성="속성 값"]> 내용1 </option>
  <option value="값" [속성="속성 값"]> 내용2 </option>
  <option value="값" [속성="속성 값"]> 내용3 </option>
   ...
</select>

- <select> 태그의 속성

속성 설명
size 화면에 표시될 드롭다운 메뉴의 항목 개수 지정
multiple 브라우저 화면에 여러 개의 옵션이 함께 표시되면서 Ctrl 키를 누른 상태로 드롭다운 메뉴에 있는 여러 항목을 선택할 수 있음

- <select> 태그 안의 <option> 태그의 속성

속성 설명
value 옵션을 선택했을 때 서버로 넘겨질 값 지정
selected 화면에 표시될 때 기본으로 선택되어 있는 옵션 지정

- <optgroup> 태그 : 드롭다운 목록에서 여러 항목들을 몇 가지 그룹으로 묶어야 할 때 사용, label 속성을 사용하여 그룹의 제목을 붙임

 

2) <datalist> 태그, <option> 태그

- <datalist> 태그를 사용하여 데이터 목록 중에서 값을 선택하도록 만들 수 있음

- 데이터 목록은 텍스트 필드와 <input> 태그를 함께 사용

- <input> 태그의 list 속성 값과 데이터 목록의 id를 같게 만들어 사용

- <datalist> 태그 안의 <option> 태그 속성

속성 설명
value 사용자가 레이블을 선택했을 때 서버로 넘겨질 값 지정
label - 사용자를 위해 브라우저에 표시할 레이블
- 기본값은 value 값
태그 태그 태그

3) <textarea> 태그

- 여러 줄 텍스트를 입력하는 영역

기본형
<textarea [속성="속성 값"]> 내용 </textarea>

- <textarea> 속성

속성 설명
name 다른 폼 요소와 구분하기 위해 텍스트 영역의 이름 지정
cols 텍스트 영역의 가로 너비를 문자 단위로 지정
rows - 텍스트 영역의 세로 길이를 줄 단위로 지정
- 지정한 숫자보다 줄 개수가 많아지면 스크롤 막대가 생김

 

3. 소스 코드 및 실행 화면

- select1.html

<!doctype html>
<html lang="ko">
  <head>
     <meta charset="utf-8">
		 <title> 웹 폼</title>
     <style>
			 body {
				background-color:#fff; 
			 }
			 form fieldset{
				margin-bottom:25px; 
			 }
			 form legend{
				font-size:15px;
				font-weight:600; 
			 }
			.reg {
				font-size:14px;
				width:110px;
				color:#390;
				font-weight:bold;		
				float:left;
				text-align:right;
				margin-right:10px;
			 }	 
			 form ul li{
				list-style:none; 
				margin: 15px 0;	
				font-size:14px;	
			 }
	 </style>
  </head>
  <body>
  <h1> 여름방학 특강 신청</h1>
	<form>
		<fieldset>
		<legend>수강 신청인</legend>
		<ul>
			<li>
				<label class="reg" for="id">학번</label>
				<input type="text" id="id" autofocus> 
			</li>
			<li>       	
				<label class="reg" for="name">이름</label>
				<input type="text" id="name">               
			</li>
			<li>
			<label class="reg" for="class">학과</label>
					<select size="5" id="class" multiple>
						<option value="archi">건축공학과</option>
						<option value="mechanic">기계공학과</option>
						<option value="indust">산업공학과</option>
						<option value="elec">전기전자공학과</option>
						<option value="computer" selected>컴퓨터공학과</option>
						<option value="chemical">화학공학과</option>
					</select>
			</li>
		</ul>
		</fieldset>
  	</form>
  </body>
</html>

 

select1.html

- select2.html

<!doctype html>
<html lang="ko">
  <head>
		<meta charset="utf-8">
     <title> 웹 폼</title>
     <style>
			 body {
				background-color:#fff; 
			 }
			 form fieldset{
				margin-bottom:25px; 
			 }
			 form legend{
				font-size:15px;
				font-weight:600; 
			 }
			.reg {
				font-size:14px;
				width:110px;
				color:#390;
				font-weight:bold;		
				float:left;
				text-align:right;
				margin-right:10px;
			 }	 
			 form ul li{
				list-style:none; 
				margin: 15px 0;	
				font-size:14px;	
			 }
	 </style>
  </head>
  <body>
  <h1> 여름방학 특강 신청</h1>
	<form>
		<fieldset>
		<legend>수강 신청인</legend>
		<ul>
			<li>
				<label class="reg" for="id">학번</label>
				<input type="text" id="id" autofocus> 
			</li>
			<li>       	
				<label class="reg" for="name">이름</label>
				<input type="text" id="name">               
			</li>
			<li>
				<label class="reg" for="class">학과</label>
					<select id="class">
						<optgroup label="공과대학">
							<option value="archi">건축공학과</option>
							<option value="mechanic">기계공학과</option>
							<option value="indust">산업공학과</option>
							<option value="elec">전기전자공학과</option>
							<option value="computer">컴퓨터공학과</option>
							<option value="chemical">화학공학과</option>
						</optgroup>
						<optgroup label="인문대학">
							<option value="history">사학과</option>
							<option value="lang">어문학부</option>
							<option value="philo">철학</option>
						</optgroup>
					</select>
			</li>
		</ul>
		</fieldset>
  	</form>
  </body>
</html>

select2.html

- datalist.html

<!doctype html>
<html lang="ko">
  <head>
     <meta charset="utf-8">
		 <title> 웹 폼</title>
     <style>
			 body {
				background-color:#fff; 
			 }
			 form fieldset{
				margin-bottom:25px; 
			 }
			 form legend{
				font-size:15px;
				font-weight:600; 
			 }
			.reg {
				font-size:14px;
				width:110px;
				color:#390;
				font-weight:bold;		
				float:left;
				text-align:right;
				margin-right:10px;
			 }	 
			 form ul li{
				list-style:none; 
				margin: 15px 0;	
				font-size:14px;	
			 }
	 </style>
  </head>
  <body>
  <h1> 여름방학 특강 신청</h1>
	<form>
		<fieldset>
		<legend>수강 신청인</legend>
		<ul>
			<li>
				<label class="reg" for="id">학번</label>
				<input type="text" id="id" autofocus> 
			</li>
			<li>       	
				<label class="reg" for="name">이름</label>
				<input type="text" id="name">               
			</li>
			<li>
			<label class="reg" for="class">학과</label>
					<select id="class">
						<optgroup label="공과대학">
							<option value="archi">건축공학과</option>
							<option value="mechanic">기계공학과</option>
							<option value="indust">산업공학과</option>
							<option value="elec">전기전자공학과</option>
							<option value="computer">컴퓨터공학과</option>
							<option value="chemical">화학공학과</option>
						</optgroup>
						<optgroup label="인문대학">
							<option value="history">사학과</option>
							<option value="lang">어문학부</option>
							<option value="philo">철학</option>
						</optgroup>
					</select>
			</li>
		</ul>
		</fieldset>
		<fieldset>
			<legend>수강 과목을 선택하세요</legend>
			<ul>
				<li>
					<span class="reg">관심분야</span>
					<label for="interest"></label>
					<input type="text" id="interest" list="choices">
					<datalist id="choices">
						<option value="grammar" label="문법"></option>
						<option value="voca" label="어휘"></option>
						<option value="speaking" label="회화"></option>
						<option value="listening" label="리스닝"></option>
						<option value="news" label="뉴스청취"></option>
					</datalist>
				</li>
			</ul>
		</fieldset>
  	</form>
  </body>
</html>

datalist.html

- textarea.html

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title> 웹 폼</title>
		<style>
			form fieldset {
				margin: 10px 0;
			}

			form legend {
				font-size: 18px;
				color: #0066FF;
				font-weight: 600;
			}

			form label.reg {
				font-size: 14px;
				width: 120px;
				float: left;
			}

			form label em {
				font-size: 15px;
				color: red;
				font-weight: 800;
			}

			form ul li {
				list-style: none;
				margin: 10px 0;
			}

			form .easys {
				text-align: left;
				font-size: 12px;
				color: blue;
			}

			form fieldset.sendform {
				text-align: center;
			}
		</style>
	</head>
	<body>
		<form>
			<fieldset class="login">
				<legend>로그인</legend>
				<label for="user_id">아이디 </label>
				<input type="text" id="user_id" size="10" autofocus>
				<label for="user_pw">비밀번호 </label>
				<input type="password" id="user_pw" size="10">
				<input type="submit" value="로그인">
			</fieldset>
			<fieldset class="register">
				<legend>가입하기</legend>
				<ul>
					<li>
						<label class="reg" for="user_name">아이디 <em>*</em></label>
						<input type="text" id="new_id" size="20" autocomplete="on" required>
					</li>
					<li>
						<label class="reg" for="new_pw1">비밀번호 <em>*</em></label>
						<input type="password" id="new_pw1" size="20" required>
					</li>
					<li>
						<label class="reg" for="new_pw2">비밀번호 확인 <em>*</em></label>
						<input type="password" id="new_pw2" size="20" required>
					</li>
					<li>
						<label class="reg" for="user_name">이름 <em>*</em></label>
						<input type="text" id="user_name" size="20" required>
					</li>
					<li>
						<label class="reg" for="user_mail">메일 주소 <em>*</em></label>
						<input type="email" id="user_mail" size="20" required>
					</li>
					<li>
						<label class="reg" for="user_tel">전화번호 </label>
						<input type="tel" id="user_tel" size="20">
					</li>
				</ul>
			</fieldset>
			<fieldset class="easys">
				<legend>이지스퍼블리싱</legend>
				<textarea name="intro" cols="60" rows="5">
					열심히 사는 사람들의 손을 잡아주는 곳 - 이지스 퍼블리싱
					우리는 책을 내기 전에 다시 한번 물어봅니다
					"이 책이 사람들에게 도움이 되는가?"
					더 쉽게, 더 빠르게 지식을 전달하고 싶습니다.
					이지스퍼블리싱의 책과 앱을 만나보세요.
				</textarea>
			</fieldset>
			<fieldset class="sendform">
				<input type="submit" value="가입하기">
				<input type="reset" value="다시쓰기">
			</fieldset>
		</form>
	</body>
</html>

textarea.html

저작자표시 비영리 변경금지

'웹언어 공부 > HTML5' 카테고리의 다른 글

[HTML5] 기타 다양한 폼 요소들  (0) 2021.08.26
[HTML5] <input> 태그의 다양한 속성  (0) 2021.08.26
[HTML5] 사용자 입력을 위한 <input> 태그  (0) 2021.08.19
[HTML5] 폼 만들기  (0) 2021.08.19
[HTML5] SVG 이미지  (0) 2021.08.16
'웹언어 공부/HTML5' Related Articles more