<iframe>
웹 페이지 안에서 다른 웹 페이지를 표시하고자 할 때 사용
익스플로러가 페이지 안에 프레임을 놓기 위해 사용하던 태그였고
w3c는 iframe을 HTML 4.01부터 도입하여 현재는 거의 모든 부라우저가
iframe을 지원
<a href="" target="_blank">
링크의 타겟 프레임으로 사용될 수 있음
링크의 타겟 속성은 iframe에서 지정된 이름을 참조
../ => 현위치를 기준으로(상대path)
/webpro/ => 현재위치 상관없음(절대path)
맨 앞에 /를 쓰지 않으면 상대path가 됨
<div>와 <span>
HTML 요소는 <div>와 <span>을 이용해 묶을 수 있음
<div>는 자체적으로 특별한 의미가 없으며 블록 수준의 요소로서 모든 HTML 요소를 묶는데 사용함
<div>는 블록 수준의 요소이기 때문에 하나의 줄을 전부 차지함
주로 웹 페이지의 레이아웃을 작성하는데 사용한다.
<span>은 자체적으로 특별한 의미가 없으며 인라인 요소로서 텍스트를 묶어 스타일을 적용할 때 사용함
인라인 요소는 자신이 필요한 크기만 차지하는 요소임
인라인 요소는 크기를 지정할 수 없다(width, height가 적용되지 않는다 )
span{
background : green;
display: / block inline inline-block none/
}
inline-block : 줄이 바뀌지 않으면서 가로세로 지정 가능
block요소를 나란히 붙이고 싶을 때
style지정 - float: right; 또는 float: left;
box-sizing: border-box; content-box 둘 중 하나가 온다.
글이 넘쳐서 범위를 침범할 때
overflow: auto; // hidden(안보여주기) scroll(스크롤 생기게) auto(자동 - 넘치면 생기고 안넘치면 안생김)
* 화면이 줄어도 변동없게 하는 방법 - 화면의 최소값을 지정해준다.
body{
min-width: 1000px;
}
border-box:
content-box : 내용만으로
<audio> 요소의 속성
autoplay 이 속성이 존재하면 음악을 자동적으로 재생한다.
controls 이 속성이 존재하면 브라우저가 오디오 재생을 제어하는 제어기를 표시한다.
loop 이 속성이 존재하면 브라우저가 오디오를 반복하여 재생한다.
preload 사용자가 사용할 생각이 없더라도 오디오를 미리 다운로드 한다.
src 재생할 오디오가 존재하는 URL을 지정한다.
volume 오디오의 재생 볼륨을 설정한다.(0.0부터 1.0까지)
MP3 – 'MPEG-1 Audio Layer-3'의 약자로 MPEG기술의 음성 압축 기술
Wav - 윈도우에서 사용되는 표준 사운드 포맷
마이크로소프트사와 IBM사가 만듬 . 파일의 크기가 크다
Ogg – MP3의 대한으로 특허권을 반대하고 보다 좋은 음질을 위하여 오픈소스로 개발되었음.
<source> 사용
모든 브라우저가 지원하는 오디오 형식은 아직까지 없다!
호환성을 높이기 위하여 다음과 같이 한다.
<!DOCTYPE html>
<html>
<body>
<audio controls autoplay>
<source src="old_pop.ogg" type="audio/ogg">
<source src="old_pop.mp3" type="audio/mp3">
<source src="old_pop.wav" type="audio/wav">
</audio>
</body>
</html>
비디오 파일 형식
MPEG4 – 'MPEG-4' 기술을 사용한다. MPEG-1과 MPEG-2에 비해 적은 용량으로도 고품질의 영상 및 음성을 구현할 수 있다. 코덱은 H.264를 사용한다.
WebM – 무료로 제공되는 개방형 고화질 압축 형식의 영상 포맷이다. 구글이 지원하고 있다. 코덱은 VP8이라고 불린다.
Ogg – 역시 무료이고 비디오 압축 형식이다. Ogg Theora 비디오 압축 기술이라 불린다. 확장자가 ogv인 파일에 주로 사용된다.
jsp파일에 적용하기
프로젝트파일 우클릭> Build Path > Configure Build Path > Add External JARs > jsp-api, servlet-api를 라이브러리 적용
****중요****
HTML 입력양식
HTML 문서는 방식에 따라 서버에서 사용자에게 일방적으로 보여주는 방식과
사용자가 서버에 데이터를 보내는 두가지 방식으로 분류할 수 있음
입력양식(form)을 이용하여 서버로 데이터를 전달한다.
tr, td(table)에 있는 데이터들은 서버로 전송할 수 없음
<form>
입력 양식은 항상 <form>으로 시작한다.
<form action="input.jsp" method="post"> - 입력 데이터가 서버로 보내지는 방법을 기술한다. GET과 POST방식이 있다.
<input type="text" name="input">
<input type="submit">
</form>
GET 방식과 POST 방식
GET 방식
GET 방식은 URL 주소 뒤에 파라미터를 붙여서 데이터를 전달하는 방식이다.
<body>
<form action="aaa.jsp" method="get">
이름: <input type="text" name="name">
학번: <input type="text" name="number" size="10">
<input type="submit" value="전송">
</form>
</body>
POST 방식 (사용자의 정보가 나타나면 안됨 - 비밀번호, 계좌 등)
POST 방식은 사용자가 입력한 데이터를 URL 주소에 붙이지 않고 HTTP Request 헤더에 포함시켜서 전송하는 방식
길이 제한이 없으며, 보안이 유지된다.
Post 방식
<body>
<form action="aaa.jsp" method=“post">
이름: <input type="text" name="name"><br>
학번: <input type="text" name="number" size="10">
<input type="submit" value="전송">
</form>
</body>
get
<form action="" method="get">
아이디<input type="text" name="id"> =>inline요소
비밀번호<input type="password" name="pass">
<input type="submit" value="전송">
</form> => block 요소
바깥쪽 여백 : margin
안쪽 여백 : padding
<h2>서버로 데이터 전송 - get</h2>
<form action="get.jsp" method="get">
아이디<input type="text" name="id">
비밀번호<input type="password" name="pass">
<input type="submit" value="전송">
</form>
=> 내가 입력한 아이디와 비밀번호가 get.jsp서버로 전송됨
자바문장은 <% %> 로 사용
<%
String userId = request.getParameter("id");
String userPass = request.getParameter("pass");
%>
request => jsp가 가지고있는 내장 객체(new 생성 필요없음)
input type="text"
input type="password"
이 두가지가 가장 중요
입력 태그
날짜 : <input type="date" name="date">
URL : <input type="url" name="url">
404에러 : 파일을 찾을 수 없음
type 속성값
type 속성값 설명
text 텍스트를 입력할 수 있는 한 줄짜리 필드 생성
password 비밀번호를 입력할 수 있는 한 줄짜리 필드 생성
radio 라디오 버튼 생성
checkbox 체크 박스 생성
file 파일 이름을 입력하는 필드 생성
reset 초기화 버튼 생성, 버튼을 누르면 모든 입력 필드가 초기화된다.
image 이미지를 전송 버튼으로 만든다.
hidden 사용자에게는 보이지 않지만 서버로 전송된다.
submit 제출 버튼 생성
<input type="button"> 기능이 없는 버튼
기능을 부여하기 위해서 javascript가 필요하다
onclick=""에서 함수를 호출한다
함수호출하기 전에 함수가 정의되어 있어야 한다
<input type="button">
