4. 종류 (DAY1_HTML과 이어지는 내용)

  1. <ul> </ul> : unorder list [순서 없는 리스트/목차 = 글머리 : 특수 문자]
  2. <ol> </ol> : order lost [순서 있는 리스트 = 글머리 : 번호]
  3. <li> </li> : list item [순서 값 = 리스트의 값]
<!DOCTYPE html>
	<html>
		<head>
			<meta charset="EUC-KR">
			<title>UL, OL, List Tag</title>
		</head>
		<body>
		
			<!-- X -->
			<ul>  <!-- list s -->
				a
				b
				c
				d
				e
			</ul> <!-- list e -->
			
			<!-- 글머리: 특수문자 / ul 태그 안에 li 태그 -->
			<ul><!-- list s -->
				<li> 강호동 </li>  <!-- item -->
				<li> 유재석 </li>  <!-- item -->
				<li> 신동엽 </li>  <!-- item -->
			</ul><!-- list e -->
			
			<!-- 글머리: 번호 / ol 태그 안에 li 태그 -->
			<ol> <!-- order list s -->
				<li> 강호동 </li>  <!-- item -->
				<li> 유재석 </li>  <!-- item -->
				<li> 신동엽 </li>  <!-- item -->
			</ol> <!-- order list e -->
			
		</body>

실행 화면

Untitled

  1. <form> </form> : 폼[양식/형식] / 통신 기능

    1. 사용자가 키보드/마우스 입력/선택 할 수 있는 서식

    2. <input/> : 입력 상자

      1. type = “text” : 문자 입력 [기본 값]
      2. type = “password” : 가려진 문자 형식 [ 주로 패스워드, 주민등록번호 끝 6자리 등]
      3. type = “radio” : 동그라미 선택 버튼[라디오 버튼, 동일한 name 속성 내에 단일 선택]
      4. type = “checkbox” : 네모 선택 버튼[체크 박스 버튼, 동일한 name 속성 내에 복수 선택]
      5. name = “ 식별자 이름“ : 식별할 수 있게 쓰는 속성
      6. type = “button” : 버튼 *추후 이벤트 버튼 사용
      7. type = "submit : 폼 전송 *추후 데이터 통신(전송) 가능
      8. type="reset" : 입력 초기화 *폼 초기화
      9. value = “값” : 입력 상자에 입력된 데이터
      10. type = “color” : 색상 선택
      11. type = “date” : 날짜 선택
      12. type = "datetime-local” : 날짜-시간 같이 선택
      13. type ="email" : 이메일 형식(@)형식 입력
      14. type = "month" : 월 선택
      15. type = “time" : 시간만 선택
      16. type = “week" : 주 선택
      17. type = "range" : 범위 스크롤
      18. type = "number : 범위 내 숫자 입력
      19. type = “file” : 첨부 파일 (한 개만 가능)
      20. multiple ="multiple" : 추가하면 첨부 파일 한 개만 가능한 것을 여러 개 업로드 가능하도록 바꿈
      21. readonly ="readonly" : 읽기 모드[입력, 수정 불가능]
      22. disabled="disabled” : 사용 금지 모드 → 클릭 조차도 안됨
      23. placeholder="문자열” : 입력 가이드 [ 입력 전에 무엇을 입력해야 할지 주고, 입력시 사라짐]
      24. autofocus = "autofocus" 포커스[마우스 커서 (깜박임)] 위치
      25. 라디오 버튼과 체크 박스 버튼의 경우, checked = "checked" : 기본 값으로 체크되어 있게 만드는 속성[체크 상태]
      26. range의 경우, min = 0 max = 10 : 0부터 10까지 범위 지정
      27. number의 경우, min = 0 max = 10 : 0부터 10까지 범위 지정

      c.<textarea></textarea> : 긴 글 텍스트

      1. rows = “가로 텍스트 길이”
      2. cols = “세로 텍스트 길이”
      3. style = “resize : none” : 사이즈 고정

      d. <select></select> : 목록 상자

      e. <option></option> : 목록 항목 값

      f. <fieldset></fieldset> : 입력 상자 그룹

      g. <legend></legend> : 그룹 타이틀

      h. <hr/> : 구분 선(밑줄)

<!-- 
	자동완성 : ctrl + 스페이스바
		예) <input type = "password"/> 
		    <in 입력 후 ctrl + 엔터로 선택 후 엔터  => 2~3글자 입력후 목록에서 선택후 엔터
 -->

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>Form tag</title>
		</head>
		<body>
			<form> <!-- form s -->
			
				<fieldset> <!-- 입력 그룹 s -->
					<legend> 자주 사용되는 input </legend><br/> <!-- 그룹 타이틀 -->
				
				
					<input value = "인사과" readonly ="readonly"/><br/>   <!-- 입력 상자 -->
					<input type = "text" disabled="disabled" placeholder="신입"/><br/>          <!-- 문자 -->
					<input type = "password" placeholder="패스워드" autofocus = "autofocus"/><br/>          <!-- 패스워드 -->
					<input type = "radio" name = "email" checked = "checked"/> 예<br/>          <!-- 동그라미 선택 버튼, 라디오 버튼 -->
					<input type = "radio" name = "email"/> 아니오<br/>          <!-- 동그라미 선택 버튼, 라디오 버튼 -->
					<input type = "checkbox"name = "item"/> 뉴스 <br/>         <!-- 네모 선택 버튼, 체크 박스 버튼 -->
					<input type = "checkbox"name = "item"/> 드라마<br/>         <!-- 네모 선택 버튼, 체크 박스 버튼 -->
					
					<textarea rows = "10" cols = "5" style = "resize:none"></textarea> <br/>    
					
					<select>
						<option> 네이버 </option>
						<option> 카카오 </option>
						<option> 네이트 </option>
					</select> <br/>    
					
					<hr/> <!-- 구분선 -->
					
					<input type = "file"> <br/> <!-- 첨부파일 하나만 -->
					<input type = "file" multiple ="multiple"> <br/> <!-- 첨부파일 여러개 O -->
					
					<hr/>
					
					<input type = "button" value = "인증">
					<input type = "submit" value = "폼 전송"/>
					<input type="reset"   value = "입력 초기화"> <br/> 
				</fieldset> <!-- 입력 그룹 e -->
				
				<fieldset>
				
					<legend> html5 이상부터 추가된 input </legend><br/>
					<input type = "color"/> <br/> <!-- 색상 선택 -->
					<input type = "date"/> <br/>  <!-- 날짜 선택 -->
					<input type = "datetime-local"/> <br/> <!-- 날짜-시간 같이 선택 -->
					<input type ="email"/> <br/> <!-- 이메일 형식 입력 -->
					<input type = "month"/><br/>  <!-- 월 선택 -->
					<input type = "time"/><br/>  <!-- 시간 선택 -->
					<input type = "weak"/><br/>  <!-- 주 선택 -->
					<input type = "range" min = 0 max="10"/><br/>  <!-- 범위 스크롤 -->
					<input type = "number" min="0" max="10"/> <br/> <!--범위 내 숫자 입력 -->
					
				</fieldset>

				
			</form> <!-- form e -->
		</body>
	</html>

실행 화면

Untitled