HTML5 문서 구조화 (2)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

HTML5 문서 구조화 2

 

 

get 방식 전송 : 서식 내용을 이름과 데이터의 스트링 형태로 만들어 URL 뒤에 덧붙여 전달하는 방식

post 방식 전송 : 서식의 내용을 클라이언트(웹브라우저)와 서버간의 약속된 형식의 인코딩을 하여 서버로 전송하는 방식

루비 주석 : 중국어나 일본어 등에서 발음이나 기타 내용으 텍스트 위에 작은 글씨로 넣는 방식의 주석

 

 

---

 

표(Table) 만들기

 

표의 역할 : 자료나 정보를 일목요연하게 보여주는 역할

표 작성 시 유의 점

 

* 웹 접근성이 떨어짐

* 표 이외에 더 좋은 표현 방법이 있다면 표를 사용하지 않음

* 표를 페이지 레이아웃에 사용하지 않음

 

"웹 페이지 레이아웃 시 절대 사용하지 말아야 함."

 

 

HTML 표 작성 방법

 

표 용어의 통일

 

* 명확한 행과 열의 대한 표현이 없음

 

가로 열 : row

세로 열 : column

 

 

1. table 요소 : <table>,</table>

 

* 표를 의미, 표의 시작과 끝에 입력

* row와 column 같이 다양한 요소를 포함한다.

* XHTML 이전 : <table border="1"> → 테두리선의 두께 지정

* HTML5 : 표현적 마크업 존재하지 않음

→ CSS를 통하여 테두리 두께 지정

CSS를 미설정 시 기본 설정 테두리 두께는 "0" (테두리가 보이지 않는다.)

 

2. tr 요소

 

* table 요소의 내부에 정의, 표의 row

* 사용 방법 : <tr>로 시작하여 </tr>로 마침

* 요소는 테이블 셀(th 또는 td 요소) 포함

 

3. td 요소, th 요소

 

* td 요소 : 테이블 셀(칸)을 의미

* th 요소 : 헤더 셀을 의미, 제목 셀에 사용

* 셀을 정하기 전에 테이블에 몇 개의 column으로 구성되어 있는 지를 파악.

 

 

셀 병합 : 테이블 셀을 하나로 만들 필요가 있음

 

---

 

가로 셀 병합

 

* colspan 속성 사용

예) <th colspan="2">구분</th> : 가로 두 개의 셀을 합침

 

---

 

세로 셀 병합

 

* rowspan 속성 사용

예) <td rowspan="6">연령</td> : 세로 6개의 셀을 합침

 

---

 

 

---

 

 

표의 구조화

 

* 컴퓨터가 이해 가능하도록 함

 

1. 표를 이해하면 검색자의 요구를 정확히 연결

2. 분석을 통한 데이터 활용도를 높임

3. 시각 장애가 있는 사람들에게 컴퓨터가 표를 읽어 줄 수 있음

 

* 표의 어떤 셀의 어떤 의미를 가지고 어떤 셀에 영향을 주는지에 대한 설정

 

 

thead, tbody,tfoot

 

표의 가장 큰 구조적 분리

thead : 표 머리 부분으로 제목으로 구성된 row 집합

 

1. 하나 이상의 row로 구성

2. 표 마다 하나의 thead 요소만 사용 가능

 

tbody : 일반적인 row의 집합

 

1. 하나 이상의 row로 구성

2. 하나의 표에 여러 개의 tbody 사용 가능

3. 표의 내용 분리가 있을때 사용

 

tfoot : row의 요약(footer)들로 구성된 row 집합

 

1. 하나 이상의 row로 구성

2. 표마다 하나의 tfoot요소만 사용 가능

3. table 요소 내 위치와 상관없이 ftoot 요소는 표 마지막에 표시

 

 

---

 

 

col, colgroup 요소 : column의 구조화를 위하여 사용

 

col 요소 : 하나의 column을 의미

 

* span 속성을 이용하여 하나 이상의 column을 가리킬 수 있음

 

colgroup 요소 : col 요소의 그룹

 

* table 요소 내부에 위치

* caption 요소보다 뒤에 있어야 하며 thead, tbody, tfoot 요소 보다는 앞에 있어야 함

 

scope 속성

 

* 정의 : th요소에 사용되는 속성, th의 영향력이 어느쪽으로 향하는 지 지정

* scope 속성 미 설정시 scope="auto"로 설정

( scope="auto" → 문맥으로 헤더 셀의 영향이 row 또는 column을 결정 )

 

caption 요소

 

* 정의 table의 제목을 나타냄, table 요소의 첫 번째 자식 요소로 가장 먼저 설정

* 만약 table 요소가 figure요소의 유일한 자식이라면 table 요소 내부에서 caption 요소를 사용하지 않고 figcaption요소로 타이틀을 지정

예) <caption>내용</caption> → <figcaption>내용</figcaption>

 

 

---

 

 

HTML5 서식

 

* 사용자의 상호작용

* 서버에서 처리될 데이터를 제공하는 역할을 하는 웹 페이지 콤퍼넌트

* HTML5는 고급 폼 콘트롤러 제안

 

"아직 모든 웹브라우저에서 지원하지 않음"

 

 

From 요소

 

* 정의 : HTML의 서식을 정의하는 요소

* 예 (고객 이름 입력 서식)

 

---

 

<from>

<p><label>고객 이름 : <input></label></p>

</from>

 

* from 요소 내부의 서식 요소는 대부분 <p>, </p>요소 안에 정의

 

---

 

* From 요소의 속성 : 서식의 내용을 어느 곳으로 어떤 방식으로 전송 할 거인지 속송 지정

 

1. action : 서식에서 전송 단추를 눌렀을 때 내용이 전송되는 서버 파일의 URL

2. method : 폼이 전송되는 방식을 결정, get과 post 중 선택

 

* method = "get" (get 방식)

 

1. 클라이언트(웹브라우저)는 서버에 폼 데이터를 이름과 값이 결합된 스트링 형태로 전달

2. 데이터의 이름과 값 : '&'문자를 이용하여 연결

3. action 속성의 인터넷 주소 (URL) 값 뒤에 부어 URL 생성

4. 웹 브라우저에서 직접 입력하여 접근 가능, 북마크도 가능

 

* method = "post"

 

1. 클라이언트(웹브라우저)와 서버간의 약속된 형식으로 인코딩을 하여 서버로 전송

2. 인터넷 주소 (URL)에 전송 값이 나타나지 않음

3. 전송 내용은 가려지지만 북마크나 접근 불가

 

* input 요소

 

1. 정의 : 다양한 타일을 가지는 입력 데이터 필드

2. input 요소의 type 속성 : input 요소를 통해 받아들이는 데이터의 속성 정의로 type 속성에 따라 input 요소를 다르게 표현 ( 예 : text, password,hide, radio, submit, reset 등 )

3. HTML5에서 input요소의 type 속성 값 : url, tel, email과 같은 구체적인 타입 추가

 

* label 요소

 

1. 정의 : 서식 입력 요소의 캡션

2. label 요소의 사용

 

- for 속성의 사용

 

---

 

<label for="name">이름:</label><input id="name" type="text">

 

---

 

- lable 요소 내부에 서식 요소 넣기

 

---

 

<label>이름:<input type="text"></label>

 

label 요소 내부에 서식 요소를 넣을 때는 두 개 이상의 서식 요소를 넣지 않음

 

---

 

텍스트와 패스워드 입력 서식

 

* <input type="text">

 

1. 일반적인 줄바꿈이 없는 텍스트 입력

2. type 지정하지 않으면 text 타입으로 인식

 

* <input type="password">

 

1. 패스워드 입력

2. 화면에 입력된 텍스트가 보이지 않음

 

---

 

예

 

<p><label>이름:<input type="text"></label></p>

<p><label>아이디:<input type="text"></label></p>

<p><label>암호:<input type="password"></label></p>

 

---

 

입력 서식의 중요 공통 속성들

 

* name 속성

 

1. 서버에 전달될 서식 값의 이름

2. 반드시 필요

 

* required 속성

 

1. 서식 값이 반드시 입력되어야 함을 의미

2. 회원가입 시 화원 이름과 아이디 등과 같은 필수 적인 서식 필드에 필요

3. 서식이 제출되기 직전 유효성 검사에서 처리

 

* placeholder 속성

 

1. 입력 폼에 짧은 힌트

 

* maxlength 속성

 

1. 서식 요소에 입력되는 값의 최대 길이 설정

2. maxlength 속성이 설정된 입력 폼은 maxlength 값 이상 입력이 안됨

 

* autofocus 속성

 

1. 폼이 로딩되면 커서가 auofocus 속성이 있는 폼 요소로 이동

2. 첫 번째 입력 폼 지정에 사용

 

* fieldset 요소

 

1. 정의 : 폼 요소들의 공통된 이름으로 그룹화 할때 사용

2. 웹 브라우저에서 fieldset은 선으로 테두리가 표시되어 구분

 

---

 

<fieldset>

<legend>필수 입력</legend>

<p><label>내용<input name="name" ~~~~~~~~></label></p>

</fieldsed>

 

<legend>,</legend> 요소를 이용하여 fieldset 그룹에 이름을 지정

 

"<fieldset>,</fieldset>으로 이름, 아이디, 암호를 필수 입력이란 이름으로 그룹화"

 

---

 

* 라디오 단추

 

1. 정의 : 나열된 여러 보기 중 하나만 선택하게 할 때 사용하는 폼 콘트롤러

2. 사용 법 : <input type="radio">

( 같은 보기 그룹의 라디오 단추들은 name 속성 값이 같아야 함 )

* value 속성 : 이용하여 버튼이 선택 되었을 때 서버에 전달될 값을 입력

 

3. chechked 속성 : 라디오 버튼과 체크 박스에서 미리 선택되어야 하는 버튼이 있다면 checked 속성을 설정

 

* 체크 박스

 

1. 정의 : 여러 보기 중 복수 선택이 가능한 입력 타입

2. 사용 법 : <input type="checkbox">

( 같은 보기 그룹의 체크 박스 단추들은 name 속성 값이 같아야 함 )

* value 속성 : 이용하여 버튼이 선택 되었을 때 서버에 전달될 값을 입력

 

 

* 선택 메뉴 select 요소

 

1. select 요소 : 메뉴로 선택할 내용을 제시하고 하나를 선택하게 함, 자식 요소로 option요소를 가짐

2. option 요소

 

- 메뉴 내용과 선택했을 떄의 값을 설정

- value : 메뉴가 선택되었을 때 서버로 전달되는 내용

- selected 속성 사용시 미리 선택 가능

 

* textarea요소

 

1. 정의 : 여러 줄의 평범한 텍스트를 편집할 수 있는 폼 요소

2. textarea 속성들

- cols : 한 줄당 입력할 수 있는 글자수를 제한

- rows : textarea가 몇 개의 줄로 보여질지 결정

- wrap : soft 또는 hard의 값을 가짐

( soft 값은 텍스트가 제출될 때 줄바꿈이 되지 않지만 hard 값은 텍스트가 제출될 때 줄바꿈이 되도록 줄바꿈 문자를 삽입함 )

 

* button 요소

 

1. 정의 : 단추를 만드는 요소

2. type 속성에 따른 button 요소

 

- type="summit" : 서식을 제출하는 단추를 만듬

- type="reset" : 서식을 초기화 하는 단추를 만듬

 

"type 속성의 정의 되지 않을 시 일반적인 단추를 만듬"

 

 

---

 

 

HTML5의 새로운 요소들

 

* 웹 사이트를 분석하고 웹 제작자의 다양한 요구를 수집하여 많은 요소 추가

* 많은 요소가 아직 대부분의 웹 브라우저에서 구현되지 않음

* 서식 관련 요소의 추가가 많음

 

mark 요소

 

* 정의 : 문서내에서 다른 문맥과 관련성을 표시 하기 위해 참조 목적으로 표시하거나 하이라이팅한 텍스트

 

1. 검색 된 내용을 표시하기 위해

2. 틀린 곳을 표기하기 위해

 

* 기본 스타일 : 텍스트가 하이라이트 되어 보임 ( 문서가 상황에 따라 CSS로 적절한 스타일 정의애 사용 )

* 강조나 중요한 내용의 경우

 

- 문서 내에서 다른 내용과 분리, 강조, 부각을 위해 em, strong, b, i, mark 요소를 사용

 

ruby, rt, rp

 

* ruby

 

1. 주석 : 중국어나 일본어 등의 발음이나 기타 주석 목적으로 사용

2. 요소 : 구문에 루비 주성을 단기 위해 사용

 

* rt

 

1. 루비 주석을 나타냄

2. 루비 주석을 지원하지 않는 웹 브라우저에서는 루비 주석을 괄호로 표시하기 위해 사용

 

Time

 

* time 요소 : 시간과 날짜를 표시하는데 사용, 정확한 24시간, 그레고리력 이외의 시간과 날짜는 표시하지 않음

( 예 : 기원전 250년 겨울, 80년대 중반, 주라기 중반 등은 time요소로 표시하지 않음 )

 

* datetime 속성 : 정확한 날짜와 시간 명시

* pubdate 속성 : 부모 요소, 만약 부모 요소가 없다면 문서의 작성된 날짜와 시간 표시

 

S

 

* 더 이상 정확하지 않거나, 관련 없는 내용

* 문서에서 삭제 되었음을 표시하는 del요소와는 구분해 사용

 

command/menu

 

* command 요소 :사용자가 실행할 수 있는 명령

* menu 요소 : command 목록

* 현재까지 IE9, IE10에서만 구현

* 사용 법 : 실행할 명령 스크립트와 연결되어야 하고 type 속성을 이용하여 command type 지정

 

그 외의 텍스트 요소

 

* details/summary

 

1. details 요소 : 추가적인 정보를 제공하기 위한 기능 요소, 보통 가려져 있다 사용자 요구에 의해 펴짐, 현재 IE9, IE10에서만 구현

2. summary 요소 : details 요소 내부에서 요약이나 범레를 나타냄

 

datalist

 

* 정의 : 다른 입력 요소에서 사용하도록 미리 정의 된 option 집합

* datalist 요소가 사용되는 요소 타입에 따라 다르게 구현

 

새로운 input 타입

 

* search

 

1. 검색을 위한 택스트 입력 타입

2. 검색 목적을 제외 하면 text 타입과 같음

 

* tel

 

1. 전화번호 입력을 위한 타입

2. 줄바꿈을 할 수 없으나 입력에 형태를 제한하지 않음

 

* url

 

1. 인터넷주소(URL) 입력을 위한 타입

2. 입력 값이 URL 형식인지 내용 검사를 함

 

* email

 

1. 이메일 입력을 위한 타입

2. 입력 값이 이메일 형식인지 내용 검사

 

* datetime

 

1. 국제적 날짜와 시간 입력을 위한 타입

 

* data, month, week

 

1. 날짜, 달, 주 입력을 위한 타입

 

* time

 

1. 시간 입력을 위한 타입

 

* datatime-local

 

1. 지역 날짜와 시간 입력을 위한 타입

 

* number

 

1. 숫자 입력을 위한 타입

2. 직접 입력과 단추를 이용한 입력 모두 가능

3. 입력의 최소 수치와 최대 수치를 제한 하기 위해 min, max 속성 사용가능

4. step 속성 : 단추를 이용해 입력 시 단추 입력 수치 제한을 위한 속성

 

* range

 

1. 정밀한 숫자 입력이 필요하지 않은 숫자 입력 타입

2. 슬라이드 형태로 표현

 

* color : #으로 시작하는 7글자 색상 코드를 입력을 위한 타입

 

* progress 요소

 

1. 정의 : 작업의 진척도를 나타내는 요소

2. value 속성으로 얼마나 진척되었는지 설정

3. max 속성으로 완료 수치 설정

4. 지원하지 않는 웹 브라우저를 위해 내부에서 텍스트로 입력

 

* meter 요소

 

1. 정의 : 알려진 범위 내에서 수치 정도를 나타냄 ( 예 : 투표율, 디스크 사용현황, 검색 빈도 등 )

2. 진척도 표시는 progress 요소를 사용

3. min, max, value 속성을 이용하여 나타냄

4. 지원하지 않는 웹 브라우저를 위해 내부에서 텍스트로 입력

 

 

---

 

 

HTML5에서 사라진 요소들

 

 

표현 마크업 요소

 

1. 기존 표현 마크업 요소들은 CSS 사용으로 대체

2. basefont, font, big, blink, spacer, strike, center, tt 등의 요소는 사용하면 안됨

 

프레임 관련 요소

 

1. 더이상 프레임을 사용하면 불가

2. iframe 사용은 가능

3. frame, frameset, noframes 등의 이제 사용하면 안됨

 

기타 다른 요소

 

1. 다른 대체 기술이 개발된 apple이나 bgsound 요소도 사용하면 안됨

2. 기존에 혼란을 일으켰던 acronym와 abbr은 abbr 요소로 통일해 사용

3. dir, isindex, listing, xmp, plaintext, rb 등의 요소도 더이상 사용하면 안됨

 

 

---