Html 바로보기

1,545 views

Published on

2013 년 하드코딩하는사람들 커뮤니티 세미나 자료입니다.

Published in: Entertainment & Humor
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,545
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
16
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Html 바로보기

  1. 1. HTML 바로보기 2013. 12. 14 하코사 빼로
  2. 2. About 빼로 I. 꽉찬 7년차 개발자&퍼블리셔&강사 II. 마이다스아이티 근무 III. 웹 어플리케이션, 플래시 대체 모션구현 IV. 악기연주, 캠핑, 클라이밍 V. 문화인류학 석사 중퇴 VI. 웹의 발전사를 ‘문화’라는 도구를 이용하여 해석
  3. 3. 발표를 준비하게 된 이유
  4. 4. 목차 I. 태초에 HTML이 있었다 II. 퉁치지 말란 말야. CSS III. 웹표준의 바람이 분다 IV. 내 손안의 작은 세상. 모바일웹 V. 우리 결혼했어요. HTML5+CSS3 VI. 고무고무열매를 먹었어요. 반응형웹 VII. 어쩌면 우리에겐 새로운 기회. 웹 접근성
  5. 5. 누구일까요?
  6. 6. I. 태초에 HTML이 있었다.
  7. 7. 웹은 무엇인가? 웹 = 문서!
  8. 8. HTML 구성요소 • • • • • • 제목요소(H1, H2 ,H3…) 문단요소(P) 텍스트 효과 (Bold, Italic, Underline) 표(TABLE) 이미지삽입(IMG) 목록(UL, OL, DL)
  9. 9. HTML 4.01, XHTML1.0, HTML5 = Word2003 doc파일, Word2007 docx파일
  10. 10. 생산과 소비의 분리 워드프로세서 HTML 한글, MS-Word 메모장, 드림위버, 에디트플러스 NotePad++ 익스플로러, 파이어폭스, 크롬, 사파리, 오페라 생산/소비 생산 소비
  11. 11. 가장 중요한 태그? A
  12. 12. HTML Hyper Text Markup Language
  13. 13. 가장 중요한 태그 A 1991 HTML 1.0 발표 (SGML에서 영향을 받은 12개 태그와 새로 생긴 A태그) 1995 HTML 2.0 발표 (IMG태그 추가) 1996 TABLE 태그 추가
  14. 14. 가장 중요한 태그 A 1999 HTML 4.01 발표 현대 웹의 원형
  15. 15. 가장 중요한 태그 A
  16. 16. II. 퉁치지 말란말야. - CSS
  17. 17. CSS는 무엇인가? 워드프로세서의 스타일
  18. 18. 워드프로세서의 스타일
  19. 19. 퉁쳤던 그 시절의 HTML
  20. 20. Float:left의 진실
  21. 21. III. 웹표준의 바람이 분다
  22. 22. P태그의 흑역사 엔터 두개
  23. 23. 웹표준 바람 시멘틱 레이아웃 DIV+CSS
  24. 24. IV. 내 손안의 작은 세상 모바일웹
  25. 25. 스마트폰 시대의 시작
  26. 26. 스마트폰 시대의 시작
  27. 27. 모바일웹의 일등공신 Viewport
  28. 28. Viewport의 핵심 Width=device-width
  29. 29. 모바일전용 DTD? XHTML 1.2 Mobile
  30. 30. V. 우리 결혼했어요. HTML5 + CSS3
  31. 31. HTML5 레이아웃태그 추가 Header, footer, section, article, aside…
  32. 32. HTML5 레이아웃태그 추가 Header, footer, section, article, aside… HTML로 작성한 문서가 더욱 견고하게 해줌
  33. 33. 다 먹어버리겠다! hover animation transform HTML + CSS
  34. 34. HTML에서 흡수한 Script기능 Form의 유효성검사 캘린더 기능
  35. 35. HTML에서 흡수한 Script기능
  36. 36. CSS에서 흡수한 Script기능
  37. 37. 업계최초 충격! 비밀 공개!!! HTML5와 CSS3가 세트로 인식되는 이유는?
  38. 38. VI. 고무고무 열매를 먹었어요. 반응형웹
  39. 39. 반응형웹의 흔한 질문
  40. 40. 반응형웹의 탄생 Step.1 Step.2 Step.3 • 웹을 어떤 스펙의 기기로 볼지 알 수 없음 • HTML 문서에 다양한 디바이스 대응 CSS 추가 • CSS3 미디어쿼리로 실시간 변화 관찰 가능
  41. 41. 반응형웹의 핵심기술 가변 레이아웃 가변 미디어 이미지 쿼리
  42. 42. 반응형웹의 구조 모바일 HTML 태블릿 데스크탑 구조화된 HTML에 상황에 맞는 해당 디바이스 CSS를 적용
  43. 43. 반응형웹은 눈요깃거리를 위하여 반응형웹의 진상이슈를 가져오는 것은 사용하는 기술인가? 기획자나 클라이언트 탓인가?
  44. 44. VII. 어쩌면 우리에겐 새로운 기회 웹 접근성
  45. 45. 웹 접근성
  46. 46. 웹 접근성 프로젝트 종류 웹 사이트 전체 리뉴얼 디자인을 유지한 채 웹 접근성 고도화
  47. 47. 클라이언트 뇌구조
  48. 48. 설득의 심리학 이 모션은 일부 브라우저에서만 구현 가능합니다. 그래도 괜찮으시겠어요? 리뉴얼 VS 고도화
  49. 49. CSS3 적용사례 – 한화 기념관 기존 리뉴얼 • http://www.hanwhahistoricalmuseum.co.kr • http://hanwhahistoricalmuseum.midashelp.com
  50. 50. 발표를 마치며…
  51. 51. www.html.ac
  52. 52. 감사합니다

×