D38,39,40 FRONT(프론트 1-3DAY)
20241115-1118,1119
태그관련검색 사이트 https://www.w3schools.com/
1. 글자관련태그
1. <html lang="ko"> </html>
: html문서의 시작과 끝을 표시하는 태그. lang속성은 현재 문서가 어느나라 언어로 되었는지 표시한다.
2. <head> </head>
: 문서의 상단을 의미 현재 문서의 정보와, 제목, 설명 및 스크립트, 스타일정보를 선언하는 영역.
3. meta
: 웹페이지에 대한 정보를 표시하기위한 용도의 태그. 웹브라우저와 검색엔진에 의해 해석된다.
<meta charset="UTF-8">
<meta name="generator" content="VScode">
<meta name="author" content="mkm">
<meta name="title" content="글자관련 태그를 공부하기 위한 페이지">
<meta name="content" content="p태그, h태그 , storng태그 등을 공부한다.">
<meta name="description" content="p태그, h태그 , storng태그 등을 공부한다.">
★글자 관련 태그
4. <title> </title>
: 문서의 제목을 작성하는 태그
5. <body> </body>
: 문서의 내용부분을 의미 화면에 출력해서 보여주는 모든 정보 및 내용들을 작선하는 영역
6. HTML(Hyper Text Markup Language)
- http에서 사용되는 웹문서.
- 웹 페이지의 구조를 정의하는 마크업 언어
7. 마크업(Markup)
- 웹 페이지 상에서 데이터를 어떤 형태로 출력할 것인지를 지시하는 태그.
- HTML에서는 특정 문자열을 태그(마크업)로 둘러싸서 문자열에 의미를 부여하고 문서를 구조화한다.
- 태그(Markup)의 구성요소
<태그명 속성명="속성값">HTML</태그명>
※태그 작성시 주의사항
1) 대,소문자를 가리지 않으나 "소문자"가 관례
2) 시작태그와 종료태그는 같아야 한다.
3) 파일의 확장자는 html, htm
4) html문서에서 공백은 항상 1개로만 인식한다. 공백을 여러개 추가하고 싶으면 를 이용해야 한다.
♣ HTML은 자바와 같은 언어?
- HTML은 웹페이지의 구조와 콘텐츠를 표시하는 용도로 사용 그 외의 기능은 없다. 따라서 프로그래밍 언어로 불리지는 않는다.
8. <br> 띄어쓰기 및 줄바꿈 태그
9. <h1> </h1> 제목태그 폰트 사이즈 조절 가능 (h1 ~ h6)
★ 에밋자동완성 h${h$ 태그입니다}*6
10. <hr> 가로로 구분선을 하나 만들어주는 태그
11. <p> </p>
: 문단 영역을 나누는 태그, 개행을 위해서는 별도의 <br>태그를 추가필요
p는 (Paragraph)의 약자. 비슷한 기능을 하는 태그로는 <pre> 태그가 존재
12. <pre> </pre>
: preFormatted txt
pre태그는 여러 공백들을 인식 줄바꿈 등을 포함하여 입력한 내용을 "100%" 그대로 표현하는 태그
♣그 밖의 글자관련 태그. 태그의 의미에 맞게 내용을 작성 하는 것이 중요.
13. <strong>strong </strong>
: 글자를 굵게 표시하는 태그
14. <b></b>
: 글자를 굵게 표시하는 태그
15. <em></em>
: 글자를 기울여서 표시하는 태그
16. <i></i>
: 글자를 기울여서 표시하는 태그
17. <mark></mark>
: 형광펜 효과를 주는 태그
18. <u> </u>
: 글자에 밑줄이 그어지는 태그
19. <ins> </ins>
: 글자에 밑줄이 그어지는 태그
20. <strike> </strike>
: 글자에 취소선을 넣어주는 태그
21. <s> </s>
: 글자에 취소선을 넣어주는 태그
22. <del> </del>
: 글자에 취소선을 넣어주는 태그
23. <small> </small>
: 글자를 작게 표현해주는 태그
24. <big> </big>
: 글자를 크게 표현해주는 태그
25. <abbr title="Internet Of Things">IOT</abbr>
: 약어의 전체 의미를 설명하는 제목을 추가, 사용자가 마우스를 올렸을 때 약어의 의미를 확인가능.
26. <sub> </sub>
: 기본글자에 아래첨자를 추가할 때 사용
예)물리학에서 물 분자를 표현할 때 H₂O처럼 H의 아래에 2를 표시.
27. <sup> </sup>
: 기본글자에 윗첨자를 추가할 때 사용
예) "E = mc²"로 표시되어, "2"가 위첨자
28. <code> </code>
: 코드 조각을 나타내는 태그
♣글자 관련 태그 응용1
태그들은 해당 태그 내에서 중첩으로 사용 가능하다.
<b>굵은</b> 글자를 사용할 수도 있고,
<i>기울이거나</i>, <del>취소선</del>을 넣는 등 다양하게 사용할 수 있다
<mark>형광펜</mark>을 넣어 글자를 강조할 수 있다. 
2. 목록관련태그
1. <ur> </ur>
: 태그는 "unordered list"의 약자로, 순서가 없는 목록을 만들 때 사용
2. <li> </li>불릿(bullet)기호 : 꽉찬 원, 비어있는 원, 네모, 숫자 등 변경 가능
2. <ol> </ol>
: 순서 있는 목록 태그, 순서 있는 목록 태그는 기본적으로 1부터 시작하는 숫자값
숫자값 대신 다른값으로 시작하고 싶다면 TYPE속성을 추가하여 변경
예)<ol type="i"> </ol>
start 속성을 이용하여 시작값 변경가능 <ol type="a" start="5" > </ol>
속성값을 역순으로 표기하고 싶을 때 <ol type="1" start="5" reversed > </ol>
3. <dl>
<dt>이곳은 제목을 작성하는 영역</dt>,
<dd>설명을 작성하는 영역.</dd>
</dl>
(definition list) : 설명과 관련된 목록 태그 
3. 표관련 태그
표(table) : 문서에서 대량의 데이터를 정리해서 표현하고자 할 때 사용 행과 열로 이루어져 있다
표를 구성하는 태그로는
1. <table> : 표를 생성해주는 태그
2. <tr> : table row의 약어로 표의 한 행을 나타내는 태그.
3. <th> : table head 표의 제목 셀을 나타내는 태그
4.<td> : table data의 약어로 표의 일반셀을 나타내는 태그
5.<table border="1">
border 속성은 : 표의 테두리 두께
6. <caption></caption>
: 테이블의 제목을 추가하는 역할의 태그.
기본적인 표 만들기 (4행 3열)
<caption><b>웹 브라우저 종류</b></caption>
<tr>
<th width="130" height="30" >브라우저명</th>
<th width="80">제조사</th>
<th width="200">홈페이지</th>
</tr>
<tr>
<td>Edge</td>
<td>Microsoft</td>
<td>www.edge.com</td>
</tr>
<tr>
<td>Chrome</td>
<td>Google</td>
<td>www.google.com</td>
</tr>
<tr>
<td>Brave</td>
<td>Brave</td>
<td>www.brave.com</td>
</tr>
</table>
♣ 표의 행과 열을 합치는 속성
셀(th, td) 태그와 속성을 이용하여 행 , 열 단위로 합칠 수가 있다.
7. colspan = "2" : 열병합 2개의 열을 합침
8. rowspan = "2" : 행병합 2개의 행을 합침
★이력서 만들어보기 예시
<table border = "1">
<tr>
<td colspan="2" rowspan="2" width="130" height="130">사진</td>
<td width="80">이름</td>
<td width="200"></td>
</tr>
<tr>
<td>연락처</td>
<td></td>
</tr>
<tr>
<td width="70" height="50">주소</td>
<td colspan="3"></td>
</tr>
<tr>
<td width="70" height="200">자기소개</td>
<td colspan="3"></td>
</tr>
</table>
★테이블 구조 나누기
<table bordr="1">
<tfoot>
<tr>
<th>총인원</th>
<td colspan="2">3명</td>
</tr>
</tfoot>
<tbody id="tt">
<tr>
<td>홍길동</td>
<td>23</td>
<td>베트남</td>
</tr>
<tr>
<td>김갑생</td>
<td>30</td>
<td>부산</td>
</tr>
<tr>
<td>차은우</td>
<td>25</td>
<td>서울</td>
</tr>
</tbody>
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>주소</th>
</tr>
</thead>
</table>
표만들기 실습
<h2>학생 성적표</h2>
<table>
<thead>
<tr>
<th rowspan="2" >번호</th>
<th rowspan="2">이름</th>
<th rowspan="1" colspan="3">과목</th>
<th rowspan="2">총점</th>
<th rowspan="2">평균</th>
</tr>
<tr>
<th>국어</th>
<th>영어</th>
<th>수학</th>
</tr>
</thead>
<tbody id="tt">
<tr>
<td rowspan="2">1</td>
<td rowspan="2">임세윤</td>
<td>85</td>
<td>90</td>
<td>88</td>
<td rowspan="2">263</td>
<td rowspan="2">87</td>
</tr>
<tr>
<td colspan="3">특별활동 : 축국부</td>
</tr>
<tr>
<td>2</td>
<td>조용우</td>
<td>78</td>
<td>85</td>
<td>80</td>
<td>243</td>
<td>81.0</td>
</tr>
<tr>
<td>3</td>
<td>김지수</td>
<td>92</td>
<td>88</td>
<td>95</td>
<td>275</td>
<td>91.67</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">전체 학생수</td>
<td colspan="2">3명</td>
</tr>
</tfoot>
</table> 
4. 이미지 관련 태그
<img src="이미지의 경로" alt="이미지 설명 구문"
width="이미지의 가로크기(px / %)" height="이미지 세로크기"
../ ->현재 디렉토리에서 상위 디렉토리로 이동하는 명령어
src 의 시작이 / 면 "절대경로"
: 항상 최상위 디렉토리에서부터 원하는 파일을 찾고자 할때
src 의 시작이 / 가 아니면 "상대경로"
: 항상 현재파일의 디렉토리 에서부터 원하는 파일을 찾고자 할때 사용1). src 속성 alt속성
<img src="../resources/image/passion2.jpg" alt="갓생살기" width="340" height="340">
<img src="/resources/image/animal1.gif" alt="테스트1" width="340" height="340">
a. alt<br>
- 사진의 경로가 잘못되거나, 이미지를 제대로 표현할 수 없는 경우 대체 텍스트의 용도로 사용
- 시각장애인들을 위한 스크린리더에서 이미지를 읽어주는 설명 물구로 사용한다2). width height 속성
이미지의 가로, 세로길이를 속성하는 속성<br>
고정길이(px), 가변길이(%)로 지정
a. 고정길이단위(px) == 기본값 : 화면사이즈가 조정이 되어도 이미지 크기에는 변동이 없는
<img src="../resources/image/nuguri1.gif" alt="" width="200px" height="150">
<img src="../resources/image/nuguri2.gif" alt="" width="200px" height="150">
<img src="../resources/image/nuguri3.gif" alt="" width="200px" height="150">
b. 가변길이단위(%) : 화면사이즈 혹은 부모요소 사이즈에 따라 크기도 같이 변동되는 단위
<img src="../resources/image/dog1.gif" alt=""width="23%" hegiht="250">
<img src="../resources/image/dog2.gif" alt=""width="23%" hegiht="250">
<img src="../resources/image/dog3.gif" alt=""width="23%" hegiht="250">
c. 반응형 이미지 : 화면 사이즈에 따라 보여줄 이미지를 지정
<picture>
<!-- 화면의 가로사이즈가 <= 600 -->
<source srcset="../resources/image/animal1.gif" media="(max-width:600px)">
<!-- 화면의 가로사이즈가 <= 600 -->
<source srcset="../resources/image/animal2.gif" media="(max-width:1500px)">
<!-- 그 외에-->
<source srcset="../resources/image/animal3.gif" >
<!-- 위 조건을 모두 만족하지 못하는 경우-->
<img src="../resources/image/flower1.jpg">
</picture>3). image map
usempa="map의 id값"
usemap : 이미지맵을 참조하는데 필요한 속성
<img src="../resources/image/passion2.jpg" width="500px" usemap="#mymap">
<map id="mymap">
영역의 모양, 좌표 링크 대체텍스트 지정하는법
영역이 사각형 모양 : x1, y1, x2, y2 4개의 좌표를 지정
영역이 원 모양 : x1, y1, radius 지정
영역이 다각형 모양(poly) : 내가 지정한 poly 만큼 지정
<area shape="모양" coords="좌표" href="이동페이지" alt="대체">
좌표지정을 도와주는 웹사이트가 있다
-->
<area shape="rect" coords="0,0,250,504" href="http://google.com" alt="구글로 이동하기 영역">
<area shape="rect" coords="250,0,500,504" href="http://naver.com" alt="네이버 이동하기 영역">
</map>5. 미디어 관련 태그
1).오디오 관련 태그
<audio src = "오디오 파일 경로"
controls : 미디어 재생 컨트롤러 표시여부.
autoplay : 자동 재생
loop : 반복 재생
muted : 음소거
preload : 재생 전 미리 다운로드 여부
▲브라우저에 따라 지원하지 않는 속성이 존재할 수 있다.
<audio src="../resources/audio/major.mp3" controls autoplay loop muted preload="auto">
<!-- 오디오 태그를 지원하지 못하는 브라우저에서 사용하는 영역-->
당신의 브라우져는 audio를 사용할수 없습니다.
</audio>
<!-- 여러개의 소스파일을 제시하여 device별 최적화 파일을 재생할때 -->
<audio src="../resources/audio/major.mp3" controls>
<source src = "../resources/audio/Kalimba.ogg"/>
</audio>2). 비디오 관련 태그
<video src = "파일경로 " autoplay controls loop width="" hight="" poster="">
src : 오디오 파일의 경로
controls : 비디오 재생 컨트롤러 표시 여부
autoplay : 자동재생 + muted와 함께 사용하면 작동(존재는 하지만 지원하지 않는곳이 많다)
loop : 반복재상
muted : 음소거 여부
preload : 재생전 다운로드 여부
width / height : 가로/ 세로 길이
poster : 비디오의 썸네일
<video src="../resources/video/video1.mp4" controls autoplay width="400px" height="200px"
poster="../resources/image/bono.jpg">
당신의 브라우져는 video 를 사용할수 없습니다. 크롬으로 접속하세요 (대체문구)
</video>
★웹브라우저는 영상을 mp4 - webm - ogg 실행가능
☆mobile 보통 mp4 - 3gp
<video controls width="400px" height="200px">
<source> src = "../resources/video/movie.ogv" type="video/ogg">
<source> ser = "../resources/video/Wildlife.webm" type="video/webm">
<source> ser = "../resources/video/video1.mp4" type="video/mp4">
당시의 브라우져는 video 를 이용할 수 없습니다
</video> 6. 입력 양식 관련 태그
1). input 태그
- 사용자에게 값을 입력받을 수 있는 텍스트 박스 또는 체크박스등을 만들 수 있다.
아이디 : <input type="text"> <br>
비밀번호 : <input type="password"> <br>
성별 : <input type="radio"> 남자 <input type="radio"> 여자 <br>
<button>회원가입</button>
<input type="button" value="회원가입">7. 폼 관련 태그
form 태그 내의 submit 버튼 클릭시 form 내부에 작성된 사용자가 입력한 값들이 서버로 전송.
form action="" method=""
<form action="test"></form>
: 사용자가 폼을 제출할 때, 입력된 데이터가 test라는 URL로 전송된다는 것을 의미
*action 속성 : form 내에 사용자가 입력한 값들을 전달할 "서버의 경로"
*method 속성 : 데이터 전송방식을 지정하는 속성(get / post)
> get 방식 (기본값) : 데이터 전송시 사용자가 입력한 값들을
url의 쿼리 스트링으로 만들어 전송하는 방식 <
> post 방식 : 데이터 전송시 사용자가 입력한 값들이
url의 body에 담겨 전송되는 방식
form 태그 내의 제출(submit)버튼 클릭시 action에 지정한 서버로 method에
작성한 전송방식대로 사용자가 입력한 값들이 key, value 형태로 전달된다
A. fieldset-그룹을 묶는 태그
1).legeng-그룹에 제목을 붙이는 태그
<fieldset>
<legend>제목</legend>
입력 1 : <input type="text" name="test1"> <br>
입력 2 : <input type="text" name="test2"> <br>
</fieldset>
<fieldset>
<legend>제목2</legend>
입력 3 : <input type="text" name="test1"> <br>
입력 4 : <input type="text" name="test2"> <br>
</fieldset>
<input type="submit">
B. text와 관련된 input태그의 type
1). type="text"
한줄짜리 텍스트를 입력할 수 있는 텍스트 박스(기본값)
<label for=""> 아이디 : </label>
<input type="userId" placeholder="아이디를 입력하세요 "maxlength="12" required>2). type="password"
비밀번호를 입력할 수 있는 텍스트 박스
<label for=""> 비밀번호 : </label>
<input type="password" name="userPwd" placeholder="영문,숫자,특수문자8~15"
maxlength="15" required>3). type="search/url/email"
겉모습은 일반 텍스트박스와 동일하나, 각 기능에 맞게 독특한 기능들을 제공한다.
검색 : <input type="search" name="keyword" placeholder="검색어입력..." >
홈페이지 : <input type="url" name="homepage" placeholder="홈페이지주소입력.">
이메일 : <input type="email" name="email" placeholder="이메일 입력해"> 
C. textarea 태그
텍스트를 여러줄 입력 할 수 있는 테스트 박스
<fieldset>
<legend>게시글 작성</legend>
글제목 : <input type="text" name="title" size="35px" > <br>
글내용 : <textarea name="content" cols="30" rows="10" style="resize: none;"></textarea>
<input type="submit" value="작성하기">
</fieldset>
D. 숫자와 관련된 input태그의 타입들
1). type="number"
-숫자값만 작성가능한 텍스트 상자
- 스핀박스가 표시됨
수량 : <input type="number" name="amount" min="0" max="100" step="10" value="0">2). type = "range"
- 슬라이드바를 통해 값의 범위를 지정 가능
점수 : <input type="range" name="score" min="0" max="100" step="10" value="0">
<input type="submit" value="제출">
E. 날짜 및 시간과 관련된 input 태그별 타입
1). type = "date/month/week/time/datetime-local"
※전부 문자열로 이루어져 있다
date : <input type="date" name="dateIn"> <br>
month : <input type="month" name="monthIn" > <br>
week : <input type="week" name="weekIn"> <br>
time : <input type="time" name="timeIn"> <br>
datetime-local : <input type="datetime-local" name="datetimeIn"> <br>
F. 라디오버튼과 체크박스 관련 input태그의 type
1). 라디오버튼 type="radio"
- 제시한 여러개의 값들중 오직 1개만 선택해야 할때 사용
(name 속성값이 똑같은 거들끼리 하나의 그룹으로 지정)
- 서버로 데이터를 전송할때 현재 선택된 값 1개만 넘어 간다.(그룹당1개) <br>
성별 :
<input type="radio" name="gender" value="X" id="genderX" checked>
<label for="genderX">선택안함 :</label>
<input type="radio" name="gender" value="M" id="genderM">
<label for="genderM">남자</label>
<input type="radio" name="gender" value="F" id="genderF">
<label for="genderF">여자</label>
<input type="submit" value="제출">2). 체크박스 type="checkbox"
- 제시한 여러개의 값들 중 여러개를 선택하여 서버로 전송해야 하는경우 사용
- 현재 선택된(checed)값들이 넘어간다
- 넘기고자 하는 값들의 value값을 지정해 줘야 한다. 미지정시 (on이라는 문자열만 넘어간다)
취미 :
<input type="checkbox" name="hobby" id="beseball" value="야구">
<label for="beseball">야구</label>
<input type="checkbox" name="hobby" id="basketball" value="농구">
<label for="basketball">농구</label>
<input type="checkbox" name="hobby" id="soccer" value="축구">
<label for="soccer">축구</label>
<input type="submit" value="제출">
G. 추가 input 태그들 타입
1). type="color"
- 색상을 선택할 수 있는 타입
색상선택 : <input type="color" name="color" >2). type="file"
- 첨부하고자 하는 파일을 선택 할수 있는 속성 <br>
첨부파일 선택 : <input type="file" name="upload">3). type="hidden"
- 특정값을 사용자에게 입력받지 않고, 화면에 노출시키지도 않고
서버에 전송하고자 할 때 사용하는 속성 <br>
hidden : <input type="hidden" name="hidden" value="ㅋㅋㅋ">4). type="submit / reset / button"
<input type="submit" value="제출">
<input type="reset" value="초기화">
<input type="button" value="그냥버튼">5). button type="sbumit / reset / button"
<button type="submit">제출</button>
<button type="reset">초기화</button>
<button type="button">일반 버튼</button>
<button> type 속성 생략시</button>
button 태그에 type속성 생략시 기본값은 ※submit
from 태그내에서 일반 버튼기능을 사용하려면 button type="button"을 명시해야한다
H. select 태그와 option태그
- 사용자에게 직접 값을 입력받는 것이 아니라, 내가 제시간 옵션들 중 선택할수 있게하는 태그
- 서버로 데이터 전송시 현재 선택된(selected) 값이 넘어감 <br>
- 각 option 태그에 value 속성값을 지정 내가 지정한 값이 서버로 전송하거나,
명시를 하지 않고 option태그의 content영역값이 자동으로 전송되게 할수 있다
국적 :
<select name="national" >
<option value="ko">한국</option>
<option value="us">미국</option>
<option value="eu">영국</option>
<option value="ru">러시아</option>
<option selected>선택안함</option>
</select>1). datelist
datelist : select에 값이 없어도, text박스를 통해 내가 작성한 값이 서버에 전송하는 태그
국적 :
<input type="text" name="national2" list="nationalList" >
<datalist id="nationalList">
<option value="ko">한국</option>
<option value="us">미국</option>
<option value="eu">영국</option>
<option value="ru">러시아</option>
</datalist>
<input type="submit" value="제출">
폼만들기 실습
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<fieldset>
<legend>회원가입 동의서</legend>
<label>이용약관 동의(필수)</label> <br>
<textarea cols="50" rows="8" style="resize:none;">
여러분을 환영합니다.
네이버 서비스 및 제품(이하 '서비스')을 이용해 주셔서 감사합니다. 본 약관은 다양한 네이버 서비스의 이용과 관련하여 네이버 서비스를 제공하는 네이버 주식회사(이하 '네이버')와 이를 이용하는 네이버 서비스 회원(이하 '회원') 또는 비회원과의 관계를 설명하며, 아울러 여러분의 네이버 서비스 이용에 도움이 될 수 있는 유익한 정보를 포함하고 있습니다.
</textarea><br>
<input type="radio" id="agree1" name="agree_status1" value="agree">
<label for="agree1">동의합니다.</label>
<input type="radio" id="disagree1" name="agree_status1" value="disagree" checked>
<label for="disagree1">동의하지않습니다.</label>
<br><br>
<label>개인정보 수집 및 이용 동의(필수)</label> <br>
<textarea cols="50" rows="8" style="resize:none;">
개인정보보호법에 따라 네이버에 회원가입 신청하시는 분께 수집하는 개인정보의 항목, 개인정보의 수집 및 이용목적, 개인정보의 보유 및 이용기간, 동의 거부권 및 동의 거부 시 불이익에 관한 사항을 안내 드리오니 자세히 읽은 후 동의하여 주시기 바랍니다.
1. 수집하는 개인정보
이용자는 회원가입을 하지 않아도 정보 검색, 뉴스 보기 등 대부분의 네이버 서비스를 회원과 동일하게 이용할 수 있습니다. 이용자가 메일, 캘린더, 카페, 블로그 등과 같이 개인화 혹은 회원제 서비스를 이용하기 위해 회원가입을 할 경우, 네이버는 서비스 이용을 위해 필요한 최소한의 개인정보를 수집합니다. </textarea><br>
<input type="radio" id="agree2" name="agree_status2" value="agree">
<label for="agree2">동의합니다.</label>
<input type="radio" id="disagree2" name="agree_status2" value="disagree" checked>
<label for="disagree2">동의하지않습니다.</label> <br><br>
<input type="checkbox" id="agree" name="agree_status" value="agree">
<label for="agree">모두 동의합니다.</label> <br><br>
<button type="reset">취소</button>
<button type="submit">확인</button>
</fieldset>
<br><br><br>
<fieldset>
<legend>회원가입 양식</legend>
<label>* 아이디</label><br>
<input type="text" placeholder="영문 소문자, 숫자, 특수기호(_, -) 5~20" minlength="5" maxlength="20" size="35" required>
<input type="button" value="아이디 중복 확인"> <br><br>
<label>* 비밀번호</label><br>
<input type="password" placeholder="영문, 숫자, 특수문자 8~15" minlength="8" maxlength="15" size="35" required> <br><br>
<label>* 비밀번호 재확인</label><br>
<input type="password" placeholder="영문, 숫자, 특수문자 8~15" minlength="8" maxlength="15" size="35" required> <br><br>
<label>* 이름</label><br>
<input type="text" size="35" required> <br><br>
<label>* 주민등록번호</label><br>
<input type="text" size="12" maxlength="6" required> - <input type="password" size="15" maxlength="7" required> <br><br>
<label>* 성별</label> <br>
<input type="radio" id="radioX" name="gender" value="X" checked> <label for="radioX">선택안함</label>
<input type="radio" id="radioM" name="gender" value="M"> <label for="radioM">남자</label>
<input type="radio" id="radioF" name="gender" value="F"> <label for="radioF">여자</label> <br><br>
<label>* 생년월일</label><br>
<input type="date"> <br><br>
<label>주소</label><br>
<input type="text" size="35" required><br><br>
<label>우편번호</label><br>
<input type="text" size="20" required>
<input type="button" value="우편번호찾기"> <input type="checkbox" name="agree_post">우편 수신 동의 <br><br>
<label>이메일</label><br>
<input type="email" size="35"> <input type="checkbox" name="agree_email">이메일 수신 동의 <br><br>
<label>휴대폰번호</label><br>
<select>
<option>010</option>
<option>011</option>
<option>017</option>
<option>019</option>
</select> -
<input type="text" size="5" maxlength="4"> -
<input type="text" maxlength="4" size="5">
<input type="checkbox" name="agree_phone">문자 수신 동의 <br><br>
<button type="reset">초기화</button>
<button type="submit">가입하기</button>
</fieldset>
</body>
8. 영역관리 태그
- 블럭 요소 : 한 줄 단위 영역차지 요소들.
줄 바꿈 자동적용 존재하는 요소의 다음줄에 출력 (h, p, pre, dic ...)- 인라인 요소 : content 해당부분 영역 요소
자동 줄 바꿈 적용 X 옆으로 이어 출력(b, s, mark, input, img ,,, span)
div 태그와 span태그의 차이점
: 줄바꿈 적용 출력예 (div#div$*3)->단축어
</div>
<h3>div(division) 태그 : 블럭요소 (한줄단위로 영역을 차지 )</h3>
<div id="div1">첫번째 영역</div>
<div id="div2">두번째 영역</div>
<div id="div3">세번째 영역</div>
<h3>span 태그 : 인라인요소(content 영역만을 차지) </h3>
<span id="span1">첫번쨰 영역</span>
<span id="span2">두번째 영역</span>
<span id="span3">세번쨰 영역</span>
<hr>
<h2>div태그와 span태그의 차이점 : 영역 지정 방식</h2>
<h3>div태그 : 전체 감싸는 사각형 박스로 영역을 지정</h3>
<div>
눙스는 과니후와 르히에 옹흑미촙의 이달기에 머아됴지다. 오민븜알안통이 능개와 로삠얼을 배즈의 자랠으가 엔믜자 게간 야투인잔 령등하삭는데 룬넴은. 사안번버셉지 야도야슬까지 잣눈이다 츠몽옷는가 언비가 좔깅뒸앙이 넨싸는웝을 아조 고허마다. 블매 가더억 헨으코연을, 진건꺼폥델쩌고 초지오다, 티입어자 았코로네어서, 웄언 젓상띱애동읍시다 치시간한은. 으디에게 모기제느다 아브야다니 쵸티헤댙도, 간듹꺼김더가. 위르버또 뇨러막하까지 룰펀미헤 언잠은 단핸의 이다가.
서아딕서진에서 미지넌겨다 일님거 느오스이에서 욘딕이키고 길봘일어 우미욜안너임, 로루룐시와. 니브훟안고 자끈뻬옫아 홨눅구콨을 그옹후넨 모니까응딩습니다 안자안두구다. 펌난즈와 기어, 안아글원게 파단의 이둥날게 질순나바애리라. 어피입어 겅봰은 앙세를 쟈미누훳을 나소즤진으노라면 웄싯해 정어는 아츠그이던을 뤼니케 어라로간산대의. 산린시를 워뉴골닐부터 오조가 넉띠다 지레표티져 수낱뫄어야, 놀읗은 오앙알코 진봘후딘습니다. 노알놀에 즛롤재앨벼어야, 므티가, 히 호추느다. 셤잴덜아는 네노고 느루 솔어으손 도긴셔야 비으젓의, 려오를 균임보다 노란존의 두라기핼인 보오쇼조를. 라삵내 텨죠촉던 아이 위옹쳐롴은데 떼익훠궈가아 밀틀남은 연뭆다 니 시젓찬바다 껙늡핞맹의 배인테꺂이.
네데머왹으려면 기꼬게 괏전 마모금븐 식응린 자발마샐이나 갱랑는다. 하인 사자자 서댁가가 꾠제다 롱으도를, 넌라새구 걸미로 칸근. 구나희넌다 몀억부터 히머 아임스랙세웄은 다시마 훈업주가 다지션기은딱엔에서 롱와그딚녔졍과 중치히잔은 어포를 져민근그븐후다. 새젱니빼텅 반가식온마나의 다개담 라호헽조세무는 돈크이시저곤액키어야 언녀둥다여녾다 악바니존으로 저좌마아 아맬후를, 조럭스처의. 녀갈네잴을 트폽해바를 피석가그 넉지의 주스갤지 런카치에를 스서프에 나와기구어 걿사잠간 둤으어요. 저았흐노블의 간시용파, 미달피시는 씨톤이 기처내로라 팍샬나존는 간껜듯걍 드힌오나연우셋석다.
</div>
<h3>span 태그 : 문장 단위로 영역지정</h3>
<span>
눙스는 과니후와 르히에 옹흑미촙의 이달기에 머아됴지다. 오민븜알안통이 능개와 로삠얼을 배즈의 자랠으가 엔믜자 게간 야투인잔 령등하삭는데 룬넴은. 사안번버셉지 야도야슬까지 잣눈이다 츠몽옷는가 언비가 좔깅뒸앙이 넨싸는웝을 아조 고허마다. 블매 가더억 헨으코연을, 진건꺼폥델쩌고 초지오다, 티입어자 았코로네어서, 웄언 젓상띱애동읍시다 치시간한은. 으디에게 모기제느다 아브야다니 쵸티헤댙도, 간듹꺼김더가. 위르버또 뇨러막하까지 룰펀미헤 언잠은 단핸의 이다가.
서아딕서진에서 미지넌겨다 일님거 느오스이에서 욘딕이키고 길봘일어 우미욜안너임, 로루룐시와. 니브훟안고 자끈뻬옫아 홨눅구콨을 그옹후넨 모니까응딩습니다 안자안두구다. 펌난즈와 기어, 안아글원게 파단의 이둥날게 질순나바애리라. 어피입어 겅봰은 앙세를 쟈미누훳을 나소즤진으노라면 웄싯해 정어는 아츠그이던을 뤼니케 어라로간산대의. 산린시를 워뉴골닐부터 오조가 넉띠다 지레표티져 수낱뫄어야, 놀읗은 오앙알코 진봘후딘습니다. 노알놀에 즛롤재앨벼어야, 므티가, 히 호추느다. 셤잴덜아는 네노고 느루 솔어으손 도긴셔야 비으젓의, 려오를 균임보다 노란존의 두라기핼인 보오쇼조를. 라삵내 텨죠촉던 아이 위옹쳐롴은데 떼익훠궈가아 밀틀남은 연뭆다 니 시젓찬바다 껙늡핞맹의 배인테꺂이.
네데머왹으려면 기꼬게 괏전 마모금븐 식응린 자발마샐이나 갱랑는다. 하인 사자자 서댁가가 꾠제다 롱으도를, 넌라새구 걸미로 칸근. 구나희넌다 몀억부터 히머 아임스랙세웄은 다시마 훈업주가 다지션기은딱엔에서 롱와그딚녔졍과 중치히잔은 어포를 져민근그븐후다. 새젱니빼텅 반가식온마나의 다개담 라호헽조세무는 돈크이시저곤액키어야 언녀둥다여녾다 악바니존으로 저좌마아 아맬후를, 조럭스처의. 녀갈네잴을 트폽해바를 피석가그 넉지의 주스갤지 런카치에를 스서프에 나와기구어 걿사잠간 둤으어요. 저았흐노블의 간시용파, 미달피시는 씨톤이 기처내로라 팍샬나존는 간껜듯걍 드힌오나연우셋석다.
</span>
<hr>
<h1>iframe 태그</h1>
<p>
현재 html문서 내에 또 다른 html 문서를 추가하고자 할때 사용.
주로 유투브 추가용
</p>
<iframe src="3_표관련태그.html" frameborder="0" width="600" height="800"></iframe>
<iframe src="<iframe width="867" height="488" src="https://www.youtube.com/embed/Q4sF-qkyu7E" title="일할때 듣기좋은 발라드 추천 광고없는 노래모음🎶하루 종일 듣기 좋은 노래 🎶 김범수/ 임창정/ 박효신/성시경/ 백지영/ 더원/태연/박명수/에일리/찬열/ 펀치/ 펀치/ 다비치/로꼬" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>" frameborder="0"></iframe>
9. 하이퍼링크관련 태그
<body>
<!--
하이퍼 링크 기능 : 웹문서에서 다른 웹문서를 클릭으로 이동 하는 html 핵심 기능
하이퍼링크를 통해 텍스트문구, 이미지 클릭이동 가능
현재 페이지에서 다른 위치로 이동 가능
a : ahchor (참조점)
-->
<h1>하이퍼 링크 태그</h1>
<h3>a 태그를 이용한 하이퍼링크 테스트</h3>
<a href="1_글자관련태그.HTML">글자관련태그</a> <br>
<h3>인터넷이 연결되 상황이면 서비스되고 있는 웹페이지 링크가능</h3>
<ul>
<!--
_self 기본값 (현재페이지), _blank(새페이지)
-->
<li><a href="http://www.naver.com" target="_self">네이버이동</a></li>
<li><a href="http://www.google.com" target="_blank">구글이동</a></li>
</ul>
<hr>
<h3>이미지 클릭으로 링크 연결하기</h3>
<a href="http://w3schools.com">
<img src="../resources/image/bono.jpg">
</a>
<hr>
<h3 id="menu">한 페이지 내에서 점프하는 앵커 만들기</h3>
<ul>
<li><a href="#content1">본문내용1</a></li>
<li><a href="#content2">본문내용2</a></li>
<li><a href="#content3">본문내용3</a></li>
</ul>
<h4 id="content1">본문내용1</h4>
<div>
눙스는 과니후와 르히에 옹흑미촙의 이달기에 머아됴지다. 오민븜알안통이 능개와 로삠얼을 배즈의 자랠으가 엔믜자 게간 야투인잔 령등하삭는데 룬넴은. 사안번버셉지 야도야슬까지 잣눈이다 츠몽옷는가 언비가 좔깅뒸앙이 넨싸는웝을 아조 고허마다. 블매 가더억 헨으코연을, 진건꺼폥델쩌고 초지오다, 티입어자 았코로네어서, 웄언 젓상띱애동읍시다 치시간한은. 으디에게 모기제느다 아브야다니 쵸티헤댙도, 간듹꺼김더가. 위르버또 뇨러막하까지 룰펀미헤 언잠은 단핸의 이다가.
서아딕서진에서 미지넌겨다 일님거 느오스이에서 욘딕이키고 길봘일어 우미욜안너임, 로루룐시와. 니브훟안고 자끈뻬옫아 홨눅구콨을 그옹후넨 모니까응딩습니다 안자안두구다. 펌난즈와 기어, 안아글원게 파단의 이둥날게 질순나바애리라. 어피입어 겅봰은 앙세를 쟈미누훳을 나소즤진으노라면 웄싯해 정어는 아츠그이던을 뤼니케 어라로간산대의. 산린시를 워뉴골닐부터 오조가 넉띠다 지레표티져 수낱뫄어야, 놀읗은 오앙알코 진봘후딘습니다. 노알놀에 즛롤재앨벼어야, 므티가, 히 호추느다. 셤잴덜아는 네노고 느루 솔어으손 도긴셔야 비으젓의, 려오를 균임보다 노란존의 두라기핼인 보오쇼조를. 라삵내 텨죠촉던 아이 위옹쳐롴은데 떼익훠궈가아 밀틀남은 연뭆다 니 시젓찬바다 껙늡핞맹의 배인테꺂이.
네데머왹으려면 기꼬게 괏전 마모금븐 식응린 자발마샐이나 갱랑는다. 하인 사자자 서댁가가 꾠제다 롱으도를, 넌라새구 걸미로 칸근. 구나희넌다 몀억부터 히머 아임스랙세웄은 다시마 훈업주가 다지션기은딱엔에서 롱와그딚녔졍과 중치히잔은 어포를 져민근그븐후다. 새젱니빼텅 반가식온마나의 다개담 라호헽조세무는 돈크이시저곤액키어야 언녀둥다여녾다 악바니존으로 저좌마아 아맬후를, 조럭스처의. 녀갈네잴을 트폽해바를 피석가그 넉지의 주스갤지 런카치에를 스서프에 나와기구어 걿사잠간 둤으어요. 저았흐노블의 간시용파, 미달피시는 씨톤이 기처내로라 팍샬나존는 간껜듯걍 드힌오나연우셋석다.
</div>
<h4 id="content2">본문내용2</h4>
<div>
눙스는 과니후와 르히에 옹흑미촙의 이달기에 머아됴지다. 오민븜알안통이 능개와 로삠얼을 배즈의 자랠으가 엔믜자 게간 야투인잔 령등하삭는데 룬넴은. 사안번버셉지 야도야슬까지 잣눈이다 츠몽옷는가 언비가 좔깅뒸앙이 넨싸는웝을 아조 고허마다. 블매 가더억 헨으코연을, 진건꺼폥델쩌고 초지오다, 티입어자 았코로네어서, 웄언 젓상띱애동읍시다 치시간한은. 으디에게 모기제느다 아브야다니 쵸티헤댙도, 간듹꺼김더가. 위르버또 뇨러막하까지 룰펀미헤 언잠은 단핸의 이다가.
서아딕서진에서 미지넌겨다 일님거 느오스이에서 욘딕이키고 길봘일어 우미욜안너임, 로루룐시와. 니브훟안고 자끈뻬옫아 홨눅구콨을 그옹후넨 모니까응딩습니다 안자안두구다. 펌난즈와 기어, 안아글원게 파단의 이둥날게 질순나바애리라. 어피입어 겅봰은 앙세를 쟈미누훳을 나소즤진으노라면 웄싯해 정어는 아츠그이던을 뤼니케 어라로간산대의. 산린시를 워뉴골닐부터 오조가 넉띠다 지레표티져 수낱뫄어야, 놀읗은 오앙알코 진봘후딘습니다. 노알놀에 즛롤재앨벼어야, 므티가, 히 호추느다. 셤잴덜아는 네노고 느루 솔어으손 도긴셔야 비으젓의, 려오를 균임보다 노란존의 두라기핼인 보오쇼조를. 라삵내 텨죠촉던 아이 위옹쳐롴은데 떼익훠궈가아 밀틀남은 연뭆다 니 시젓찬바다 껙늡핞맹의 배인테꺂이.
네데머왹으려면 기꼬게 괏전 마모금븐 식응린 자발마샐이나 갱랑는다. 하인 사자자 서댁가가 꾠제다 롱으도를, 넌라새구 걸미로 칸근. 구나희넌다 몀억부터 히머 아임스랙세웄은 다시마 훈업주가 다지션기은딱엔에서 롱와그딚녔졍과 중치히잔은 어포를 져민근그븐후다. 새젱니빼텅 반가식온마나의 다개담 라호헽조세무는 돈크이시저곤액키어야 언녀둥다여녾다 악바니존으로 저좌마아 아맬후를, 조럭스처의. 녀갈네잴을 트폽해바를 피석가그 넉지의 주스갤지 런카치에를 스서프에 나와기구어 걿사잠간 둤으어요. 저았흐노블의 간시용파, 미달피시는 씨톤이 기처내로라 팍샬나존는 간껜듯걍 드힌오나연우셋석다.
</div>
<h4 id="content3">본문내용3</h4>
<div>
눙스는 과니후와 르히에 옹흑미촙의 이달기에 머아됴지다. 오민븜알안통이 능개와 로삠얼을 배즈의 자랠으가 엔믜자 게간 야투인잔 령등하삭는데 룬넴은. 사안번버셉지 야도야슬까지 잣눈이다 츠몽옷는가 언비가 좔깅뒸앙이 넨싸는웝을 아조 고허마다. 블매 가더억 헨으코연을, 진건꺼폥델쩌고 초지오다, 티입어자 았코로네어서, 웄언 젓상띱애동읍시다 치시간한은. 으디에게 모기제느다 아브야다니 쵸티헤댙도, 간듹꺼김더가. 위르버또 뇨러막하까지 룰펀미헤 언잠은 단핸의 이다가.
서아딕서진에서 미지넌겨다 일님거 느오스이에서 욘딕이키고 길봘일어 우미욜안너임, 로루룐시와. 니브훟안고 자끈뻬옫아 홨눅구콨을 그옹후넨 모니까응딩습니다 안자안두구다. 펌난즈와 기어, 안아글원게 파단의 이둥날게 질순나바애리라. 어피입어 겅봰은 앙세를 쟈미누훳을 나소즤진으노라면 웄싯해 정어는 아츠그이던을 뤼니케 어라로간산대의. 산린시를 워뉴골닐부터 오조가 넉띠다 지레표티져 수낱뫄어야, 놀읗은 오앙알코 진봘후딘습니다. 노알놀에 즛롤재앨벼어야, 므티가, 히 호추느다. 셤잴덜아는 네노고 느루 솔어으손 도긴셔야 비으젓의, 려오를 균임보다 노란존의 두라기핼인 보오쇼조를. 라삵내 텨죠촉던 아이 위옹쳐롴은데 떼익훠궈가아 밀틀남은 연뭆다 니 시젓찬바다 껙늡핞맹의 배인테꺂이.
네데머왹으려면 기꼬게 괏전 마모금븐 식응린 자발마샐이나 갱랑는다. 하인 사자자 서댁가가 꾠제다 롱으도를, 넌라새구 걸미로 칸근. 구나희넌다 몀억부터 히머 아임스랙세웄은 다시마 훈업주가 다지션기은딱엔에서 롱와그딚녔졍과 중치히잔은 어포를 져민근그븐후다. 새젱니빼텅 반가식온마나의 다개담 라호헽조세무는 돈크이시저곤액키어야 언녀둥다여녾다 악바니존으로 저좌마아 아맬후를, 조럭스처의. 녀갈네잴을 트폽해바를 피석가그 넉지의 주스갤지 런카치에를 스서프에 나와기구어 걿사잠간 둤으어요. 저았흐노블의 간시용파, 미달피시는 씨톤이 기처내로라 팍샬나존는 간껜듯걍 드힌오나연우셋석다.
</div>
<a href="#menu">메뉴로이동</a>
</body>
