37일차 공부 XHTML, 이미지맵, 테이블,
1 교시
** XHTML
1. 이미지 태그 - img
=> 빈 태그(닫는 태그가 없음)이고 인라인 요소 (주위에 다른 요소가 배치될 수 있음)
1) 필수 속성
=> src : 이미지 파일의 경로 - url 형태로 설정할 수 있고 상대 경로로 설정 가능
=> alt : 이미지가 없을 때 보여지는 대체 텍스트
2) web에서 사용 가능한 이미지 포맷
=> gif : 256컬러만 지원하고 애니메이션 가능
=> jpg : 확장자는 jpg그리고 jpeg, 16만 컬러 정도 지원, 손실 압축
=> png : 비손실 압축, 투명 배경이 가능, 용량이 jpg보다 큼, 모바일에서는 png 권장
앱 스토어 올릴 때 사용하는 이미지는 png만 가능
=> bmp : 비트맵 이미지, 웹의 표준 이미지가 아님
3) 이미지 파일을 프로젝트에 저장하고 출력하는 경우 이미지를 위한 별도의 디렉토리를 만들어서 저장하고 출력하기를 권장
resources : 프로그램에서 사용할 파일들을저장하는 디렉토리 이름으로 많이 사용
assets : 용량이 큰 리소스들을 저장하는 디렉토리
4) 기타 속성
width : 너비로 픽셀로 설정해도 되고 백분율로 설정해도 된다.
height : 높이로 설정방법은 width와 같다.
border : 경계선 두께 설정
hspace, vspace : 좌우 여백 설정
align : 맞춤을 설정하는 것으로 이 설정을 left나 right로 설정하면 텍스트가 여러 줄이 배치될수 있다.
5) 제목을 가운데에 배치하고 글자들의 크기를 다르게 만들어보고 이미지와 이미지 사이에 텍스트를 출력하고 이미지 오른쪽에 목록 출력하기
6) 이미지 출력 시 고려 사항
=> 외부 자원은 기본적으로 캐싱이 된다.
한 번 접근했던 자원은 웹 브라우저에 저장이 되서 다음에 재사용 한다.
하나의 이미지를 여러 곳에서 사용하는 경우에는 경로를 동일하게 만들어주면 재사용을 하기 때문에 이미지 출력속도가 빨라진다.
=> 이미지는 width와 height를 생략하면 원본 크기 그대로 출력된다.
원본 이미지의 너비와 높이를 변경해서 출력하는 것은 바람직하지 않다.
강제로 너비와 높이를 수정하면 이미지가 깨질 수 있다.
원본 크기 그대로 출력할 때 너비와 높이를 설정해 주는 것이 좋다.
너비와 높이를 생략하면 이미지를 제외한 부분을 출력한 후 이미지를 가져와서 이미지를 재배치하고 다시 출력한다.
너비와 높이를 설정을 하면 영역을 만들어두었다가 이미지를 그 영역에 출력한다.
2 교시
2. 이미지 맵
=> 이미지의 특정 영역을 클릭하면 하이퍼링크를 이용해서 이동하도록 만드는 것 (지도)
=> a 태그 안에 img를 배치하면 img를 클릭하면 a 태그의 href속성에 설정한 링크로 이동
=> 이미지 맵은 이미지 한개에 여러개의 링크를 설정할 수 있다.
<img src="이미지경로" usemap="map의 이름"/>
<map name="이름>
<area shape="도형종류" coords="좌표값 나열" href="링크" alt="보충설명"/>
</map>
1) 도형 종류
rect(사각형) : 왼쪽 상단의 X 좌표, Y좌표 오른쪽 하단의 X좌표, Y좌표
circle(원) : 중심의 X좌표, Y좌표, 반지름의 길이
poly(다각형) : X좌표, Y좌표, X좌표, Y좌표.....
3. Table
=> 격자 모양의 데이터를 출력해주는 요소
=> 여러 개의 데이터를 화면에 출력하고자 할 때 많이 사용
1) 모바일에서의 Table
=> 너무 많은 양의 데이터를 Table을 이용해서 출력하게 되면 수직 방향으로 스크롤을 너무 많이 해야 한다.
=> 모바일에서는 되도록이면 Table보다는 그래프를 이용하거나 서식을 길고 좁은 폭 목록으로 변경해서 표현하는 것을 권장
2) Table의 기본 태그
table : 표
tr : 한줄
th : 제목 셀
td : 일반 셀
=> 기본적으로 선이 출력되지 않기 때문에 선을 출력하고 싶으면 table태그를 만들 때 border 속성에 경계선 두떼를 설정해야 한다.
=> 셀 안에 출력할 내용을 작성
=> 셀 안에는 지금까지 작성했던 모든 태그를 사용할 수 있다.
3. table 태그에 사용할 수 있는 속성
=> border : 경계선 두께
=> bordercolor : 경계선 색상
=> cellspacing, cellpadding : 셀 사이 여백, 셀 안의 여백
=> summary : 테이블에 대한 요약 설명 - 눈에 보이지는 않지만 스크린 리더기로 접속하면
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기본 테이블</title>
</head>
<body>
<h3>테이블 만들기</h3>
<table border="2" bordercolor="pink" cellpadding="10" summary="테이블연습">
<tr>
<th>번호</th>
<th>프로그래밍 언어</th>
</tr>
<tr>
<td>1</td>
<td>C&C++</td>
</tr>
<tr>
<td>2</td>
<td>Java</td>
</tr>
</table>
</body>
</html> |
4 교시
4) table, trm td 태그에 사용할 수 있는 속성
=> width 와 height : 너비와 높이
=> bgcolor : 배경색
=> background : 배경 이미지
=> align : 맞춤 - table 에 설정하면 테이블의 맞춤이고 td에 설정하면 td 안의 내용에 대한 맞춤
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기본 테이블</title>
</head>
<body>
<h3>테이블 만들기</h3>
<table border="2" bordercolor="blue" cellpadding="10" width="400" align="center" summary="테이블연습"
background="images/android.png">
<tr>
<th blcolor="red">번호</th>
<th>프로그래밍 언어</th>
</tr>
<tr align="center">
<td>1</td>
<td>C&C++</td>
</tr>
<tr>
<td>2</td>
<td>Java</td>
</tr>
</table>
</body>
</html>
 |
5) 셀 합치기
=> colspan : 열을 합치는 속성으로 합칠 열의 개수를 설정
=> rowspan : 행을 합차는 속성으로 합칠 행의 개수를 설정
=> td 태그에 설정해야 한다.
6) thead, tbody, tfoot
=> thead로 tr 태그를 감싸면 제목행이 된다.
맨위로 이동한다.
=> tbody를 이용해서 tr 태그를 감싸면 가운데 내용이 된다.
=> tfoot은 tr태그를 감싸면 맨 아래 행이 된다.
=> 테이블을 만들 때 되도록이면 이 태그들로 tr을 감싸는게 좋다.
=> 스크린 리더기는 thead가 있는 경우 tbody의 내용을 읽을 때 thead의 내용도 같이 읽는다.
<table align="center" cellpadding="5">
<tr>
<td colspan="2" align="center">
<h3>회원가입</h3>
</td>
</tr>
<tr>
<td align="right">이메일</td>
<td>
<input type="text" size="40" name="id"/>
</td>
</tr>
<tr>
<td align="right">비밀번호</td>
<td>
<input type="password" size="40"
name="password" />
</td>
</tr>
</table>
<table>
<thead>
<tr>
<th>제목</th>
<th>주연배우</th>
</tr>
</thead>
<tbody>
<tr>
<td>매트릭스</td>
<td>존윅</td>
</tr>
<tr>
<td>BlindSide</td>
<td>센드라블록</td>
</tr>
</tbody>
</table>
4. 멀티미디어 재생
=> HTML4에서는 embed 나 object 태그를 이용
=> HTML5에서는 video 나 audio 태그를 이용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--<embed src="assets/IPhone3G.mov" width="150" height="150"/>-->
<video src="assets/IPhone3G.mov" controls="controls"></video>
<!-- Safari는 플래시 파일을 재생을 못하도록 한다 Chrome은 기본적으로는 차단이 되어 있다. -->
<embed src="assets/object.swf" width="150" height="150"/>
</body>
</html>
5. form
=> 사용자의 입력을 받을 수 있는 요소
<form action="전송할 서버의 URL" method="get" 또는 "post"
enctype="multipart/form-data">
</form>
action : 전송할 서버의 URL, 생략을 하면 현재 URL이 서버의 URL
method : 파라미터 전송 방법
get : 파라미터가 URL 뒤에 추가되서 전송, 보안이 안되고 길이 제한이 있다. 속도가 더 빠르다.
post : 파라미터가 header에 숨겨져서 전송, 보안이 되고 길이 제한이 없다.
최근에는 특별한 경우가 아니면 post 방식으로 전송하는 것을 권장
password, textarea, file 이 있는 경우에는 반드시 post 방식으로 전송해야 한다.
enctype : 전송방식으로 생략을 모아서 한꺼번에 전송하고 multipart/form-data를 설정하면 나누어서 보낸다.
form안에 file이 있는 경우는 반드시 설정해야 한다.
설정하지 않으면 파일의 내용이 전송되는 것이 아니고 파일의 이름이 전송된다.
이 내용은 FrontEnd, BackEnd 상관없이 중요
웹 프로그래밍 면접 많이 물어보는 질문 중에 하나
1) fieldset, legend
fieldset은 컨텐츠를 하나로 묶인 것처럼 보여주는 태그
legend는 fieldset 안에 사용해서 왼쪽 상단에 제목을 표시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>폼 연습</title>
</head>
<body>
<form action="" method="">
<fieldset>
<legend>폼 연습</legend>
</fieldset>
</form>
</body>
</html>
5 교시
2) label
=> 텍스트를 출력하기 위한 요소
=> form 안에 입력받기 위한 요소를 만드는 경우 label과 함께 사용하는 것을 권장
label을 만들때 다른 입력 요소의 id를 for속성에 설정하면 모바일 브라우저에서는 레이블을 선택해도 입력 가능해진다.
3) input
=> 폼 안에 배치되서 데이터를 입력받도록 해주는 요소
=> type이 10가지
=> type
text : 기본으로 한 줄의 문장을 입력받을 수 있는 입력 상자
password : 비밀번호를 입력받을 수 있는 상자
radio : 라디오 버튼, 한개만 선택(반드시 하나는 선택해야 한다.) 성별
checkbox : 체크박스 (여러개 선택 가능)
button : 버튼
submit : form의 내용을 server에게 전달하는 기능
reset : form 안의 내용을 전부 clear
image : 이미지 버튼
file : 파일을 선택
hidden : 눈에 보이지는 않지만 서버에게 데이터를 전달하고자 할 때 사용
=> name : 서버에게 전송한 경우 서버가 인지하는 이름
radio 와 checkbox를 name이 같아야 하나의 그룹이 된다.
버튼 계열(button, submit, reset, image)에는 부여하지 않는다.
=> value : 기본값
radio, checkbox는 value를 반드시 설정해야 하는데 value를 가지고 radio, checkbox에서 선택한 항목을 구분함
=> checked : radio 나 checkbox를 체크할 수 있는 속성으로 radio는 되도록이면 하나를 체크를 한 상태로 제공되어야 한다.
=> disabled : 사용이 불가능하도록 하고 서버로 데이터를 전송하지 않음
=> readonly : 수정이 불가능하도록 하고 서버로 데이터를 전송 한다.
=> size : text와 password만 사용하는 속성으로 크기
=> maxlength : text와 password만 사용하는데 최대 입력 글자 수
4. select
=> 목록 상자
<select>
<option>내용1</option>
<option>내용1</option>
....
</select>
=> size : 화면에 보여질 데이터 개수를 설정
=> multiple : 여러 개 선택할 수 있도록 해주는 속성
=> optgroup을 이용하면 옵션을 묶을 수 있다.
5) textarea
=> 여러 줄 글 상자
6) button
=> 버튼
6. 회원가입 폼 만들기
=> email, password, 성별(남,여), 취미(운동, 게임, 독서, 요리 중 여러 개 선택이 가능), 생년월일(select로 만들기), 하고 싶은 얘기(여러 줄 글상자), 사진을 입력받고 확인을 누르면 서버로 전송하고 다시작성을 누르면 화면 전체를 클리어 하도록 만들기
7. 영역 관련 태그
1) div : 블록 태그
2) span : 인라인 태그
8. iframe
=> 다른 문서를 표시하기 위한 영역
=> scr에 표시할 문서의 경로
=> width와 height로 너비와 높이를 설정
=> name에는 자신의 이름을 설정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
</head>
<body>
<h3 align="center">회원가입</h3>
<form id="registerform" action="server.jsp" method="post">
<table align="center" cellpadding="10" width="700">
<tr>
<td rowspan="8">이미지<br/>
<img id="img" width="100" height="100" border="1"/>
<input type="file" name="file" accept=".jpg,.gif,.png" />
</tr>
<tr>
<td align="right"><label for="">이메일</label></td>
<td><input type="text" id="email" name="email" size="44" placeholder="이메일을 입력하세요"/></td>
</tr>
<tr>
<td align="right"><label for="password">비밀번호</label></td>
<td><input type="text" id="password" name="password" size="15" maxlength="15"/><div id="msg"></div>
</td>
</tr>
<tr>
<td align="right"><label for="password">비밀번호 확인</label></td>
<!-- 서버에게 전송하지 않으므로 name이 필요 없음 -->
<td><input type="text" id="password1" size="15" maxlength="15"/><div id="msg"></div></td>
</tr>
<tr>
<td align="right"><label for="">성별</label></td>
<td>
<input type="radio" value="man" name="gender" checked="checked"/>남자
<input type="radio" value="woman" name="gender"/>여자
</td>
</tr>
<tr>
<td colspan="2">
<fieldset>
<legend>취미</legend>
<input type="checkbox" name="hobby" value="sports"/>운동
<input type="checkbox" name="hobby" value="game"/>게임
<input type="checkbox" name="hobby" value=cook"/>요리
</fieldset>
</td>
</tr>
<tr>
<td align="right"><label for="">고향</label></td>
<td>
<select name="born" size="2" multiple="multiple">
<option value="s">서울</option>
<option value="k">경기</option>
<option value="g">강원</option>
</select>
</td>
</tr>
<tr>
<td>하고싶은 얘기</td>
<td>
<textarea row="10" cols="30"></textarea>
</td>
</tr>
<tr>
<td>첨부파일</td>
<td>
<input type="file" name="file"/>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="submit" value="회원가입"/>
<input type="reset" value="작성취소"/>
</td>
</tr>
</table>
</form>
<script>
document.getElementById("registerform").addEventListener("submit", function(e){
var pw = document.getElementById(
"password").value;
var pw1 = document.getElementById(
"password1").value;
if(pw != pw1){
document.getElementById("msg").innerHTML = "2개의 비밀번호가 같아야 합니다.";
document.getElementById("msg").style.color = 'red';
e.preventDefault();
}
})
</script>
</body>
</html>
 |