html 바로보기
DESCRIPTION
2013 년 하드코딩하는사람들 커뮤니티 세미나 자료입니다.TRANSCRIPT
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 리뉴얼
발표를 마치며…
감사합니다