웹 표준 퍼블리싱 바이블 책 정리(1)

Posted by HULIA(휴리아)
2018. 6. 4. 22:24 프론트엔드/그래픽디자인_퍼블리싱

웹표준의 장점

-관리측면 유리

-웹 접근성 향상

-검색엔진 최적화

-호환성 및 상호운영성


웹표준의 구성

-구조언어:HTML, XHTML, XML, SVG

-표현언어:CSS, XSL

-동작언어:Javascript, Ecmascript


1)구조언어와 표현언어를 섞어서 사용하지 않아야 합니다

2)구조언어와 동작언어를 분리해야 합니다


HTML5

-Semantics

메타데이터 컨텐츠, 플로우 컨텐츠, 섹셔닝 컨텐츠, 헤딩 컨텐츠, 프레이징 컨텐츠, 임베디드 컨텐츠, 인터랙티브 컨텐츠, 트랜스패어런트 컨텐츠

-offline & storage

인터넷이 연결되지 않은 상태에서도 응용 프로그램 동작할수 있게 해줌

-device access

디바이스의 하드웨어에 접근할 수 있는 기술(카메라/스피커/터치액정)

-connectivity

연결성을 위해서 웹 소켓을 지원(웹소켓 응용프로그램이 서버측 프로세스와 직접정인 양방향통신을 할 수 있도록 고안)

더 빠른 게임이나 실시간 채팅이 가능함

-multimedia

플러그인 없이 동영상이나 사운드를 재생할 수 있음(audio태그, video태그)

단, 브라우저마다 지원하는 형식이 따로 있음

mp3 -  익스플로러9, 크롬6, 사파리5

wav - 파어어폭스4, 크롬6, 사파리5, 오페라10.6

ogg - 파이어폭스4, 크롬6, 오페라10.6


mp4 - 익스플로러9, 크롬6, 사파리5

webM - 파이어폭스4, 크롬6, 오페라10.6

ogv - 파이어폭스4, 크롬6, 오페라10.6


-3D, graphics & effects

2차원 및 3차원 그래픽을 처리하기 위해 SVG, CANVAS, WebGL, CSS3 3D 

-performanace & integration

웹 워커를 사용하면 복잡한 프로그램을 수행하느라 컴퓨터가 잠시 멈춰버리는 경우를 피할 수 있다 XMLHttpRequest2와 같은 다양한 기술로 AJAX를 대체할 수도 있다


-CSS3

그라데이션, 애니메이션, 3D 등 다양한 표현 가능

기존은 항목별로 개발 되었지만 CSS3는 모듈단위로 개발


***언어의 개발단계는 보통 다음의 5단계를 따릅니다

1.작업초안(Working Draft=WD) - 스펙접수, 의견수렴, work in progress상태

2.최종 작업 초안(Last call work draft) - 워킹그룹에서 이슈를 해결한 상태

3.권고 후보(Candidate Recommendation=CR) - 구현 및 경험을 통해 스펙 재정의 

4. 권고 체안(Proposed Recommendation=PR) - 두 개의 구현 경험 및 테스트 통과

5. 권고(Recommendation=REC) - 스펙 정식 승인



HTML5

-doctype 지정

-lang 지정

-charset 지정

-메타요소(검색엔진)

keywords, description, robots, author, generator 

-viewport - 디스플레이의 화상표시 영역 지정