[chapter 5 콘텐츠]멀티미디어, 리스트, 표, 아이프레임, 양식태그, html 주의사항

멀티미디어

- 이미지

- 비디오, 오디오

- SVG( scalable, vector grapics)

 

 

img : 문서내에 이미지를 넣을 수 있는 태그

figure,figcaption : 하나의 독립적인 콘텐츠를 분리하고 그에대한 설명 추가

 

video : 문서에 영상첨부

audio : 소리첨부

 

svg : 그래픽으로 만들어진 이미지

-일반 이미지(래터스 이미지)와 다르게 수하 공식을 사용하여 그려지기 때문에 해상도의 영향을 받지 않아 확대/축소가 자유롭다.

- 주로 크기를 자주 바꾸어야 하는 작은 아이콘에서 많이 사용된다.

- 코드로 이루어져 있기 떄문에 스타일을 변경하거나 자바스크립트를 사용해 간단한 기능을 추가할 수도 있다.

 

 

리스트

- 정렬되지 않은 ( 순서가 없는) 목록 ul,li ●

- 정렬된 (순서가 있는) 목록 ol,li 1.2.3

- 설명 목록dl,dt,dd

 

표

- table tr,td

th : 열의 제목태그

thead : 제목 그룹 태그

tbody : 표 본문 요소 태그

tfoot : 바다글 요소 태그

cation : 표설명 태그

 

아이프레임

iframe : 현재 문서안에 다른 html ㅠㅔ이지를 삽입할 수 있는 태그

-외부 페이지를 불러올 수 있기 떄문에 불러온 외부 페이지의 영향을 받을 수 있다.

 

양식태그

1. form 

2. 설명과 입력 

3. 버튼

 

form : 정보를 제풀하는 태그 

정보를 입력하고 선택할 수 있는 input ,selctbox, textarea 등을 가질 수 있다.

정보를 제출하기 위한 button을 가진다.

action속성으로 정보가 제출되었을 때 페이지를 이동시킬 수 있다.

method 속성으로 정보가 제출될 때 처리 방식을 결정할 수 있다.

 

설명과 입력(label)

label : input, textarea,selectbox의 설명을 작성할 수 있는 태그

 

input : 사용자에게 데이터를 입력받을 수 있는 대화형 태그

자주 사용되는 input 타입 : checkbox, radio, file, button, hidden

 

select : 옵션 메뉴를 제공하는 태그

textarea : 여러줄을 입력할 수 있는 대화형 태그

 

#알아두면 좋은 속성

1. readonly : 사용자가 수정할 수 없는 "읽기 전용"으로 만든다.

2. required : form이 제출될 때 "필수 입력 사항으로 만든다.

3. placeholder : input, textarea에 부가 설명을 입력해 둘 수 있다.

3. disabled : 요소가 비활성화 되며 정보 제출 시 값이 제출되지 않는다.

 

button : 클릭 가능한 버튼을 태그로 form태그내에서 어디서든 사용할 수 있다.

type = reset,submit

 

html 주의사항

- 대소문자 구분( 마크업 소문자 작성)

- 닫는 태크 생략하지 않기

- 클래스 속성 은 영어로

- 아이디 값의 중복 피하기

- 시작태그 닫는태그 꼬이지 않게 주의

- 계층 (뎁스) 잘 유지

- 같은 의미를 가진 태그 중복 X 

 

추천 사이트 (html 기초강의)

1. tcp school

2. mdn

3. w3school