[210615화] table 생성, 이미지 삽입, 회원가입 html(input 타입)
JavaScript 참고 사이트
MDN Web Docs
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
developer.mozilla.org
1교시
[테이블 생성]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border= "1">
<tr>
<th>방이름</th>
<th>대상</th>
<th>크기</th>
</tr>
<tr>
<td>유채방</td>
<td>여성 도미토리</td>
<td>4인실</td>
</tr>
<tr>
<td colspan ="3">전체를 렌트함</td>
</tr>
</table>
</body>
</html>
▶ colspan : 컬럼을 합침
→ 동 트리를 통해 확인할 수 있다.
F12를 열어 확인하면 우리가 작성하지 않은 <tbody>가 들어가있다.
이때 문제는 CSS가 적용되지 않을 수 있다.
DOM : 동적인 부분
<tbody>: 실제 본문의 내용을 직접 넣어주는 것이 좋다.
교재 p87
★inlinestyle은 사용하면 안된다.
html과 css가 분리되지 못한 형태이기 때문에 사용하지 않는다.
태그 안의 style(css)이 코드로 엮여 있으면 안된다.
ex> <col span= "2" style = "background-color: blue;">
이미지 형식
웹사이트 F12 → NETWORK
엑박을 뜰 경우를 대비해 ALT 알트라는 속성이 있다.
WebContent 안에 images라응 폴더 생성
이미지 오류나서 다시 해보기
table 태그 밖으로 옮겨도 에러..
왜 에러가 났는지 모르겠넹,,
2교시
새로운 html 문서 생성
하이퍼링크
상대경로 : 현재 문서를 기준으로
. : 현재 디렉토리
/ : 구분자
<a href= "tableTest.html">테이블 연습</a>
<a href= ".images/myimage.gif">그림</a>
절대경로: 외부
<a href= "http://www.naver.com">네이버로 이동</a>
<a>태그는 라인 태그를 가지지 않는 inline 태그
개행을 위해 <br>을 넣어줘야 한다.
<a> 태그는 상태를 나눠서 작동한다는 것을 알면 나중에 CSS를 입힐 때 수월하다.
이미지를 누르면 다음 링크로 넘어간다.
▶이미지 맵 p119, p125
-광고, 메일에서 사용
-주로 포토샵으로 이미지를 길게 만들어 광고 페이지로 만들어 사용한다.
-한 이미지상에서 클릭 위치에 따라 서로 다른 링크가 열리는 것이다.
-정확한 픽셀 위치를 알아야만 이미지맵을 사용할 수 있다.
★폼만들기 p133 ★
<form 태그의 속성>
-입력한 데이터(1~다수개)를 웹 서버로 넘긴다. 전송된 데이터는 자바로 가고, 실제로 존재하는 유효한 정보인지 DB에서 SELECT을 한다. 로그인 성공인지 실패인지 사용자에게 알린다.
-주의사항 : 사용자가 입력하지 않더라도 데이터가 넘어가야 한다면 폼이다.
▶method
-get: 주소 표시줄에 사용자가 입력한 내용이 그대로 드러난다. 4096btyes까지 입력가능하고 대부분 get을 사용,
-post: 사용자가 입력한 내용의 길이에 제한을 받지 않고 사용자가 입력한 내용이 드러나지 않는다. 보낼 정보가 많을 경우
▶name
▶action: 자바 코드가 들어간다.
▶target
[회원가입하는 html 생성]
입력받을 정보
아이디
비밀번호
비밀번호 확인
이름
성별
생년 (2000~2010) 월(1~12) 일
스마트폰 번호
취미
주소
사이트를 알게 된 경로
-서버쪽으로 날아가야하는 것만 name =" "
자바에서 확인이 될 경우 날릴 필요가 없다.
-required="required" not null과 같은 의미, 꼭 데이터가 와야한다.
-성별의 경우 남자와 여자 중 선택
value=" " 선택되어진 값을 사용!
※ id가 중복되기 때문에 위와 같이 사용할 수 없다. 이럴 경우 label 하나가 전체를 감싸주면 된다.
전체 태그가 엇갈리지 않게 해주어야 한다.
생년월일은 한번에 입력하기 때문에.. 서버로 보낼 때 붙여보내는 것이 좋다.
3교시
▶전화번호
▶취미
hobby라는 이름의 String 배열로 자바에서 받는 것이 좋다.
String[] hobby = {"등산", "독서", "", "", ""}; 이런식으로..
주소
▶자기소개
submit: 서버로 전송하는 동작을 수행
reset: 서버로 전송하지 못하도록 화면의 내용을 초기화
400 클라이언트 오류
500 서버 오류
200 성공
아직 서버가 없기때문에 오류가 발생한다.
값이 비어있는 것은 name값이 없기 때문이다. 번호, 자기소개 등등
method방식을 post에서 get으로 변경
메소드를 get으로 바뀌어 주소에 제한된 값까지 파라미터를 나타낸다.
가능한 수업 다시 듣기! or 책으로 복습하기!