[길벗 학습단] 3장 실무에서 자주 사용하는 HTML 필수 태그 (2)

3장은 HTML에서 자주 사용되는 태그에 대해 설명하고 있고 대략적인 목차는 다음과 같다.

  1. 텍스트 작성하기
  2. 그룹 짓기
  3. 목록 만들기
  4. 링크와 이미지 넣기
  5. 텍스트 강조하기
  6. 폼 만들기
  7. 표 만들기
  8. 멀티미디어 설정하기
  9. 웹 페이지 구조를 설계하는 시맨틱 태그
  10. 태그 종류에 상관없이 사용하는 글로벌 속성
  11. 정리

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. 표 만들기

  1. table 태그 : 표 생성시 사용
  2. captino 태그 : 캡션
  3. tr 태그 : 행 설정
  4. th 태그: 제목에 해당하는 열 태그
  5. td 태그 : 내용에 해당하는 열 태그
    1. rowspin: 행과 행 병합
    2. colspan: 열과 열을 병합
  6. thead : 헤더영역에 해당하는 행을 그룹화
  7. tfooter : 푸터 영역에 해당하는 행 그룹화
  8. 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. 웹 페이지 구조를 설계하는 시맨틱 태그

  1. header 태그 : 헤더 영역
  2. nav 태그 : 외부를 연결하는 링크 영역
  3. section 태그 : 논리적으로 관련있는 내용 영역을 구분할 때
  4. article 태그 : 웹페이지 내 독립적인 영역
  5. aside 태그 : article이나 section 에 넣기 애매한 것들
  6. footer 태그 : 푸터 영역
  7. main 태그

답글 남기기

이메일 주소는 공개되지 않습니다.