* http (Hyper Text Transport Protocol)
하이퍼 텍스트를 전송하기 위한 통신규약(약속)
클라이언트에서 서버에게 무언가를 요청 > http method
1. GET : 주소창에 양식값을 전달
항상 요청하면 동일한 응답을 줌
<form action="next.html" method="get">
?XXXXX : QueryString
?id=aaa&pwd=bbb
2. POST : body 안에 감춰서 전달값을 전달 > 주소창에 쿼리스트링 안보임
같은 방식으로 요청을 해도 다른 결과를 줄 수 있음
<form action="next.html" method="post">
- 테이블 > tr / td / th
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<html>
<head>
<title>표 만들기
</title>
</head>
<body>
<table border="1", width = "500", cellspacing
="0">
<!-- caption : 표에 대한 설명 -->
<caption>판매 중인 제품 사이즈</caption>
<tr>
<!-- th : heading처럼 볼드체, 가운데 정렬로 작성됨 -->
<th>용량</th>
<th>사이즈</th>
<th rowspan="4">비고</th>
</tr>
<tr>
<td>Tall(톨)</td>
<td>355ml(12fl oz)</td>
</tr>
<tr>
<td>Grande(그란데)</td>
<td>473ml(16fl oz)</td>
</tr>
<tr>
<td>Venti(벤티)</td>
<td>591ml(20fl oz)</td>
</tr>
</table>
</body>
</html>
|
cs |
- 광고판 효과
|
1
2
3
4
5
6
7
|
<html>
<head></head>
<body>
<marquee scrollamount="16" behavior="alternate" bgcolor="yellow">
<font color="red">하하하 대박광고</font></marquee>
</body>
</html>
|
cs |
- html:5
> 현재는 html5를 표준으로 사용
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<!DOCTYPE html>
<html>
<head>
<!-- meta : 메타 데이터, 환경 설정 정보 -->
<meta charset="UTF-8">
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
<!-- width=device-width : 현재 디바이스의 너비로 창의 너비를 잡음(브라우저가 디바이스 정보를 앎) -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>Document</title>
</head>
<body>
<table border="1" width="300px">
<caption>이동통신사 가입현황</caption>
<!-- bgcolor="#RGB" : RGB는 16진수로-->
<thead bgcolor="#EDD3ED">
<tr>
<th><font color="#ffffff">년도</font></th>
<th>가입자</th>
</tr>
</thead>
<tbody>
<tr>
<td>2004</td>
<td>10만명</td>
</tr>
<tr>
<td>2005</td>
<td>15만명</td>
</tr>
<tr>
<td>2007</td>
<td>40만명</td>
</tr>
<tr>
<td>2008</td>
<td>100만명</td>
</tr>
<tr>
<td>2009</td>
<td>130만명</td>
</tr>
</tbody>
<tfoot bgcolor="DFD9CD">
<tr>
<td>합계</td>
<td><font color="0000ff">325만명</font></td>
</tr>
</tfoot>
</table>
</body>
</html>
|
cs |
- 다양한 입력 표현 > input / form / select / option
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h3>다양한 입력 표현</h3>
<!-- 전체를 하나의 문서로 만드는 것 : form -->
<!-- action="제출할 곳(전달할 페이지)" -->
<form action="next.html">
<!-- 아이디 입력창 생성 -->
<!-- input:text -->
ID : <input type="text" name="id" > <br />
<!-- type=password로 설정하면 비번 입력할 때 안보임 -->
PW : <input type="password" name="pw" > <br />
<!-- 웹에서는 두 칸 이상의 공백은 무조건 하나 -->
<!-- 스페이스 : -->
<!-- input:checkbox[name='quest1'] -->
<input type="checkbox" name="quest1" id=""> 1번 <br />
<input type="checkbox" name="quest1" id=""> 2번 <br />
<!-- <br>과 <br />은 같은 걸로 취급- 정석은 <br /> (단독태그) -->
<!-- input:radio -->
<!-- name이 같은 radio끼리만 하나씩 선택할 수 있도록 생성됨 -->
<input type="radio" name="gender" id="">남
<input type="radio" name="gender" id="">여
<!-- date 연도-월-일 => ms(exporer) 제외 다 지원 -->
생년월일 : <input type="date" name="time" id=""> <br />
<!-- 스피너 -->
점심메뉴
<select name="menu">
<option value="김밥">김밥</option>
<option value="라면">라면</option>
<option value="비빔밥">비빔밥</option>
<option value="짜장면">짜장면</option>
<option value="짬뽕">짬뽕</option>
</select>
<!-- input:submit = 제출 -->
<!-- input:reset = 초기화 -->
<input type="submit" value="제출">
<input type="reset" value="초기화">
</form>
</body>
</html>
|
cs |
> form 값은 여기로 넘기기!
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>next.html 파일입니다</h2>
<p>
아직은 웹서버가 없어서 넘겨준 값을 출력할 수는 없습니다.
</p>
</body>
</html>
|
cs |
- 다양한 기능 구현 > h / p / strong / label / input / marquee
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html13.html</title>
</head>
<body>
<p>strong 태그는 해당 콘텐츠의 중요성, 심각함, 긴급함을 강조하는 코드</p>
<strong>텍스트 문자열</strong>
<strong>Hello World</strong>
<p>h1~h6 : 제목을 정의할 때 사용
h1 요소가 가장 중요한 제목 h6 가장 덜 중요한 제목
</p>
<h1>Hello</h1>
<h3>Hello</h3>
<h6>Hello</h6>
<p>
p 태그는 문단을 정의할 때, 브라우저는 자동으로
위의 요소와 아래 요소 사이에 약간의 여백을 추가
</p>
<p>
엔터 역할 : br
</p>
<p>
a : 하나의 페이지에서 다른 페이지로 연결할 때 > 하이퍼링크 정의
</p>
<p>
b : 다른 목적 없이 굵게 표현되는 텍스트
</p>
<b>오늘은 목요일</b>
<p>
label : 사용자 인터페이스(UI)요소의 라벨을 정의할 때 사용
</p>
<label for="id">아이디(ID)</label>
<input type="text" name="" id="">
<label for="pw">패스워드(PW)</label>
<input type="password" namej="" id="">
<p>
form 요소 내부에서 사용
input : 다양한 입력값
text
number
password
button
checkbox
radio
date
time
email
file
reset
submit
hidden
</p>
<input type="time" name="" id="">
<input type="tel" name="" id="">
<input type="color" name="" id="">
<input type="hidden" name=""> 안보임
<p>
button : 클릭할 수 있는 버튼을 정의할 때
</p>
<button type="button" onclick="alert('Hello World');">버튼클릭</button>
<input type="button" onclick="alert('Hello World');" value="버튼클릭">
<p>
em : 강조된 텍스트를 표현
</p>
<p> 집에 가자...
<em>빨리!!!</em>
</p>
<marquee behavior="alternate" direction="up" bgcolor="red"
width="100" height="200">너무 많다</marquee>
<img src="https://image.istarbucks.co.kr/upload/store/skuimg/2021/02/[9200000002407]_20210225095106743.jpg" alt="">
</body>
</html>
|
cs |
[ 응용 ]
- 스타벅스 메뉴 목록
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Starbucks</title>
</head>
<body>
<table cellspacing="10">
<tr>
<td><img src="https://image.istarbucks.co.kr/upload/store/skuimg/2021/02/[9200000002407]_20210225095106743.jpg" alt=""></td>
<td><img src="https://image.istarbucks.co.kr/upload/store/skuimg/2021/04/[9200000002487]_20210426091745467.jpg" alt=""></td>
<td><img src="https://image.istarbucks.co.kr/upload/store/skuimg/2021/04/[9200000000479]_20210426091843897.jpg" alt=""></td>
<td><img src="https://image.istarbucks.co.kr/upload/store/skuimg/2021/04/[9200000002081]_20210415133656839.jpg" alt=""></td>
</tr>
<tr>
<td align=center>리저브 나이트로</td>
<td align=center>나이트로 바닐라 크림</td>
<td align=center>나이트로 콜드 브루</td>
<td align=center>돌체 콜드 브루</td>
</tr>
<tr>
<td><img src="https://image.istarbucks.co.kr/upload/store/skuimg/2021/02/[9200000002093]_20210225094415504.jpg" alt=""></td>
<td><img src="https://image.istarbucks.co.kr/upload/store/skuimg/2022/10/[9200000004312]_20221005145029134.jpg" alt=""></td>
<td><img src="https://image.istarbucks.co.kr/upload/store/skuimg/2021/04/[9200000000487]_20210430112319040.jpg" alt=""></td>
<td><img src="https://image.istarbucks.co.kr/upload/store/skuimg/2021/08/[9200000003661]_20210819094346176.jpg" alt=""></td>
</tr>
<tr>
<td align=center>리저브 콜드 브루</td>
<td align=center>민트 콜드 브루</td>
<td align=center>바닐라 크림 콜드 브루</td>
<td align=center>시그니처 더 블랙 콜드 브루</td>
</tr>
</table>
</body>
</html>
|
cs |
- 가입 신청서
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>가입신청서</title>
</head>
<body>
<table width="800">
<caption>
<h1>가입신청서</h1>
</caption>
<tr>
<td>이름 :</td>
<td><input type="text" name="name" id=""></td>
</tr>
<tr>
<td>주민등록번호 : </td>
<td>
<input type="text" name="number" id="">
-
<input type="text" name="number" id="">
</td>
</tr>
<tr>
<td>비밀번호 :</td>
<td>
<input type="text" name="pw" id="">
</td>
</tr>
<tr>
<td>전화번호 :</td>
<td>
<input type="text" name="phone" id="">
-
<input type="text" name="phone" id="">
-
<input type="text" name="phone" id="">
</td>
</tr>
<tr>
<td>주소 :</td>
<td>
<input type="text" name="address" id="">
</td>
</tr>
<tr>
<td>E-mail :</td>
<td>
<input type="text" name="email" id="">
@
<input type="text" name="email" id="">
<select name="value" id="">
<option value="직접입력">직접입력</option>
<option value="naver.com">naver.com</option>
<option value="daum.net">daum.net</option>
<option value="gmail.com">gmail.com</option>
</select>
</td>
</tr>
<tr>
<td>성별 : </td>
<td>
<input type="radio" name="gender" id="">남자
<input type="radio" name="gender" id="">여자
</td>
</tr>
<tr>
<td>취미 : </td>
<td>
<input type="checkbox" name="hobby" id="">음악감상
<input type="checkbox" name="hobby" id="">독서
<input type="checkbox" name="hobby" id="">운동
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="가입합니다.">
<input type="reset" value="취소합니다.">
</td>
</tr>
</table>
</body>
</html>
|
cs |
- 쿠팡 메뉴 화면
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Coupang</title>
</head>
<body>
<table border="0", cellspacing = "3" cellpadding = "" >
<tr>
<td colspan="2">
<img src="https://static.coupangcdn.com/ua/cmg_paperboy/image/1680228665486/C2-B1.jpg" alt="" >
</td>
<!-- <td></td> -->
<td colspan="2">
<img src="https://static.coupangcdn.com/ca/cmg_paperboy/image/1680228693574/C2-B2.jpg" alt="" >
</td>
<!-- <td></td> -->
</tr>
<tr>
<td><img src="https://static.coupangcdn.com/ra/cmg_paperboy/image/1680228681707/C2-B3.jpg" alt="" ></td>
<td><img src="https://static.coupangcdn.com/oa/cmg_paperboy/image/1680228714464/C2-B4.jpg" alt=""></td>
<td><img src="https://thumbnail9.coupangcdn.com/thumbnails/remote/x/image/displayitem/displayitem_528ab20a-45fd-421d-b662-3b6dd1a409e0.png" alt="" ></td>
<td><img src="https://thumbnail6.coupangcdn.com/thumbnails/remote/x/image/displayitem/displayitem_4652668b-c739-4f8f-b00f-c71fb2abea30.png" alt="" ></td>
</tr>
<tr>
<td colspan="2"><img src="https://static.coupangcdn.com/da/cmg_paperboy/image/1680228728779/C2-B7.jpg" alt=""></td>
<!-- <td></td> -->
<td><img src="https://thumbnail10.coupangcdn.com/thumbnails/remote/x/image/displayitem/displayitem_20fc13fd-08ee-43c9-91a5-a2d45f5fbb2e.png" alt=""></td>
<td><img src="https://thumbnail9.coupangcdn.com/thumbnails/remote/x/image/displayitem/displayitem_e8be23da-a599-4ce9-9478-1a227ea3894c.png" alt=""></td>
</tr>
</table>
</body>
</html>
|
cs |
- 검색창 > input / form
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="https://search.naver.com/search.naver">
<input type="text" name="query" id="">
<input type="submit" value="검색">
</form>
</body>
</html>
|
cs |
- 로그인 창 > 테이블 활용
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
http (Hyper Text Transport Protocol)
하이퍼 텍스트를 전송하기 위한 통신규약(약속)
클라이언트에서 서버에게 무언가를 요청 > http method
1. GET : 주소창에 양식값을 전달
-- 항상 요청하면 동일한 응답을 줌
<form action="next.html" method="get">
?XXXXX : QueryString
?id=aaa&pwd=bbb
2. POST : body 안에 감춰서 전달값을 전달 > 주소창에 쿼리스트링 안보임
-- 같은 방식으로 요청을 해도 다른 결과를 줄 수 있음
<form action="next.html" method="post">
-->
<form action="next.html" method="post">
<table border="1">
<tr>
<td>ID</td>
<td><input type="text" name="id" id="" placeholder="아이디를 입력"></td>
</tr>
<tr>
<td>PW</td>
<td><input type="password" name="pwd" id="" placeholder="비번입력"></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="로그인">
<input type="reset" value="다시입력">
</td>
</tr>
</table>
</form>
</body>
</html>
|
cs |
- 다양한 구조 > hr / u / dl / dt / dd / dt / text area
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>
hr: 수평 가로선
</p>
<p>
이 <u>문자에눈</u> 틀린 철자가 있습니다.
</p>
<textarea cols="50" rows="10"></textarea>
<dl>
<dt>용어</dt>
<dd>설명</dd>
<dt>AI</dt>
<dd>인공지능</dd>
</dl>
</body>
</html>
|
cs |
'HTML' 카테고리의 다른 글
| [HTML] javascript (2) - 응용 (0) | 2023.04.16 |
|---|---|
| [HTML] javascript (1) (0) | 2023.04.16 |
| [HTML] CSS - div ( block & in-line / position - relative, absolute, fixed / button (0) | 2023.04.09 |
| [HTML] CSS(Cascade Style Sheet) - width / border / text-align border-collapse / font / #id / .class (0) | 2023.04.09 |
| [HTML] 기본 구조 (창에 글 쓰기/리스트/테이블/하이퍼링크) (0) | 2023.04.09 |