**웹언어 참고 사이트
http://www.w3schools.com/
레퍼런스 > HTML 태그 레퍼런스
(예시)
<img> 태그
-example
-지원하는 브라우저 : element , yes/no(no라고 되어있는 브라우저에서는 정상작동x)
모든 브라우저에서 시험해볼 것
-Attributes : 속성
<a>태그
-Attributes : 속성
Desciption에 빨간글씨 Not supported in HTML5 : html5에서는 지원X
target 확인해보기 : 새창에서 띄우기 target"_blank", 현재창에서 띄우기 target"_self"
<p>Open link in a new window or tab: <a href="http://www.w3schools.com" target="_self">Visit W3Schools!</a></p>
다시
<img>태그
-Alt 속성
<img src="smiley.gif" alt="Smiley face" width="42" height="42">
이미지가 깨졌을때 이미지에 대한 설명을 보여준다.
**************************************************************
2.4 목록 태그
-목록 태그는 목록을 생성할 때에 사용하는 태그
-웹 페이지의 내비게이션 메뉴를 생성할 때에 자주 사용
-기본목록
-기본목록을 생성할 대는 다음 태그를 사용
**************************************************************
목록태그 연습
<ol>태그 : 번호 붙이기
<li> </li>
<ul>태그 : 동그라미 붙이기
<li> </li>
*****************************************************************
테이블연습
<tr> </tr> 행
<td> </td> 열
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<!-- 테이블 만들기 가로 3칸, 세로3칸 -->
<!-- row:tr, col:td -->
<table>
<tr>
<td>1_1</td>
<td>1_2</td>
<td>1_3</td>
</tr>
<tr>
<td>2_1</td>
<td>2_2</td>
<td>2_3</td>
</tr>
<tr>
<td>3_1</td>
<td>3_2</td>
<td>3_3</td>
</tr>
</table>
</body>
</html>
**********************************************************
열 합치기 colspan 옵션
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<!-- 테이블 만들기 가로 3칸, 세로3칸 -->
<!-- row:tr, col:td -->
<table>
<tr>
<td>1_1</td>
<td colspan="2">1_2</td>
</tr>
<tr>
<td>2_1</td>
<td>2_2</td>
<td>2_3</td>
</tr>
<tr>
<td>3_1</td>
<td>3_2</td>
<td>3_3</td>
</tr>
</table>
</body>
</html>
****************************************
행 합치기 rowspan 옵션
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<!-- 테이블 만들기 가로 3칸, 세로3칸 -->
<!-- row:tr, col:td -->
<table>
<tr>
<td rowspan="2">1_1</td>
<td colspan="2">1_2</td>
</tr>
<tr>
<td>2_2</td>
<td>2_3</td>
</tr>
<tr>
<td>3_1</td>
<td>3_2</td>
<td>3_3</td>
</tr>
</table>
</body>
</html>
***************************************************************
테이블 나누기 연습
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<!-- 테이블 만들기 가로 3칸, 세로3칸 -->
<!-- row:tr, col:td -->
<table border=1>
<tr>
<td>num</td>
<td>name</td>
<td>subject</td>
<td>point</td>
<td>total</td>
<td>grade</td>
<td>T_grade</td>
</tr>
<tr>
<td rowspan=3>1</td>
<td rowspan=3>IU</td>
<td>KOR</td>
<td>100</td>
<td rowspan=3>300</td>
<td>A</td>
<td rowspan=3>A</td>
</tr>
<tr>
<td>ENG</td>
<td>100</td>
<td>A</td>
</tr>
<tr>
<td>MATH</td>
<td>4_4</td>
<td>4_6</td>
</tr>
<tr>
<td rowspan=3>2</td>
<td rowspan=3>HANI</td>
<td>KOR</td>
<td>80</td>
<td rowspan=3>240</td>
<td>B</td>
<td rowspan=3>B</td>
</tr>
<tr>
<td>ENG</td>
<td>80</td>
<td>B</td>
</tr>
<tr>
<td>MATH</td>
<td>80</td>
<td>B</td>
</tr>
<tr>
<td rowspan=3>3</td>
<td rowspan=3>MINAH</td>
<td>KOR</td>
<td>70</td>
<td rowspan=3>210</td>
<td>C</td>
<td rowspan=3>C</td>
</tr>
<tr>
<td>ENG</td>
<td>70</td>
<td>C</td>
</tr>
<tr>
<td>MATH</td>
<td>70</td>
<td>C</td>
</tr>
<tr>
<td colspan=4>총등급</td>
<td colspan=3>B</td>
</tr>
</table>
</body>
</html>
결과
>
| num | name | subject | point | total | grade | T_grade |
| 1 | IU | KOR | 100 | 300 | A | A |
| ENG | 100 | A | ||||
| MATH | 4_4 | 4_6 | ||||
| 2 | HANI | KOR | 80 | 240 | B | B |
| ENG | 80 | B | ||||
| MATH | 80 | B | ||||
| 3 | MINAH | KOR | 70 | 210 | C | C |
| ENG | 70 | C | ||||
| MATH | 70 | C | ||||
| 총등급 | B | |||||
*****************************************************************
[입력양식 태그]
-입력 양식 태그는 서버와 통신하고자 사용한다.
-기본 입력 양싱 태그
-input 태그를 사용한다.
ex) 로그인창, 회원가입창
[입력양식 실습]
[코드]
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<form action="">
id:<input type="text">
pw:<input type="text">
<!-- 버튼에 value옵션 : 버튼의 이름 -->
<input type="button" value=로그인>
<hr>
좋아하는 동물은?(복수선택가능)
고양이<input type="checkbox">
강아지<input type="checkbox">
호랑이<input type="checkbox">
두더지<input type="checkbox">
<hr>
당신은 커플입니까?
<!-- name에 같은 문자를 넣어두면 중복선택불가능 -->
yes<input type="radio" name="b">
no<input type="radio" name="b">
<hr>
파일업로드
<input type="file">
<hr>
리셋
<!-- 전체를 form 태그로 감싸줘야 리셋버튼으로 초기화 가능 -->
<input type="reset" value="다시 작성">
submit
<input type="submit" value="회원가입">
</form>
</body>
</html>
결과
>
id: pw:
좋아하는 동물은?(복수선택가능) 고양이 강아지 호랑이 두더지
당신은 커플입니까? yes no
파일업로드
리셋 submit
자바 ojdbc로 오라클db와 연동해서 로그인 이후 화면을 구현한다
입력양식 태그 공부
*****************************************************
만들고 나서 여러가지 웹브라우저를 통해서 확인해야 한다.
[회원가입 창 만들기 실습]
아이디 중복확인
비밀번호
비밀번호 확인
이름
전화번호
이메일
나이
성별 : 남, 여
게임 종류 : RPG FPS AOS RTS TCG Board
사진 :
회원가입.. 다시작성
********************************************************
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>회원가입</title>
</head>
<body>
<form action="">
아이디:<input type="text">
<input type="button" value=중복확인><br>
비밀번호:<input type="text"><br>
비밀번호확인 :<input type="text"><br>
<hr>
이름:<input type="text"><br>
전화번호:<input type="text"><br>
이메일:<input type="text"><br>
나이:<input type="text"><br>
성별:
남성<input type="radio" name=a>
여성<input type="radio" name=a><br>
<hr>
게임종류(복수선택가능)<br>
RPG<input type="checkbox">
FPS<input type="checkbox">
AOS<input type="checkbox">
RTS<input type="checkbox">
TCG<input type="checkbox">
Board<input type="checkbox">
<br>
사진업로드<br>
<input type="file">
<br>
<hr>
다시작성<br>
<input type="reset" value="다시 작성"><br>
회원가입<br>
<input type="submit" value="회원가입">
</form>
</body>
</html>
결과
>
아이디:
비밀번호:
비밀번호확인 :
이름:
전화번호:
이메일:
나이:
성별: 남성 여성
게임종류(복수선택가능)
RPG FPS AOS RTS TCG Board
사진업로드
다시작성
회원가입
******************************************************8
태그공부!
<input type="range"> 작대기생성 (ex. 소리조절, 수량조절)
공간분할태그
***********************************************8
jpg ,png 이미지 파일 차이
jpg는 확대했을때 깨진다
png는 확대해도 안깨짐, 중간이 뚫려있음??
**************************************************8
cafe24 > 디자인센터 > 무료 이미지
'프로그래밍, 통계학 > HTML' 카테고리의 다른 글
| [25일차]2015.08.12, HTML (0) | 2015.08.12 |
|---|
테시리