개발자에게넘겨주기편한 TABLE&FORM 마크업 김남용
INDEX 들어가기 고민하기 HTML(TABLE/FORM) CSS JS
들어가기 이제는 ~ 서로간의이슈웹표준 & 웹접근성왜웹표준으로해야할까요? 모든웹페이지는 ~ 퍼블리싱순서
이제는 ~ 디자이너 디자이너 퍼블리셔 Front-end (UI 개발자 ) 퍼블리셔 Front-end (UI 개발자 ) 서버개발자 서버개발자
퍼블리셔의역할 [ 네이버블로그황금상인발췌 ]
서로간의이슈 퍼블리셔 1 픽셀어긋남인터랙션구현 반복문에서의반복불가 ( 가변 ) 디자이너 개발자
웹표준, 웹접근성 웹접근성 웹표준
왜웹표준으로 해야할까요? 웹접근성의용이성마크업코드량감소 ( 클래스 /ID) 컨텐츠 & 소스분리로관리가용이검색로봇이쉽게검색브라우저별랜더링상이감소
모든웹페이지는 ~ 구조 (HTML) + 표현 (CSS) + 동작 ( JS )
퍼블리싱순서 마크업언어 & 개발언어확인 인코딩타입확인 네이밍, 파일경로 HTML > CSS > JS
HTML HTML 아이디어! TABLE TABLE 아이디어! TABLE 예제 TABLE 구조 FORM FORM 아이디어! 여러가지 FORM관련 Element FORM 예제
HTML 아이디어! static 페이지와개발페이지분리게시판 &FORM의반복처리부분가변상태에따라바뀌는페이지예 ) 로그인 block / inline 요소 (p,span) 제대로쓰기공통변수 (flag)
TABLE 아이디어! 디자인 layout 용도로쓰지않는다. caption과 summary를제공한다. 제목은 th, 내용은 td로구분하여작성대부분 row수가가변적고려 ( 디자이너, 개발자 ) 개발적용부분고려
TABLE 예제 thead 판매량 1/4 분기 2/4 분기 3/4 분기 4/4 분기 td colspan= 2 tbody th td td rowspan = 2
TABLE 구조 1 <table summary=... > <caption> 샘플 </caption> <colgroup> <col class= column1 /> <col class= column2 /> </colgroup> <thead> <tr> <th>...</th> <th>...</th> </tr> </thead>...
TABLE 구조 2... <tbody> <tr> <th scope= row ></th> <td></td> </tr> <tr> <th></th> <td></td> </tr> </tbody> </table>
FORM 아이디어! 입력받는 input 요소에 <label> 요소또는 title 속성제공 label 제공할수없을때 title 속성사용 id 는유니크하게 입력오류수정가능하게방법제공
FORM 구조 <form name= method= post action= >. <fieldset> <legend>...</legend> <label for= >...</label> </fieldset>. <fieldset> <legend>...</legend>... </fieldset>. </form>
FORM-input XHTML <input type= text name= value= /> HTML5 <input type= text name= value= >
FORM-check XHTML <input type= checkbox name= hobby value= 여행 /> <input type= checkbox name= hobby value= 운동 /> HTML5 <input type= checkbox name= hobby value= 여행 > <input type= checkbox name= hobby value= 운동 > 배열형태로저장되기때문에그룹내 name 은 같아야한다. ID 는틀려야함
FORM-radio XHTML <input type= radio name= school value= 1 /> <input type= radio name= school value= 2 /> <input type= radio name= school value= 3 /> HTML5 <input type= text name= school value= 1 > <input type= text name= school value= 2 > <input type= text name= school value= 3 > check type 과같음
FORM-input(etc) <input type= file name= /> <input type= password name= /> <input type= submit name= /> <input type= image name= /> <input type= button name= /> <input type= hidden name= /> <input type= reset name= />
FORM-select XHTML <select name= school > <option selected= selected > 초등 </option> <option> 중등 </option> <option> 고등 </option> </select> HTML5 autofocus, form 같은속성추가 <select name= school > <option selected= selected > 초등 </option> <option> 중등 </option> <option> 고등 </option> </select>
FORM-textarea XHTML <textarea rows= cols= ></textarea> HTML5 <textarea rows= cols= ></textarea> autofocus, form, maxlength, placeholder, required, wrap 같은속성추가
new input types <input type= xxx value= > color, date, datetime, datetime-local, email, month, number, lange, search, tel, time, url, week http://www.w3schools.com/html5/ html5_form_input_types.asp
new input method <input type= xxx value= > autocomplate, autofocus, list(datalist),placeholder, 폼관련 : formaction, formenctype, formmethod, formnovalidate, formtarget 입력값범위 : min, max, maxlength, step http://www.w3schools.com/html5/ html5_form_attributes.asp
FORM 예제 <form name= form2 action= > <fieldset> <legend> 회원가입폼 </legend> <label for= uid > 아이디 </label> <input type= text name= id id= uid /> <label for= uid > 패스워드 </label> <input type= password name= pw id= pw /> <input type= submit value= 보내기 /> </fieldset> </form> <input type= image src= url />
CSS 이렇게! 이제는 아이디어!
이렇게! CSS RESET( 브라우져별차이 ) 큰것부터작은것으로 ( 상위속성상속 ) #,. 의미있는이름으로 METHOD는일관성있는순서로 ~ 표현할수있는건되도록 CSS로
이제는 animation multimedia(image, audio, video) typography
아이디어! CSS 폼버튼만들기예 ) type={submit,button} 재사용가능한클래스명사용하기 네이밍정리하여충돌생기지않게 (id,class, 예약어 ) HTML block/inline Element 기본속성에맞게
JS 아이디어! 라이브러리
JS 아이디어! 인터렉션기능협의 JS 라이브러리,API 종류확인환경설정,Function,Lib등별도관리 FORM 입력데이터유효성검사는로컬 처리및서버단에서 Ajax 처리 ( 웹접근성 )
JS 라이브러리 JQuery PC Web ExtCore JQuery Mobile Mobile Sencha Touch
감사합니다. Universal Web Studio Clearboth www.clearboth.org