html 바로보기

HTML 바로보기

2013. 12. 14

하코사 빼로

About 빼로

I. 꽉찬 7년차 개발자&퍼블리셔&강사

II. 마이다스아이티 근무

III. 웹 어플리케이션, 플래시 대체 모션구현

IV. 악기연주, 캠핑, 클라이밍

V. 문화인류학 석사 중퇴

VI. 웹의 발전사를 ‘문화’라는 도구를 이용하여 해석

발표를 준비하게 된 이유

목차

I. 태초에 HTML이 있었다

II. 퉁치지 말란 말야. CSS

III. 웹표준의 바람이 분다

IV. 내 손안의 작은 세상. 모바일웹

V. 우리 결혼했어요. HTML5+CSS3

VI. 고무고무열매를 먹었어요. 반응형웹

VII. 어쩌면 우리에겐 새로운 기회. 웹 접근성

누구일까요?

I. 태초에 HTML이 있었다.

웹은 무엇인가?

웹 = 문서!

HTML 구성요소

• 제목요소(H1, H2 ,H3…)

• 문단요소(P)

• 텍스트 효과 (Bold, Italic, Underline)

• 표(TABLE)

• 이미지삽입(IMG)

• 목록(UL, OL, DL)

HTML 4.01, XHTML1.0, HTML5

Word2003 doc파일, Word2007 docx파일

=

생산과 소비의 분리

메모장, 드림위버,

에디트플러스 NotePad++

익스플로러, 파이어폭스,

크롬, 사파리, 오페라

한글, MS-Word

워드프로세서

생산/소비

HTML

생산 소비

가장 중요한 태그?

A

HTML

Hyper Text Markup Language

가장 중요한 태그 A

1991

1995

1996

HTML 1.0 발표 (SGML에서 영향을 받은 12개 태그와 새로 생긴 A태그)

HTML 2.0 발표 (IMG태그 추가)

TABLE 태그 추가

가장 중요한 태그 A

1999 HTML 4.01 발표 현대 웹의 원형

가장 중요한 태그 A

II. 퉁치지 말란말야. - CSS

CSS는 무엇인가?

워드프로세서의 스타일

워드프로세서의 스타일

퉁쳤던 그 시절의 HTML

Float:left의 진실

III. 웹표준의 바람이 분다

P태그의 흑역사

엔터 두개

시멘틱 레이아웃 DIV+CSS

웹표준 바람

IV. 내 손안의 작은 세상 모바일웹

스마트폰 시대의 시작

스마트폰 시대의 시작

모바일웹의 일등공신

Viewport

Viewport의 핵심

Width=device-width

모바일전용 DTD?

XHTML 1.2 Mobile

V. 우리 결혼했어요. HTML5 + CSS3

HTML5 레이아웃태그 추가

Header, footer, section, article, aside…

HTML5 레이아웃태그 추가 Header, footer, section, article, aside…

HTML로 작성한 문서가 더욱 견고하게 해줌

다 먹어버리겠다!

HTML + CSS

transform

animation

hover

HTML에서 흡수한 Script기능

Form의 유효성검사

캘린더 기능

HTML에서 흡수한 Script기능

CSS에서 흡수한 Script기능

업계최초 충격! 비밀 공개!!!

HTML5와 CSS3가 세트로 인식되는 이유는?

VI. 고무고무 열매를 먹었어요. 반응형웹

반응형웹의 흔한 질문

반응형웹의 탄생

Step.1 • 웹을 어떤 스펙의 기기로 볼지 알 수 없음

Step.2 • HTML 문서에 다양한 디바이스 대응 CSS 추가

Step.3 • CSS3 미디어쿼리로 실시간 변화 관찰 가능

반응형웹의 핵심기술

가변

레이아웃

미디어

쿼리

가변

이미지

반응형웹의 구조

모바일

태블릿

데스크탑

HTML 구조화된 HTML에 상황에 맞는 해당 디바이스 CSS를 적용

반응형웹은 눈요깃거리를 위하여 사용하는 기술인가?

반응형웹의 진상이슈를 가져오는 것은 기획자나 클라이언트 탓인가?

VII. 어쩌면 우리에겐 새로운 기회 웹 접근성

웹 접근성

웹 접근성 프로젝트 종류

웹 사이트

전체 리뉴얼

디자인을 유지한 채

웹 접근성 고도화

클라이언트 뇌구조

설득의 심리학

이 모션은 일부 브라우저에서만 구현 가능합니다. 그래도 괜찮으시겠어요?

리뉴얼 VS 고도화

CSS3 적용사례 – 한화 기념관

• http://www.hanwhahistoricalmuseum.co.kr 기존

• http://hanwhahistoricalmuseum.midashelp.com 리뉴얼

발표를 마치며…

www.html.ac

감사합니다