-사용자가 보내는 데이터는 이름과 값이 결합된 문자열 형태로 전달이 되며, 각 이름과 값의 쌍은 ‘&’ 기호로 구분한다.
-서버로 보낼 수 있는 최대 글자수는 255자이다.
-URL을 보면 어떤 데이터를 전송하는지 알 수 있기에, 보안에 취약하다.
4.POST 방식 (*****)
-마지막에 파라미터를 붙여서 데이터를 전송하는 방식이다.
-GET 방식과 다르게 글자수 제한이 없으며, URL을 통해 어떤 데이터를 전송하는지 볼 수 없기에 보안에 취약하지 않다.
[ 1. 이미지 태그 ]
<!DOCTYPE html>
<html lang="ko">
<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>이미지 태그</title>
</head>
<body>
<h3>이미지 기본 표현</h3>
<img src="https://picsum.photos/id/684/100/122" alt="이미지가 표시되지 않습니다.">
<!-- alt는 만약 이미지가 표시할 수 없는 브라우저의 경우 대체해서 보이는 문구를 지정할 수 있다. -->
<h3>이미지에 설명 추가 & 오른쪽 정렬</h3>
<img src="https://picsum.photos/id/684/100/122" title="HTML5 로고 이미지" style="float: right;" alt="이미지가 표시되지 않습니다.">
<!-- inner StyleSheet - float : right를 통해 이미지가 오른쪽으로 옮겨지며, title을 통해 마우스를 올려 놓을때 나타나는 문구를 지정했다. -->
<!-- float은 위로 띄워서 위치를 움직이기에 clear을 사용하지 않으면, 다음 요소가 밑으로 들어갈 수 있다. -->
<h3>이미지의 크기를 픽셀 잔위로 조정</h3>
<img src="https://picsum.photos/id/684/100/122" style="width: 50px; height: 60px;" alt="이미지가 표시되지 않습니다.">
<h3>이미지의 크기를 %단위로 조정</h3>
<img src="https://picsum.photos/id/684/100/122" width=50% height=40% alt="이미지가 표시되지 않습니다.">
<!-- 이때 %는 뷰포트 기준이기에, 가로를 뷰포트의 50% 세로를 뷰포트의 40%로 나타내라는 의미였다. -->
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<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>비디오 태그 - poster 속성</title>
</head>
<body>
<h3>비디오 자동 재생</h3>
<video src="./video/sample-video.mp4" controls loop autoplay width="300" height="250"></video>
<h3>비디오 수동 재생</h3>
<video src="./video/bear.mp4" controls width="300" height="250"></video>
<h3>비디오 다중 재생 - 비디오 파일이 현재 파일 폴더에 있는 경우</h3>
<video controls width="300" height="250">
<source src="./video/bear.mp4" type="video/mpeg">
비디오 파일을 재생할 수 없습니다.
</video>
<h3>비디오 다중 재생 - 비디오 파일이 웹 사이트에 있는 경우</h3>
<video controls autoplay width="300" height="250" poster="./img/wait.jpg">
<source src="./video/bear.mp4" type='video/mp4; codecs="avc1,mp4a"'>
<source src="./video/bear.ogv" type='video/ogg; codecs="theora,vorbis"'>
비디오 파일을 재생할 수 없습니다.
</video>
<!-- poster 속성을 통해서 비디오가 재생되기 전까지 보여주는 이미지를 지정할 수 있다. (**) -->
</body>
</html>
[ 6. 폼 태그 - GET 방식 (*****) ]
<!DOCTYPE html>
<html lang="ko">
<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>폼 태그 - GET 방식(*******)</title>
</head>
<body>
<h2>GET 방식으로 데이터 전송</h2>
<!-- HTTP method : GET / POST / ... -->
<form name="form1" action="http://localhost:8080" method="get">
<!-- <form name="form1" action="" method="get"> -->
<!-- action은 이 양식을 처리할 프로그램을 지정한다. (**) -->
<!-- action의 이름은 대소문자를 구분해서 작성해야 한다.(***) -->
<!-- action 속성을 비우게 되면, 폼 데이터를 자신의 페이지에서 받게 된다. -->
<!-- method는 action에 지정한 프로그램에게 이 양식을 어떻게 전달할지 지정하는 것이며, 주로 get과 post를 사용한다. -->
<!-- nc -L -p 8080을 통해 확인할 수 있다. -->
<!-- GET 방식은 GET /?name=yoseph&major=photo와 같이 URI의 query_string 형태로 전송되고 있음을 알 수 있다.(***) -->
<!-- 위와 같은 형식을 query_string이라고 부른다. (query_string: ?요청파라미터1=값1&요청파라미터2=값2&...) (**) -->
<!-- 하지만 GET은 소량의 데이터만을 전송할 수 있다. (***) -->
<!-- action에 프로그램을 지정하지 않으면, 해당 페이지에서 받게 되기 때문에 URI에서 표시된다. -->
<!-- ex. http://127.0.0.1:5500/HTML5/18.get.html?name=monimoni&major=photo -->
<p>이름 : <input type="text" name="name"></p>
<p>전공 : <input type="text" name="major"></p>
<!-- value 속성은 지정할 수도 안할수도 있지만, name은 반드시 생성해야 한다.(**) -->
<!-- 이때에는 text에 작성한 내용이 값으로 가야하기 때문에 value를 지정하지 말아야 한다. -->
<p></p>
<input type="submit" value="전송">
<!-- 이름=값의 형식으로 프로그램에 전송되게 된다. -->
<input type="reset" value="다시 작성">
<!-- reset은 작성하기 이전의 기본 폼으로 돌아가게 된다. -->
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<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>폼 태그 - post 방식(*******)</title>
</head>
<body>
<h2>POST 방식으로 데이터 전송</h2>
<!-- HTTP method : GET / POST / ... -->
<form name="form1" action="http://localhost:8080" method="post">
<!-- <form name="form1" action="" method="get"> -->
<!-- action은 이 양식을 처리할 프로그램을 지정한다. (**) -->
<!-- action의 이름은 대소문자를 구분해서 작성해야 한다.(***) -->
<!-- action 속성을 비우게 되면, 폼 데이터를 자신의 페이지에서 받게 된다. -->
<!-- method는 action에 지정한 프로그램에게 이 양식을 어떻게 전달할지 지정하는 것이며, 주로 get과 post를 사용한다. -->
<!-- nc -L -p 8080을 통해 확인할 수 있다. -->
<!-- GET 방식에서는 바로 아래에서 받은 내용을 나타냈으나, -->
<!-- POST 방식의 경우 가장 마지막에 name=ddddddd&major=photo으로 표시해 주기 때문에 용량의 제한에서 자유로운 편이다. -->
<!-- 단, POST 방식은 qeury-String을 표시하지는 않는다. -->
<!-- POST방식은 자신의 페이지에서도 내용을 URI로 보여주지 않기에, 중요 내용의 경우 POST 방식을 주로 사용한다. -->
<p>이름 : <input type="text" name="name"></p>
<p>전공 : <input type="text" name="major"></p>
<!-- value 속성은 지정할 수도 안할수도 있지만, name은 반드시 생성해야 한다.(**) -->
<!-- 이때에는 text에 작성한 내용이 값으로 가야하기 때문에 value를 지정하지 말아야 한다. -->
<p></p>
<input type="submit" value="전송">
<!-- 이름=값의 형식으로 프로그램에 전송되게 된다. -->
<input type="reset" value="다시 작성">
<!-- reset은 작성하기 이전의 기본 폼으로 돌아가게 된다. -->
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<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>버튼 태그</title>
</head>
<body>
<form>
<h3>1. Button 태그 사용하기!</h3>
<button type="button">클릭-1</button>
<!-- button 태그는 form 태그 안에서 사용해야 한다. -->
<h3>2. Input 태그 사용하기!</h3>
<input type="button" value="클릭-2">
<h3>3. image 버튼 사용하기!</h3>
<button type="button"><img src="https://picsum.photos/id/684/70/55"></button>
<!-- 버튼에 문구가 아닌 이미지를 넣을 수도 있다. -->
</form>
<!-- button 태그에도 다양한 타입이 있는데, button / reset / submit이라는 총 3개의 타입이 있다. -->
<!-- 하지만, button태그의 경우 value로 버튼의 이름을 만드는 것이 아니라, 시작과 끝 태그 사이에 콘텐츠로써 만들어야 한다. -->
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<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>select - multiple 속성</title>
</head>
<body>
<h3>관심 있는 학습 주제를 모두 선택하세요.</h3>
<form>
<select name="subjects" size="1" multiple>
<!-- size는 보여지는 목록의 개수 이다. (size를 1로 하면 항목이 1개씩 보이고, size를 4로 하면 항목이 4개씩 보인다.) -->
<!-- multiple이라는 속성은 항목을 1개 이상 선택할 수 있게 해주는 속성이다. -->
<option value="1" selected>HTML5</option>
<option value="2">CSS3</option>
<option value="3">JavaScript</option>
<option value="4" selected>Jquery</option>
<!-- selected 속성은 해당 항목이 기본적으로 선택이 되어있는 항목으로 만들어 주며, 선택을 취소할 수도 있다. -->
</select>
<p></p>
<input type="submit" value="전송">
<input type="reset" value="다시 작성">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<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>datalist 만들기!(***)</title>
</head>
<body>
<h3>선택사항을 직접 입력하세요.</h3>
<form>
<label> 전공 분야를 입력하세요.
생년월일 : <input type="text" name="birth" placeholder="0000년 00월 00일">
<p></p>
<input type="text" list="majorlist" name="major">
<!-- list속성을 통해 list와 연동할 수 있다. -->
<!-- input태그에 readonly라는 속성을 주면 텍스트 상자에 쓰기를 제한하여 읽기만 가능하게 한다. -->
<!-- input태그에 disabled라는 속성을 주면 텍스트 상자를 비활성화 시킨다. -->
<!-- autocomplete라는 속성을 주면 사용했던 데이터를 기준으로 입력 중인 텍스트에 자동완성 기능을 줄 수 있다. -->
<!-- autofocus 속성은 페이지가 열릴 때 입력하고자 하는 폼을 처음에 선택해주는 속성이다. -->
<!-- placeholder 속성을 통해 입력하기 전에, 입력양식을 흐리게 보여줄 수 있다. (***) -->
<datalist id="majorlist">
<option value="Software">소프트웨어</option>
<option value="Robot">로봇</option>
<option value="System">시스템</option>
<option value="Service">서비스</option>
<option value="Education">교육</option>
</datalist>
<!-- 콤보박스(입력할 수도, 선택할 수도 있음)를 만들 때에는 input + datalist의 형태로 만든다.(***) -->
<!-- datalist는 이전에 입력한 내용도 항목으로 보여준다. -->
<!-- 주로 검색어 입력창을 만들 때 사용한다. (**) -->
<!-- 더 다양한 폼 양식은 sample17.html 참고!!(****) -->
<p></p>
<input type="submit" value="완료">
<input type="reset" value="다시 작성">
</label>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<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>공간 분힐 태그</title>
</head>
<body>
<h3>div / span 공간 분할 조합</h3>
<div style="height: 70px; width: 80px; background-color: yellow;">머리말 영역</div>
<div style="height: 50px; background-color: rgb(248, 133, 25);">본문 영역</div>
<!-- div 영역은 세로뿐만이 아니라 가로 길이도 조절이 가능한 것 처럼 보이지만, 사실상 공간을 차지 하고 있는 것을 알 수 있다. -->
<span style="height: 700000px; background-color: rgb(255, 51, 0);">왼쪽 텍스트 영역</span>
<span style="height: 700000px; background-color: rgb(17, 0, 255);">가운데 텍스트 영역</span>
<span style="height: 700000px; background-color: greenyellow;"">오른쪽 텍스트 영역</span>
<!-- span태그는 콘텐츠 영역만을 차지하기에 가로와 세로 길이 조절이 불가능하다. -->
<div style="height: 70px; background-color: rgb(255, 0, 140);">꼬리말 영역</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<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>CSS 스타일 시트(***)</title>
<!-- 3. 외부 스타일 시트 적용 방법 -->
<link rel="stylesheet" href="/HTML5/css/01.cssstyle_external.css">
<!-- link 태그로 자동 생성된다. -->
<!-- link 태그는 시작태그만 존재하는 태그이다. -->
<!-- 현업에서는 외부 스타일 시트를 적용하는 방법을 가장 많이 사용된다. -->
<style>
p2{
/* 2. 내부 스타일 스트 적용 방법 */
color: blue;
}
</style>
</head>
<body>
<!-- 1. 인라인 스타일 시트 적용 방법 -->
<p1 style="color: red;">인라인 스타일 시트 적용</p1><br>
<!-- 사용자 정의 요소는 인라인 요소로 생성된다. -->
<p2>내부 스타일 시트 적용</p2><br>
<p3>외부 스타일 시트 적용</p3>
</body>
</html>
