CH3 - sec2 문서를 구조화하는 HTML

<section 2> HTML5 문서구조 및 주요태그

시맨틱태그 : 의미적태그로, 태그명이 표현되는 데이터를 설명

-HTML : 문서의 내용과 구조를 기술하는 곳으로 문서구조는 <header>, <nav>, <section>,<footer> 태그등을 사용해 각각의 영역을 표현함

헤더 태그 (네비게이션 태그<nav>)
내용 : 셋 중 하나 사용 <section> : 문서의 내용을 표시하는 태그 <article>: 주로 블로그의 글이나 기사 <div>: 문서의 영역을 나누는 블록요소	사이드바<aside>
푸터<footer> : 사이틔 제작자, 주소, 저작권 정보 등

엘리먼트 : 태그는 태그 그 자체를 말하며 엘리먼트는 태그를 구조적 문서 개념에서 설명할 때 주로 쓰인다

 

그외 태그들

- <figure> : 설명글을 붙일 대상 정의

-<figcaption> : 피규어와 유사

-<mark> : 텍스트에 형광펜(강조효과)

-<meter> :측정값

-<prograss> : 작업의 진행상태를 막대로 표시

 

▶웹 폼 태그(엘리먼트) : 입력폼을 구성하는 태그

: 모든 폼 태그는 원칙적으로 <form></form> 사이에 위치함

레이블이 없는 <input>,<select> 와 같은 폼태그에는 <label> 태그를 붙여서 작성

예) 이름 :  입력창

폼 태그 속성	설명
action	폼에 입력된 값을 처리할 페이지의 url을 지정, 생략 시 자신에게 입력값을 넘겨줌
method	폼에 입력된 값을 처리페이지로 넘길 떄 HTTP방식을 지정, GET/POST
name	폼의 이름을 지정

 

▶웹 폼 태그의 종류

-input,select,taxtarea,button

 

▶<input> 태그 속성

accep,autocomplate,autofocus,checked,disabled,list,max,maxlength,min,mutiple,name,pattern,placeholder,required,

size,step,type,value

 

▶정규표현식을 표현하기 지정문자는 그 종류가 많으며 가장 많이 사용되는형태는 [x,y,z]를 사용한 포함 문자와 반복을 의미하는 {n} 을 조합함.

예) [0-9] {6} : 6자리의 숫자의 입력

 

-체크박스 : 체크박스가 여러항복을 갖는 경우에는 <fieldset>태그를 사용해서 그룹화 함

-버튼 : 일반적인 버튼을 만들 떄 사용

글로벌 속성인 id, title 과 인풋태그의 name, value 등의 속성을 사용할 수 있음 

버튼은 onclick 속성 등을 사용해서 자바스크립트와 연결되는 이벤트 처리에 주로 사용함.

 

▶미디어/그래픽 태그 - 멀티미디어 재생 및 그래픽 영역 제공 태그

-<audio> ,<source>,<video>,<embed>,<object>,<iframe>,<canvas>,<svg>