3장은 HTML에서 자주 사용되는 태그에 대해 설명하고 있고 대략적인 목차는 다음과 같다.
- 텍스트 작성하기
- 그룹 짓기
- 목록 만들기
- 링크와 이미지 넣기
- 텍스트 강조하기
- 폼 만들기
- 표 만들기
- 멀티미디어 설정하기
- 웹 페이지 구조를 설계하는 시맨틱 태그
- 태그 종류에 상관없이 사용하는 글로벌 속성
- 정리
6. 폼 구성하기
1. form 태그
폼의 시작을 의미. 일단 폼을 만들려면 <form></form> 써야 함.
action 속성 : 입력받은 값들을 전송할 서버 URL 주소
method: 전송할 때 송신 방식 (get 혹은 post)
<form action="url" method="get">
</form>
2. input 태그
로그인 페이지의 아이디, 비번처럼 뭔가 입력할 때 쓰는 태그
type: 종류 name: 이름 valu: 초기값
type은 text, password, tel, number 등 여러 속성값들이 있다.
<input type="text" name="이름" value="초기값">
3. label 태그
form 태그 안에서 상호작용 요소에 이름 붙일 때 사용. for과 id 속성이 있는데 두 값은 같아야 한다.
4. fieldset과 legend 태그
fieldset으로 그룹화 시킬 수 있고, legend는 그 그룹에 이름을 붙이는 태그이다.
5. textarea 태그
웹사이트에 글을 입력할 때 쓰는 부분
6. select, option, optgroup 태그
select는 콤보박스 생성. 콤보박스에 들어가슨 요소들은 option 태그로 설정. optgroup 태그는 그 요소들을 group화 한 것.
size 는 화면에 노출되는 콤보박스의 크기.
multiple 속성은 여러 항목을 동시에 고를 수 있게 하는 태그
selected 속성은 기본적으로 선택되어 있는 요소
7. button 태그
7. 표 만들기
- table 태그 : 표 생성시 사용
- captino 태그 : 캡션
- tr 태그 : 행 설정
- th 태그: 제목에 해당하는 열 태그
- td 태그 : 내용에 해당하는 열 태그
- rowspin: 행과 행 병합
- colspan: 열과 열을 병합
- thead : 헤더영역에 해당하는 행을 그룹화
- tfooter : 푸터 영역에 해당하는 행 그룹화
- tbody : 본문 영역에 해당하는 행을 그룹화
8. 멀티미디어 설정하기
1. audio, video 태그
<audio src="오디오 파일 경로" controls></audio> <!-- 오디오 파일 -->
<source src="example.mp3" type="audio/mp3">
<video src="비디오 파일 경로" controls></video> <!-- 피디오 파일 -->
<source src="example.mp4" type="video/mp4">
9. 웹 페이지 구조를 설계하는 시맨틱 태그
- header 태그 : 헤더 영역
- nav 태그 : 외부를 연결하는 링크 영역
- section 태그 : 논리적으로 관련있는 내용 영역을 구분할 때
- article 태그 : 웹페이지 내 독립적인 영역
- aside 태그 : article이나 section 에 넣기 애매한 것들
- footer 태그 : 푸터 영역
- main 태그