WEB/HTML5
HTML5 - img, form
jomericano
2022. 5. 31. 07:45
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
</head>charset="UTF-8">
<title>html5 이미지 관련태그</title>
<p2>이차원 평면위에 시각적 요소</p2>
<p2>html에 주로 사용되는 이미지의 종류 : 196, gif, p</p2>
<p>jpg는 적은 용량으로 섬세한 색상과 명암 표현
1400만 색상 사용, 사진 이미지 구현에 좋음</p>
<p>gif는 256색상만 지원하기에, 주로 아이콘 같은 단색계열의 이미지 표현에 사용,
단 이미지의 배경을 투명으로 만들거나 여러개의 이미지를 합쳐 애니처럼 만들수있음</p>
<p>png jpg와 gif의 장점 따서 만든 이미지형식
섬세한 이미지표현, 투영이미지 작성 사용, 오픈소스</p>
<h2> 이미지 나타내기</h2>
<p> img 태그를 이용해서 html에 이미지 삽입 가능</p>
<p> src속성 이용해서 포함하려는 이미지 파일명 지정해야함</p>
<p> flaticon 등 무료이미지 제공사이트 이용시 다양한 이미지 손쉽게 사용</p>
<p> html에 포함시킬 이미지파일은 보통 imgs 디렉토리에 저장</p>
<img src="img/howen.jpg" width="500" height="500">
<p>어떤 이유로 인해 특정 이미지를 웹브라우저에 띄우지 못하게 된 경우
이미지를 대신할 대체 텍스트 지정하려면 alt 속성 사용</p>
<img src="img/howen.jpg" alt="도시 사진" title="city" width="100" height="100">
<h2>이미지 크기 지정</h2>
<p>width, height 속성 이용하면 이미지 크기를 설정해서 적절히 나타낼 수 있음</p>
<img src="img/수지.jpg" width="840" height="1120">
<h2> 움직이는 이미지 </h2>
<img src="img/다운로드.gif">
<img src="aimg/다운로드.gifa">
<h2> 이미지에 링크생성</h2>
<p>이미지 태그를 a 태그로 둘러싸면 이미지 클릭시 지정한 페이지/사이트 연결할 수 있음</p>
<a href = "https://pixabay.com/ko/videos/%EB%8C%80%EC%96%91-
%EB%8F%8C%EA%B3%A0%EB%9E%98-%EC%A1%B0%EB%A5%98-%ED%8C%8C%EB%8F%84-74888/">비디오사이트 이동</a>
<h2> 비디오에 링크생성</h2>
<p>html5전에는 웹페이지에 비디오 표준 없었음, 플래시리얼미디어 이젠 없어도 됨</p>
<video autoplay muted loop>
<source src="video/ocean.mp4" type="video/mp4" >
</video>
<h2>동영상 파일 포맷</h2>
<p>mp4 : 인터넷 스트리밍전용 비디오 파일포맷, mpeg4 알고리즘을 이용해서 비디오,오디오,텍스트 저장
다른 포맷보다 다소 낮은 해상도만 지원, 주로 유튜브, 페이스북, 인스타그램, 트위터 등에 사용</p>
<p>ogg : Xiph 재단에 의해 특허권으로 보호되지 않은 개방형 공개 멀티미디어 파일 형식,
mp4에 비해 덜 알려진 비디오 파일 포맷 </p>
<p>webm : 구글 주도의 개방형 공개 멀티미디어 파일 형식, 주로 유튜브에 많이 사용되지만,
mp4에 비해 다소 고사양 시스템을 요구하는 비디오 파일 포맷.
vp9 알고리즘을 사용하지만 상황에 따라 h264 알고리즘으로 대체되어 사용하기도 함</p>
실습자료 https://url.kr/z8l4jo
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML5 폼 관련요소</title>
<style>
label {font-weight: bold}
</style>
</head>
<body>
<h1>폼 관련요소</h1>
<h2>개요</h2>
<p>html에서 사용자의 정보를 입력받아 서버로 전송하려면 form요소를 사용해야 함</p>
<p>form 태그를 사용해서 입력받은 데이터를 서버로 어떻게 보낼 것인지,
전송한 데이터는 서버에 누가 처리할 것인지handler, 전송한 데이터의 유형은 무엇인지 등을 지정 </p>
<p>전송방식 method:
get 방식은 url에 질의문자열 querystring 형태로 데이터를 추가해서 전송함, 따라서 입력 데이터 노출.
또한 전송할 수 있는 데이터 크기가 제한적임. 중요도가 낮은 정보 입력 폼 없이 임의로 전달시 주로 사용
/post 방식은 데이터를 http header에 별도로 작성해서 전송함. 따라서 데이터가 외부로 보이지 않으며
전송할 수 있는 데이터의 크기가 무제한임. 또한 텍스트와 바이너리를 같이 보낼 수 있어서 보안성과 활용성이 좋음</p>
<p> 전송데이터 유형 : 텍스트만 전송시 enctype은 생략가능,
텍스트와 바이너리 데이터를 전송시 multipart/form-data로 설정</p>
<p> 질의 문자열은 클라이언트가 서버로 정보를 요청할때 정보전달 양식에 의해 작성된 문자열을 의미.
질의문자열의 시작은 ?로, 전달하려는 데이터는 키와 값의 형태로 작성하며, 각각의 정보는 & 로 연결함.
영문자, 숫자, 일부 특수문자는 그대로 전송되지만 ,그외 나머진 %와 16진수코드로 인코딩된 문자로 변환되어 전송됨 </p>
https://www.google.com/search?q=%E3%84%B3%E3%84%B3 영문이 아닌경우 16진수코드로 변환됨. urlencoder.org
<img src = "img/urdi.png">
<img src = "img/urdi.jpg">
<h3>로그인</h3>
<form name="getform" method="get" action="procLogin.do?type=admin"
enctype="application/x-www-form-urlencoded">
<div>아이디:
<input type = "text" name="userid"></div>
<div>비밀번호:
<input type="password" name="passwd"></div>
<div>
<button type="submit">로그인</button> </div>
</form>
<h3>로그인2</h3>
<form name="postfrm" method="post" action="procLogin.do?type-admin">
<div>아이디:
<input type = "text" name="userid"></div>
<div>비밀번호:
<input type="password" name="passwd"></div>
<div>
<button type="submit">로그인</button> </div>
</form>
<h2>폼 요소</h2>
<p>html5에서는 다양한 input요소 태그를 사용해서 사용자로부터 데이터를 입력받을 수 있음 </p>
<p>text : 한줄 텍스트를 입력받음</p>
<p>password : 한줄 비밀 텍스트를 입력받음, 입력시 별표문자가 화면에 표시</p>
<p>radio:여러 선택사항 중 하나만 골라 입력받음</p>
<p>checkbox: 여러 선택사항 중 다수를 입력받음 </p>
<p>select: 여러 선택사항 중 하나만 입력받음, 단 선택할 수 있는 사항은 드롭다운 메뉴로 보여짐</p>
<p>textarea : 여러불 텍스트를 입력받음</p>
<p>button : 사용자가 클릭할 수 있는 버튼을 표시, type 속성으로 버튼의 종류를 지정.
button 일반적인 버튼을 표시, 보통 자바스크립트와 함께 사용
submit 입력한 데이터들을 서버로 전송시 사용
reset 입력한 데이터들을 모두 지우고 초기화할 때 사용 </p>
<p>file: 텍스트가 아닌 파일을 서버로 전송할때 사용,
단, enctype이 multipart/form-data로 설정되어야 함
또한, 서버측에서는 텍스트만 처리하는 방식이 아닌 다른 방식으로 처리해야함 </p>
<p>label :폼요소에 제목을 작성할때 사용</p>
<form name=joinfrm" method="get" action="procJoin.do"
enctype="multipart/form-data">
<div><label for="userid">아이디</label>
<input type="text" name = "userid>" id="userid" required></div>
<div><label for="passwd">비밀번호</label>
<input type="password" name = "passwd>" id="passwd"></div>
<div><label for="name">이름</label>
<input type="text" name = "name>" id="name"></div>
<div><label for="male">성별</label>
<input type="radio" name = "gender" id="male" value="male" checked> 남
<input type="radio" name = "gender" id="female" value="female"> 여
</div>
<div><label for="reading">취미</label>
<input type="checkbox" name ="hobby" id="reading" value="reading" > 독서
<input type="checkbox" name ="hobby" id="trip" value="trip" > 여행
<input type="checkbox" name ="hobby" id="sports" value="sports" > 운동
<input type="checkbox" name ="hobby" id="game" value="game" > 게임
<input type="checkbox" name ="hobby" id="nothing" value="nothing" > 낫띵
<input type="checkbox" name ="hobby" id="programing" value="programing" > 프로그래밍
</div>
<div><label for="sido">거주지 시/도</label>
<select name="sido" id="sido" >
<option value="" > -- 선택하세요 -- </option>
<option value="seoul" > 서울 </option>
<option value="incheon" > 인천 </option>
<option value="daejeon" > 대전 </option>
<option value="kyungki" > 경기 </option>
<option value="busan" > 부산 </option>
<option value="kangwon" > 강원 </option>
<option value="jeonla" > 전라 </option>
</select>
</div>
<div><label for="myintro">자기소개</label>
<textarea name="myintro" id="myintro"
rows="5" cols="50" style="resize:none" >입력하세요</textarea>
</div>
<div><label for="imageFileOpenInput">첨부파일</label>
<input type="file" name="file" id="imageFileOpenInput" accept="image/*">
</div>
<div>
<button type="submit">입력완료</button>
<button type="reset">입력취소</button>
</div>
</form>
<h2>html5 폼 요소</h2>
<form name="html5frm" method="get" action="test html5.do">
<div>오늘 날짜 :
<input type="date" name="today"></div>
<div>수강신청 기간 :
<input type="date" name="startdate" min="2022-05-01" max="2022-05-31">
<input type="date" name="enddate" min="2022-05-01" max="2022-05-31"></div>
<div>방문가능 시간 :
<input type="time" name="visittime" min="09:05" max="17:30"></div>
<div>나이 :
<input type="number" name="age" min="1" max="100"></div>
<div>이메일:
<input type="email" name="email">
</div>
<div>전화번호:
<input type="tel" name="tel"
pattern="[0][0-9][0-9]-[0-9]{3,4}-[0-9]{4}" >
</div>
<div> 좋아하는 프로그래밍 언어는? :
<input list="proglist" name="prog">
<datalist id="proglist">
<option>python</option>
<option>java</option>
<option>c#</option>
<option>basic</option></datalist>
</div>
<div>
<button type="submit">입력완료</button>
<button type="reset">입력취소</button>
</div>
</form>
<h2>공통 input 속성</h2>
<form name="addtfrm" action="addtfrm.do"
method="get">
<div>주민번호:
<input type = "text" name="jumin1"
readonly value="123456-1234567"></div>
<div>주민번호:
<input type = "text" name="jumin2"
disabled value="123456-1234567"></div>
<div><input type = "text" name="jumin3"
placeholder="주민번호"></div>
<div>아이디 : <input type = "text" name="id"
maxlength="18"></div>
<div>우편번호 : <input type = "text" name="zip1" size="3" maxlength="4">-
<input type = "text" name="zip2" size="3" maxlength="4">
</div>
<div>
<button type="submit">입력완료</button>
</div>
</form>
</body>
</html>