웹개발기초 4주차

문서의 구조화

- 정보 탐색이 중요해진 시대에 탐색이 쉽도록 작성

->기존 HTML 에선 웹 문서 구조 표현 태그 X(div, table태그로 비슷하게 작성

=>시맨틱 웹(Semantic Web)

- 웹 문서를 구조화하여 의미 있는 내용 탐색이 용이한 웹

- 기존 태그 (p,div,h1,h2 등.. <- 문서 구조, 의미 전달 어려움)

=>시맨틱 태그(header,section,article,main,summary,mark,time 등 <-문서 구조,의미 전달 태그)

-> 태그만 사용한다고 위치, 색, 모양이 자동 결정 X => CSS를 통해 직접 지정

 

.header { width : 100%; height : 15%; background: yellow;}

.nav { width ...; height ... ; float: left; background: ...;}  

.section{ width ...; height ... ; float: left; background: ...;}

.footer { width ...; height ... ; clear:both; background: ...;} <- clear:both = float 속성 초기화

 

웹 폼(form)

- 웹 페이지에서 사용자 입력을 밥는 폼 -> 입력 값 서버로 전달

<form name="fo" action="login.php" method="get"> ... </form>

name = 폼 이름 지정

action = 폼 데이터 처리할 웹 서버 응용프로그램 이름 지정

method = 폼 데이터를 엡 서버로 전송하는 방식 (GET(값 요청), POST(값 제출)가 대표적)

 

텍스트 입력

<input type = "text"> : 한 줄 짜리 입력 창

<input type = "password"> : 암호 입력 창 (사용자 입력 문자 대신 *같이 다른 문자 출력 가능)

-maxlength="글자 수"<- 글자 수 제한 가능

<textarea> : 여러 줄 입력 창

 

목록중 선택

<input type = "text" list(속성)="countries">

<datalist id="countries">

<option value="가나"> <-항목 하나 표현

<option value="스위스">

<option value="브라질">

</datalist>

 

버튼 만들기

<input type="button" value="button1">

<button type="button">button2</button>

 

선택형 입력

-checkbox <-복수 선택

짜장면 <input type="checkbox" value="1">

<input type="checkbox" value="1">

<input type="checkbox" value="2" checked> <- checked는 초기 선택

-radio <-단일 선택

<input type="radio" name="china" value="1">짜장면

<input type="radio" name="china" vlaue="2" checked>짬뽕

 

콤보 박스

<select name="china">

<option value="1">짜장면</option>

<option value="2" selected>짬뽕</option>

</select>

 

캡션

캡션 : <input type="text">(폼 요소)

1. <-가장 일반적으로 많이 사용

<label>사용자 ID:<input type="text"></label>

2.

<label for="loginID">사용자 ID:</label>

<input type="text" id=loginID">

 

HTML에서의 색 표현 

1.#rrggbb

2.이름 사용 ex) brown

 

-날짜 입력

<input type="month|week|date|time|datatime-local">

 

-스핀버튼 (정확한 값)

<input type="number" min="0.0" max="10.0" step="0.5">

 

-슬라이드 (대략적 값)

<input type="range" min="0" max="100" list="temperatures">

<datalist id="temperatures">

<option value="10" label="Low">

<option value="50" label="Medium">

<option value="90" label="High">

</datalist>

 

입력 정보의 힌트

-placeholder

ex) <input type="email" placeholder="id@host">

 

폼 요소 그룹핑

<fieldset> ... </fieldset>

<legend>그룹핑 제목</legend>