공부할내용(82~127쪽)
1. form 태그
-form 태그는 폼 양식을 의미한다.
-form 태그는 action과 method 속성을 함께 이용한다.
-여기서 action 속성은 폼요소에서 사용자와 상호작용으로 입력받은 값들을 전송할 서버의 url 주소를 적는다.
-method 속성은 입력받은 값을 서버에 전송할때 송신방식을 적는다.
2. input 태그
로그인 페이지의 아이디와 비밀번호처럼 입력받는 요소를 생성할때 사용한다.
(형식)
<input type="종류" name="이름" value="초깃값">name 속성에는 입력 요소의 이름을 작성한다. (서버에서는 지정된 이름으로 입력요소를 식별 할 수 있다.)
value 속성은 입력 요소의 초깃값을 작성한다.
(예시)
<!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>
<div><input type="text"></div>
<div><input type="button"></div>
<div><input type="radio"></div>
<div><input type="hidden"></div>
<div><input type="submit"></div>
</body>
</html>
3. label태그
label태그는 form 태그 안에서 사용하는 상호작용 요소에 이름을 붙일때 사용한다.
명시적인 방법은 label 태그의 for속성과 상호작용 요소의 id 속성을 같은 값으로 설정하는 것이다.
<!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>
<div>
<label for="id">ID:</label>
<input type="text" id="id">
</div>
<div>
<label for="pw">PW: </label>
<input type="password" id="pw">
</div>
</body>
</html>
4. fieldset 태그와 legend 태그
박스모양의 테두리와 그룹의 이름을 붙일 수 있다.
<!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>
<form>
<fieldset>
<legend>회원 가입</legend>
<div>
<label for="em">email:</label>
<input type="email" id="em">
</div>
<div>
<label for="pw">PW: </label>
<input type="password" id="pw">
</div>
</fieldset>
</form>
</body>
</html>
5. textarea 태그
여러줄의 입력요소를 생성할때 사용한다.
<!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>
<form>
<fieldset>
<legend>게시글 올리기</legend>
<div>
<label for="ti">제목</label>
<input type="text" id="ti">
</div>
<div>
<label for="de">내용: </label>
</div>
<textarea id="de"></textarea>
</fieldset>
</form>
</body>
</html>
6. select 태그, option태그 optgroup태그
콤보 박스를 생성하고 optgroup태그로 항목들을 그룹으로 묶을수 있다.
<!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>
<form>
<select>
<optgroup label="과일">
<option value="사과">사과</option>
<option value="배">배</option>
</optgroup>
<optgroup label="채소">
<option value="시금치">시금치</option>
<option value="콩나물">콩나물</option>
</optgroup>
</select>
</form>
</body>
</html>
7.button 태그
button은 태그로도 생성할 수 있다.
<!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>
<button type="submit">제출하기</button>
</body>
</html>
8. 폼 관련 태그에서 사용 할 수 있는 추가 속성
-disable 속성
disable 속성은 상호작용 요소를 비활성화 한다.(입력, 선택등이 안된다.)
-readonly 속성
readonly 속성은 상호작용 요소를 읽기 전용으로 변경한다.
-maxlength 속성
maxlength 속성은 입력할수 있는 글자수를 제한한다.
<!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>
<button type="submit" disabled>제출하기</button>
<textarea readonly></textarea>
<textarea maxlength="4"></textarea>
</body>
</html>
-checked 속성
checked 속성은 요소를 선택한 상태로 표시한다.
-placeholder 속성
placeholder 속성은 입력 요소의 설명을 넣을 수 있다.
<!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>
<input type="checkbox" id="apple" name="apple" value="apple" checked>
<label for="apple">apple</label>
<input type="text" placeholder="댓글을 달아주세요">
</body>
</html>
9. 표 만들기
-table태그
표를 생성 할때 사용한다.
-caption 태그
표 제목을 지정할때 사용한다.(웹 접근성을 향상시킨다.)
- tr 태그
tr태그는 표에서 행을 생성할때 사용한다.
-th, td 태그
th태그는 표에서 제목을 나타내는 열을 생성할때
td태그는 표에서 일반적인 데이터를 나타내는 열을 생성할때 사용한다.
-rowspan과 colspan
행과 행을 병합할때는 rowspan 속성을 사용하고
열과 열을 병합할때는 colspan 속성을 사용한다.
-thead 태그 ,tfoot 태그 ,fbody 태그
표에서도 행을 묶어 그룹화 할수있다.
thead 태그는 헤더 영역을 tfoot 태그는 푸터 영역을 tbody 태그는 본문 영역에 해당하는 행을 그룹짓는다.
-col 태그와 colgroup 태그
표에서 열도 그룹화 할수 있다.
col 태그는 하나의 열을 그룹화 하고 colgroup 태그는 span 속성과 함께 사용한다.
-scope 속성
표를 생성할때 사용 할수 있는 속성 중에서 순전히 웹 접근성 향상을 목적으로 사용한다.
<!DOCTYPE html>
<html>
<head>
<title>loui3</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="2">음식</th>
</tr>
<tr>
<th rowspan="3">과일</th>
<td>사과</td>
</tr>
<tr><td>배</td></tr>
<tr><td>바나나</td></tr>
<tr>
<th rowspan="2">채소</th>
<td>시금치</td>
</tr>
<tr><td>콩나물</td></tr>
</table>
</body>
</html>
10. 멀티미디어
-audio 태그
audio 태그는 항상 src 태그와 함게 사용하고 src 속성에는 삽입하려는 오디오 파일의 경로를 넣어주면 된다.
-video 태그
audio태그와 비슷하게 사용한다.
-source 태그
source 태그는 audio 태그와 video 태그에서 리소스의 경로와 미디어 타입을 명시하는데 사용한다.
11. 시맨틱 태그
-header 태그
웹페이지에서 헤더 영역을 구분하는데 사용한다.
-nav 태그
웹페이지에서 내부의 다른영역이나 외부를 연결하는 링크 영역을 구분하는데 사용한다.
-section 태그
웹페이지에서 논리적으로 관련있는 내용을 구분할 때 사용한다.
-article 태그
웹페이지에서 독립적인 영역을 구분할때 사용한다.
-aside 태그
article 태그나 section 태그로 영역을 구분할수 없을때 사용한다.
main 태그
웹페이지의 주요 내용을 지정할때 사용한다.
12. 태그 종류에 상관없는 속성
-class속성
class 속성은 요소에 클래스명을 지정할때 사용한다.
-id 속성
말그대로 id를 지정할때 사용한다.
-style 속성
css 코드를 인라인으로 작성할때 사용한다.(.css 파일을 안만든다.)
-title속성
요소에 추가정보를 넣을때 사용하며, 마우스를 올리면 툴팁으로 표시된다.
'학습단 > HTML+CSS+Javascript 학습단' 카테고리의 다른 글
| 5장 css 필수 속성 다루기 (0) | 2023.03.11 |
|---|---|
| 4장 CSS 선택자 다루기 (0) | 2023.03.10 |
| 3장 실무에서 자주 사용하는 HTML 필수 태그 다루기 (2) | 2023.03.08 |
| 2장 HTML 문서 작성을 위한 기본 내용 살펴보기 (0) | 2023.03.07 |
| 1장 Hello, HTML + CSS + 자바스크립트 (~44p) (0) | 2023.03.06 |
