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

1. HTML 바로보기
2013. 12. 14
하코사 빼로

2. About 빼로
I.
꽉찬 7년차 개발자&퍼블리셔&강사
II. 마이다스아이티 근무
III. 웹 어플리케이션, 플래시 대체 모션구현
IV. 악기연주, 캠핑, 클라이밍
V. 문화인류학 석사 중퇴
VI. 웹의 발전사를 ‘문화’라는 도구를 이용하여 해석

3. 발표를 준비하게 된 이유

4. 목차
I.
태초에 HTML이 있었다
II. 퉁치지 말란 말야. CSS
III. 웹표준의 바람이 분다
IV. 내 손안의 작은 세상. 모바일웹
V. 우리 결혼했어요. HTML5+CSS3
VI. 고무고무열매를 먹었어요. 반응형웹
VII. 어쩌면 우리에겐 새로운 기회. 웹 접근성

5. 누구일까요?

6. I. 태초에 HTML이 있었다.

7. 웹은 무엇인가?
웹 = 문서!

8. HTML 구성요소
•
•
•
•
•
•
제목요소(H1, H2 ,H3…)
문단요소(P)
텍스트 효과 (Bold, Italic, Underline)
표(TABLE)
이미지삽입(IMG)
목록(UL, OL, DL)

9. HTML 4.01, XHTML1.0, HTML5
=
Word2003 doc파일, Word2007 docx파일

10. 생산과 소비의 분리
워드프로세서
HTML
한글,
MS-Word
메모장,
드림위버,
에디트플러스
NotePad++
익스플로러,
파이어폭스,
크롬,
사파리,
오페라
생산/소비
생산
소비

11. 가장 중요한 태그?
A

12. HTML
Hyper Text Markup Language

13. 가장 중요한 태그 A
1991
HTML 1.0 발표 (SGML에서 영향을 받은 12개 태그와 새로 생긴 A태그)
1995
HTML 2.0 발표 (IMG태그 추가)
1996
TABLE 태그 추가

14. 가장 중요한 태그 A
1999 HTML 4.01 발표
현대 웹의 원형

15. 가장 중요한 태그 A

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

18. CSS는 무엇인가?
워드프로세서의 스타일

19. 워드프로세서의 스타일

20. 퉁쳤던 그 시절의 HTML

21. Float:left의 진실

22. III. 웹표준의 바람이 분다

25. P태그의 흑역사
엔터 두개

26. 웹표준 바람
시멘틱
레이아웃
DIV+CSS

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

28. 스마트폰 시대의 시작

29. 스마트폰 시대의 시작

30. 모바일웹의 일등공신
Viewport

31. Viewport의 핵심
Width=device-width

32. 모바일전용 DTD?
XHTML 1.2 Mobile

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

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

37. HTML5 레이아웃태그 추가
Header, footer, section, article, aside…
HTML로 작성한 문서가
더욱 견고하게 해줌

38. 다 먹어버리겠다!
hover
animation
transform
HTML + CSS

39. HTML에서 흡수한 Script기능
Form의 유효성검사
캘린더 기능

40. HTML에서 흡수한 Script기능

41. CSS에서 흡수한 Script기능

42. 업계최초
충격! 비밀 공개!!!
HTML5와 CSS3가 세트로 인식되는 이유는?

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

44. 반응형웹의 흔한 질문

45. 반응형웹의 탄생
Step.1
Step.2
Step.3
• 웹을 어떤 스펙의 기기로 볼지 알 수 없음
• HTML 문서에 다양한 디바이스 대응 CSS 추가
• CSS3 미디어쿼리로 실시간 변화 관찰 가능

46. 반응형웹의 핵심기술
가변
레이아웃
가변
미디어
이미지
쿼리

47. 반응형웹의 구조
모바일
HTML
태블릿
데스크탑
구조화된 HTML에 상황에 맞는
해당 디바이스 CSS를 적용

48. 반응형웹은 눈요깃거리를 위하여
반응형웹의 진상이슈를 가져오는 것은
사용하는 기술인가?
기획자나 클라이언트 탓인가?

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

50. 웹 접근성

51. 웹 접근성 프로젝트 종류
웹 사이트
전체 리뉴얼
디자인을 유지한 채
웹 접근성 고도화

52. 클라이언트 뇌구조

53. 설득의 심리학
이 모션은 일부 브라우저에서만 구현 가능합니다.
그래도 괜찮으시겠어요?
리뉴얼 VS 고도화

54. CSS3 적용사례 – 한화 기념관
기존
리뉴얼
• http://www.hanwhahistoricalmuseum.co.kr
• http://hanwhahistoricalmuseum.midashelp.com

55. 발표를 마치며…

56. www.html.ac

57. 감사합니다