HTML강의(visual studio code), 기초태그_210329(월)
HTML
파일 이름: index.html
문서안에 처음에 무조건 있는 파일 이름.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html>
<html lang="en"> // html 열린 태그
<head> //머리말 부분, meta 정보들 작성
<meta charset="UTF-8"> //문자세트
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> //검색 시 이 정보로 치면 뜬다.
<title>Document</title>
</head>//머리말 닫기
<body> //몸통 부분
하나둘셋 html5 시작합니다.
</body> //몸통 닫기
</html> //html 닫힌 태그
|
cs |
● <hn> 제목 </hn>
:heading. 제목을 나타내는 태그
h1 > h2 > h3 > h4 > h5 > h6
● <p> 내용 </p>
:paragraph. 텍스트 단락을 만드는 태그
● <br>
:line break. 문단 내 줄바꿈
● <hr>
:horizontal rule. 가로줄 삽입
● <blockquote> 인용문 </blockquote>
:blockquote. 다른 텍스트보다 약간 들여 씀, 화면 낭독기에서도 구분하여 읽음
● <strong> 굵게 강조할 텍스트 </strong>
:strong. 글씨를 굵게 강조, 화면 낭독기에서 강조하여 읽음
● <b> 굵게 표시할 텍스트 </b>
:bold. 글씨만 굵게 강조.
● <em> 이탤릭체로 강조할 텍스트 </em>
:emphasis. 흐름체, 문장 중에서 특별히 강조하는 부분
● <i> 이탤릭체로 표시할 텍스트 </i>
:italic. 흐름체
● <ol><li> Ordered List & LIst. 순서 있는 목록을 만듬 </li></ol>
|
1
2
3
4
|
<ol type="" start="">
<li>항목1</li>
<li>항목2</li>
</ol>
|
cs |
● <ul><li> Unordered List & LIst. 순서 없는 목록을 만듬 </li></ul>
|
1
2
3
4
|
<ul>
<li>항목1</li>
<li>항목2</li>
</ul>
|
cs |
● dl: Description List 묘사시작
dt: Description Term 묘사할 이름
dd: Description Definition 묘사내용
사전에서 단어명과 설명이 있는 모습. dl로 시작-dt라는 이름을-dd가 설명
|
1
2
3
4
5
|
<dl>
<dt> 이름 </dt>
<dd> 값 </dd>
<dd> 값 </dd>
</dl>
|
cs |
● table: 표의 시작
caption: 표 제목
tr: Table Row 행
th: Table Heading 행열의 머릿말(두껍게 강조)
td: Table Data 행 안에 셀
|
1
2
3
4
5
6
7
8
9
10
11
|
<table>
<caption> 표 제목 </caption>
<tr>
<th>1행 1열</th>
<td>1행 2열</td>
</tr>
<tr>
<th>2행 1열</th>
<td>2행 2열</td>
</tr>
</table>
|
cs |
thead: table head 제목
tbody: table body 본문
tfoot: table foot 요약
:표의 구조를 나눠 놓는 것.
rowspan: 행들을 합침
colspan: 열들을 합침
colgroup: col태그 1이상
col: 열들의 스타일 속성을 넣어주기 위한 태그
☆속성
style="background(배경색), width(넓이) 등등"
span=열 합쳐서 함께 스타일 줌
|
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 lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="html5시작">
<title>HTML5&CSS3</title>
</head>
<body>
<h1>제목글씨1</h1>
<h3>제목글씨3</h3>
<h6>제목글씨6</h6>
<p>Lorem ipsum, <mark>color</mark>dolor sit amet consectetur<br> adipisicing elit. </p>
<p>Lorem ipsum<span style="color: blue;">박스블록 인라인블록</span> dolor sit amet consectetur adipisicing elit.</p>
하나둘셋 html5 시작합니다.
<!-- 순서없는 목록 -->
<ul>
<li>
<ul>
<li>치와와</li>
<li>불독</li>
</ul>
</li>
<li>강아지</li>
<li>고양이</li>
<li>강아지</li>
<li>강아지</li>
<li>강아지</li>
</ul>
<!-- 순서있는 목록 -->
<ol type="a" start="2">
<li>아이유</li>
<li>강호동</li>
<li>유재석</li>
</ol>
<dl>
<dt>올레코스1</dt>
<dd>코스:</dd>
<dd>거리:</dd>
</dl>
<p>Lorem ipsum dolor sit amet <i>adipisicing</i> <em>elit.</em>
<hr>
Lorem ipsum <b>dolor</b> sit amet <strong>consectetur</strong> adipisicing elit.
</p>
</body>
</html>
|
cs |
shape: 모양
rect: 사각형
coords: 자표값
area href = a href 와 거의 같다.
<form>태그
method
- get : 사용자의 입력 데이터를 url에 표시하며(사용자들이 다 봐버린다.), 데이터 크기에 제한이있고 쿼리 형식이다.
- post : 데이터 크기의 제한이 없어 많은 양의 데이터를 전달 할 수 있다.
<input type = ...>: 형식 지정
1.text: 보이는 텍스트
2:password: 안보이는 텍스트
3.range: 게이지바
4.number: 숫자
5.radio: 하나만 선택가능선택가능(해당하는 name을 똑같이 지어야한다.)
6.checkbox: 복수선택 가능(해당하는 name을 다르게 지어야한다.)
7.date: 년월일
8.time: 시간
9.submit: 페이지 확인 및 전송
name: 같은 이름끼리 그룹
value: 그 값의 속성, 넘어가는 값 , 숫자일 경우 처음 선택 지정.(2면 사이트 들어갈 때 2로 초기화되어 있음)
step: value 값의 변화 폭
readonly: value값으로만 지정 가능
required: 이 값은 꼭 입력해야함
size: 텍스트에서 몇 글자까지 보이게 할지 결정
maxlength: 문자 최대길이
minlength: 문자 최소길이
max,min: 숫자 최대길이, 숫자 최소길이
autofocus: 처음에 커서 깜박거리기
placeholder: 쓰는 공간에 투명한 안내문
<fieldset>: 네모영역
<legend>: fieldset에 이름
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="images/kids.jpg" alt="" usemap="#fav">
<map name="fav">
<area shape="rect" coords="10,10,160,200"
href="https://www.daum.net/" target="_blank">
<area shape="rect" coords="220,10,380,200"
href="https://blog.naver.com/gpdlrkal" target="_blank">
</map>
<form action="#" method="POST">
<fieldset>
<legend>개인정보</legend>
<ul>
<li>
<label for="user_name">이름</label>
<input type="text" id="user_name">
</li>
<li>
<label for="user_addr">주소</label>
<input type="text" id="user_addr">
</li>
</ul>
</fieldset>
<fieldset>
<legend>로그인정보</legend>
<ul>
<li>
<label for="user_id">아이디</label>
<input type="text" id="user_id" maxlength="12">
</li>
<li>
<label for="user_pass">패스워드</label>
<input type="password" id="user_pass">
</li>
<li>
<label for="order_cnt">주문개수</label>
<input type="number" id="order_cnt">
</li>
<li>
<label for="order_cnt2">주문개수</label>
<input type="range" id="order_cnt2" min="1" max="5" value="2">
</li>
</ul>
</fieldset>
<fieldset>
<legend>신청과목</legend>
<p>이 달에 신청할 과목을 선택하세요.(1과목선택)</p>
<label><input type="radio" name="subject" value="C">C</label>
<label><input type="radio" name="subject" value="Java">Java</label>
<label><input type="radio" name="subject" value="C++">C++</label>
</fieldset>
<fieldset>
<legend>신청과목</legend>
<p>이 달에 신청할 과목을 선택하세요.(2과목이상 선택)</p>
<label><input type="checkbox" name="subject1" value="C">C</label>
<label><input type="checkbox" name="subject2" value="Java">Java</label>
<label><input type="checkbox" name="subject3" value="C++">C++</label>
</fieldset>
<fieldset>
<legend>날짜</legend>
<label><input type="date" id="sDate"></label>
<label><input type="time"></label>
<br/>
<br/>
<label><input type="date" id="eDate"></label>
<label><input type="time"></label>
</fieldset>
<input type="submit" value="확인">
</form>
</body>
</html>
|
cs |
<select>: 선택 박스 만들기
<optgroup>: 그룹화
<option>: 선택 옵션들
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<fieldset>
<legend>학과</legend>
<select id="major">
<optgroup label="공과대학">
<option value="1">건축공학과</option>
<option value="2">컴퓨터공학과</option>
<option value="3">영문학과</option>
<option value="4">재료공학과</option>
</optgroup>
<optgroup label="인문대학">
<option value="a">법학과</option>
<option value="b">불어과</option>
</optgroup>
</select>
</fieldset>
|
cs |
<textarea>: 문단으로 작성할 때.
rows: 행줄
cols: 열줄
<datalist>: input으로 만든 상자안에 들어갈 정보들을 설정(유저에게 보이지는 않음)
<input
list>: 연결
<progress>: 진행 속도 반복 (로딩같은)
<meter>: 진행 게이지바
시맨틱태그
1.header
-nav
2.section
-aside
-article
3.footer
-address