# HTML의 문서 구조화
- 기존 HTML의 한계
: 웹 문서 구조를 표현하는 태그 없음
-> 구조 파악 불가
=> 검색엔진의 출현으로 웹 구조 탐색의 용이성이 중요해짐
- 시맨틱 웹
: 웹 문서를 구조화하여 의미있는 내용탐색이 가능
ex) 구글 검색엔진 -> 시맨틱 태그 검색
-> 시맨틱 태그로 구조화한 웹페이지 사례
- 시맨틱 태그
| 시맨틱 태그 | 내용 |
| <header> | - 페이지나 섹션의 머리말 표현 - 페이지 제목, 페이지를 소개하는 간단한 설명 |
| <nav> | -하이퍼링크를 모아놓은 특별한 섹션 -페이지 내 목차를 만드는 영역 |
| <section> | - 문서의 장 혹은 절을 구성 - 웹 페이지에 여러 장 가능 - 헤딩 태그(<h1-h6>)를 사용하여 절 혹은 주제 기입 |
| <article> | - 본문과 연관있으나 독립적인 컨텐츠를 담음 - 보조기사, 댓글, 포스트 등 독립적 내용 - <article>에 담은 내용이 많은 경우, 여러 section을 둘 수 있음 |
| <aside> | - 본문에서 약간 벗어난 노트나 팁 - 관련 기사, 삽입 어구 등 - 페이지나 오른쪽 혹은 왼쪽에 주로 배치 |
| <footer> | - 꼬리말 영역, 저자나 저작권 정보 |
#주의사항
: 문서의 모양은 구조와 별개
: 즉, 태그를 사용한다고 위치와 색, 모양이 자동으로 결정되는 것 x
=> 개발자가 CSS3를 활용하여 직접 위치와 색, 모양을 지정
# 시맨틱 태그들
| 구분 | 태그 | 내용 |
| 시맨틱 블록 |
<figure> | 책, 보고서, 본문에 삽입하는 사진 , 차트, 삽화 등 |
| <details> &<summary> |
<details> 상세정보를 담는 시맨틱 블록 태그 <summary>는 <details>로 구성되는 블록의 제목 표현 |
|
| 시맨틱 인라인 |
<mark> | 중요한 텍스트 표시 |
| <time> | 텍스트 내용이 시간임을 나타냄 | |
| <meter> | 주어진 범위나 % 데이터 량 표시 | |
| <progress> | 작업의 진행정도 표시 |
1) <figure> 태그 : 하나의 그림으로 블록화
<figure id="1-1">
<figcaption>alert() 함수 활용</figcaption>
<pre>
<code>function f() { alert("경고합니다"); }</code>
</pre>
<hr>
<small>실행결과</small>
<pre>
<img src="media/alert.png" alt="실행결과">
</pre>
</figure>
2) <details>와 <summary> 태그
: summary - 핸들에 들어갈 제목
: details - 핸들을 클릭하면 나타날 내용
<body>
<h3>details와 summary 태그</h3>
Q & A 리스트
<hr>
<details>
<summary>Question 1</summary>
<p>웹 개발자가 알아야 하는 언어 3 가지?</p>
</details>
<details>
<summary>Answer 1</summary>
<p>HTML5, CSS, Javascript</p>
</details>
</body>
3) 시맨틱 인라인 태그 : <mark> / <meter> <progress>
<p>내일 <mark>HTML5 시험</mark><br>
시간은 <time>09:00</time><br>
난이도 <meter value="0.8" max="1.0">80%</meter><br>
자료 업로딩(20%)
<progress value="2" max="10"></progress><br>
</p># 웹 폼
: 웹페이지에서 사용자 입력을 받는 폼
: 로그인, 등록, 검색, 예약, 쇼핑 등
폼 요소 : 폼을 만드는 다양한 태그
ex) <input> / <textarea> / <select>
- <form>
<form name= 폼 이름
method= "get" |"post"
action =
target = "윈도우 이름>
name : 폼의 이름
action
: 폼 데이터를 처리할 웹서버 응용프로그램의 이름
: submit이 눌리면 이 웹서버 응용프로그램 실행 요청
: 웹 서버 응용프로그램은 JAVA, JSP, PHP, C/Cpp등 다양한 언어로 작성
method
: 폼 데이터를 웹서버로 전송하는 형식
: GET / POST
target
: 웹 서버 응용프로그램으로부터 전송받은 데이터를 출력한 윈도우 이름
- 폼 요소의 종류
| 구분 | 폼 요소 | 설명 |
| 텍스트 | <input type="text"> | 한줄 텍스트 입력창 |
| <input type="password"> | 암호 입력을 위한 한줄 텍스트 입력창 | |
| <textarea> | 여러 줄의 텍스트 입력창 | |
| 버튼 | <input type="button"> | 단순 버튼 |
| <input type="submit"> | 웹 서버로 데이터 전송 버튼 | |
| <input type="reset"> | 폼 데이터 초기화 버튼 | |
| <input type="image"> | 이미지 버튼 | |
| <button type="button" | "reset" |"submit" |> | 단순버튼, reset, submit 버튼 | |
| 선택형 입력 |
<input type="checkbox" | "radio"> | 체크박스와 라디오 버튼 |
| <select> | ||
| 색깔 | <input type="color"> | 컬러 다이얼로그 출력 |
| 시간 | <input type="month" | "week" | "date" | "datetime-local"> | 년,월,일 시간 등의 시간 정보 입력창 |
| 형식검사 | <input type="url" | "email" | "tel" | "search" > | 이메일, url, 전화번호 등 형식검사 기능 |
| 기타 | <input type="number" |"range"> | 스핀버튼과 슬라이드바로 숫자 입력 |
| <input type="file"> | 로컬 컴퓨터 파일 선택 |
1) 텍스트 입력 type = "text" | "password" | <textarea>
- text / password
<input type ="text" | "password"
name= "요소이름"
maxlength = "문자개수"
size="문자 개수"
value = "초기텍스트>
maxlength :입력할 수 있는 문자의 최대 개수
size : 입력창의 크기
- textarea
<textarea cols="열 개수"
rows ="행 개수"
name="요소 이름"
wrap = "OFF" | "HARD" |"SOFT">
초기 출력될 텍스트
</textarea>
cols, rows : 입력창의 크기를 나타내는 가로 세로 문자수
wrap : 자동 줄바꿈 처리 지정
#텍스트 입력 예제
<form>
이름 : <input type="text" value=""><br>
암호 : <input type="password" value="" maxlength="4"><br>
자소서 : <textarea cols="20" rows="5">이곳에 자기소개서 작성</textarea>
</form>
- 데이터 목록을 가진 텍스트 입력
=> datalist 와 id명 연결
: <input type="text" list="리스트 id">
: <datalist id="리스트 id">
<form>
나라 : <input type="text" name="country" list="countries"><br>
<datalist id="countries">
<option value="가나">
<option value="스위스">
<option value="브라질">
</datalist>
보고싶은것 : <input type="text" list="what"><br>
<datalist id="what">
<option value="산">
<option value="바다">
<option value="도시">
</datalist>
</form>
2) 버튼 입력
2-1) <input type = "button" | "reset" | "submit" | "image"
<input type = "button" | "reset" | "submit" | "image"
name ="버튼 이름"
value ="문자열"
src =" 이미지 URL">
value :버튼에 출력될 문자열
src : type="image"일 경우 필요한 것
2-2) <button type = "button" | "reset" | "submit" | >
<button type = "button" | "reset" | "submit"
name ="버튼 이름"
value ="문자열">
버튼 문자열이나 이미지 </button>
#버튼 만들기 예제
<form>
검색: <input type="text" size="10" value="">
<input type="button" value="Q1">
<button type="button">Q2</button><br>
submit 버튼 : <input type="submit" value="전송1">
<button type="submit">전송2</button><br>
reset 버튼 : <input type="reset" value="리셋1">
<button type="reset">리셋2</button><br>
이미지버튼 : <input type="image" src="media/button.png" alt="이미지 버튼">
<button type="button"><img src="media/button.png" alt="이미지 버튼"></button>
</form>
3) 선택형 입력 : 체크박스 , 라디오 버튼, 콤보박스
체크박스 : 각각 선택이 가능
라디오 : name으로 묶은 애들 중에 하나면 선택가능
<input type="radio" | "checkbox"
name= "요소 이름"
value = "요소 값"
checked>
checked : 초기 체크상태 표시
value :폼 요소가 선택된 상태일 때 웹서버에 전송되는 값
#체크박스 예제
<form>
짜장면 <input type="checkbox" value="1">
짬뽕 <input type="checkbox" value="2" checked>
탕수육 <input type="checkbox" value="3">
</form>
#라디오 예제
<form>
<input type="radio" name="china" value="1">
짜장면<img src="media/jajang.png"><br>
<input type="radio" name="china" value="2" checked>
짬뽕<img src="media/jjambbong.png"><br>
<input type="radio" name="china" value="3">
탕수육<img src="media/tangsuyuk.png">
</form>
#콤보박스 : <select>
- 드롭다운 리스트에 목록 출력 -> 목록 중에 하나 선택
- <option>태그로 하나의 목록 출력
<select name = "요소 이름"
size = "개수"
multiple>
여러개의 <option> </option>으로 선택 항목 출력
</select>
size : 콤보박스 창 크기
multiple : 다수항목 선택 가능 여부
<option value = "옵션 값"
selected>
항목 문자열
</option>
value : 항목이 선택되었을 때 웹 서버에 전송되는 값
selected : 초기에 선택 상태로 출력
#콤보박스 예제
<form>
<select name="china">
<option value="1">짜장면</option>
<option value="2" selected>짬뽕</option>
<option value="3">탕수육</option>
</select>
</form># <label>로 폼 요소 묶기
: 캡션과 폼 요소를 한단위로 묶음
-> 선택형에서 캡션을 클릭해도 선택 처리
<label for="폼 id">
<input type="text" id="폼 id">
</label>
#예제 =>그림을 클릭해도 선택효과
<form>
<label>
<input type="radio" name="china" value="1">
짜장면 <img src="media/jajang.png">
</label><br>
<label>
<input type="radio" name="china" value="2" checked>
짬뽕 <img src="media/jjambbong.png">
</label><br>
<label>
<input type="radio" name="china" value="3">
탕수육 <img src="media/tangsuyuk.png">
</label>
</form>#기타 입력 폼
# 색 입력 폼 : <input type="color" value="초기값">
<form>
색 선택 <input type="color" value="#00BFFF"
onchange="document.body.style.color=this.value">
</form>
# 시간 정보 관련 입력 폼
| type 속성값 | 입력 데이터 | value의 형식 |
| <input type="month"> | 2016-09 | |
| <input type="week"> | 2016-W16 | |
| <input type="date"> | 2016-09-01 | |
| <input type="datetime-local"> | 2019-09-01T21:30:10.32 | |
| <input type="time"> | 21:30 |
#스핀과 슬라이드 바 : input type="range" | "number"
#스핀
<input type="number"
min = "최소값"
max = "최대값"
step = "증감 단위">
#range와 list 연결 (중요) == datalist와 input 연결
<input type="range"
min="최소값"
max= "최댓값"
list="리스트 이름">
<datalist id="리스트 이름">
#예제
<form>
지속시간 (0.0~10.0시간) :
<input type="number" min="0.0" max="10.0"
step="0.5"><br><br>
온도 설정 : 10°
<input type="range" min="10" max="30"
list="temperatures">30°
<datalist id="temperatures">
<option value="12" label="Low">
<option value="20" label="Medium">
<option value="28" label="High">
</datalist>
</form>
#형식을 갖춘 텍스트 입력
#placeholder->입력 형식에 관한 힌트 주기
| 종류 | 태그 | |
| url | <input type="url" placeholder="http://"> | |
| 이메일 | <input type="email" placeholder="id@host"> | |
| 전화번호 | <input type="tel" placeholder="010-1234-5678"> | |
| 검색어 입력 | <input type="search" palceholder="검색어"> |
#폼 요소의 그룹핑 ->fieldset / legend
<filedset> ->여러가지 폼 요소를 그룹핑
<legend>-> 그룹박스의 제목으로 넣을 거면 무조건 첫번째에 와야함
<form>
<fieldset>
<legend>회원정보</legend>
이메일 : <input type="email"><br>
홈페이지 : <input type="url"><br>
전화번호 : <input type="tel">
</fieldset>
<small>질문 : Tel. 010-111-1111</small>
</form>
'웹 공부 > - 명품 웹프로그래밍' 카테고리의 다른 글
| [명품 웹프로그래밍] CH2. HTML 기본문서 만들기 (0) | 2023.09.12 |
|---|
