Download as PDF, PPTX
![[D2 campus seminar]웹브라우저 엔진](https://cdn.slidesharecdn.com/ss_thumbnails/d2campusseminar-150227003530-conversion-gate01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[D2 CAMPUS] 부산대 Alcall 프로그래밍 경시대회 문제](https://cdn.slidesharecdn.com/ss_thumbnails/the1stpnucoderaceproblem1202-161228045635-thumbnail.jpg?width=640&height=640&fit=bounds)
모던 마크업 개발
- 1.
- 2.
- 3. 모던 마크업 개발? •모던 브라우저 빼고 다 유선 • 모던 마크업 개발 이 없는 세상 의 마크업 개발 • 그냥 한 번 상상해 보자구요
- 4. 웹 기술은 완성된상태로 세상에 나오지 않았다 슬슬 시작합시다
- 5. W3C 스펙은 대충이렇게 갑니다 1. WD Working Draft 2. LC Last Call 3. CR Candidate Recommendation 4. PR Proposed Recommendation 5. Rec Recommendation
- 6. 내용과 표현이 분리되기까지 비표준 코딩 표준 코딩 table 코딩 div 코딩 • CSS 2 1998 • CSS 2.1 CR 2007 • CSS 2.1 PR, REC 2011
- 7. 웹접근성이 확보되기 까지 •WCAG 1.0 1999 • WCAG 2.0 2008 • 대한민국 장애인차별금지 및 권리구제 등에 관한 법률 (제8974호) 시행 2008.4.11 • 대한민국 장애인차별금지 및 권리구제 등에 관한 법률 (제9705호) 시행 2009.8.23 • 대한민국 장애인차별금지 및 권리구제 등에 관한 법률 (제10280호) 시행 2010.5.11 • 대한민국 장애인차별금지 및 권리구제 등에 관한 법률 (제10465호) 시행 2011.9.30 • 대한민국 장애인차별금지 및 권리구제 등에 관한 법률 (제10789호) 시행 2011.12.8
- 8. 크로스 브라우징 방법론의확립 1. DTD 사용 2. 표준 먼저, 그 후 하위호환 작업 3. CSS 리셋 1. IE5, 6 대응 시절 2. IE6, 7 대응 시절 3. IE6, 7, 8 + FF 버전별 대응 시절 4. 현재는 IE6, 7, 8 + FF/Chrome 대응 (?)
- 9. HTML5 & CSS3 •HTML5 1st WD 2008 • Modules in CSS3 http://www.w3.org/Style/CSS/current-work
- 10. 모던 웹개발 시대 •웹기술은 흘러가고 있다 • 그러니 흐름을 타자 • 지금 찾는 정답이 내일 나올 수도 있다
- 11. 혹시… 고정관념을 만들고 계십니까? 여러분은아니길 빕니다
- 12. 어제는 정석, 오늘은구식 원 웹 시대 웹사이트를 개 만드는 건 용납 불가
- 13. 어제는 정석, 오늘은구식 원 웹 시대 웹사이트를 개 만드는 건 용납 불가 모바일 웹 시대 불편하니까 빨리 바꿔주세요
- 14. 어제는 정석, 오늘은구식 원 웹 시대 웹사이트를 개 만드는 건 용납 불가 모바일 웹 시대 불편하니까 빨리 바꿔주세요 반응형 웹디자인 시대 다시 하나로 합칩시다
- 15. 어제는 정석, 오늘은구식 원 웹 시대 웹사이트를 개 만드는 건 용납 불가 모바일 웹 시대 불편하니까 빨리 바꿔주세요 반응형 웹디자인 시대 다시 하나로 합칩시다
- 16. 어제는 정석, 오늘은구식 원 웹 시대 웹사이트를 개 만드는 건 용납 불가 모바일 웹 시대 시대에 따라 Plan B가 정석일 때도 있다 반응형 웹디자인 시대 다시 하나로 합칩시다
- 17. 모바일 쇼크가 준교훈들
- 18. 모바일 쇼크가 준교훈들 • 아 변화는 엄청나게 빨리 올 수도 있구나 • 옛날게 금방 없어지지도 않는구나 • 파편화된 개발은 참 짜증나는 거구나 • 원 소스멀티유즈는 쉽게 되는게 아니구나 • 일일이 다 대응하는 것도 답은 아니구나 • 전략이 필요하구나
- 19. HTML5의 의의 Abstract In thisversion, new features are introduced to help Web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability. • 웹도 네이티브 기술을 따라간다 • 앱을 만들 수 있을 때까지 • 계속 진화한다 • 웹은 웹 다워야지
- 20. 진화중인 CSS 가 인터랙션을 발생한다 가 컨텐츠를 담는다 가 모션을 처리한다 가 연산한다
- 21. 고정관념 타파 • 시간이 흐르면서 정답도 바뀐다 • 정석을 찾았다고 방심하지 말자 • 못 들어본 소리한다고 무시하지 말자 • 꼰대가 되지 말자
- 22. 정답은 없다 그러나 합의된최선은 있다 없으면 공부할 필요 없자너
- 23. 만년 떡밥, 이제는쉰 떡밥 • 퍼블리셔의 업무 범위는 어디까지인가요 • 자바스크립트 해야 하나요 • 이름 어떻게 지어야 좋을까요 • 그건 이나 마찬가진데요 • 쓰면 안되고 써야 된다고 하던데요 • 링크 점선 없애고 싶은데 안되나요 • 좋은 학원 추천 좀 해주세요
- 24.
- 25. 물고기 보다는 잡는법을 • 좋은 도서를 보자 • 좋은 블로그를 보자 • 가끔은 스펙도 보자 • 구글링을 해보자 영어로 • 잘하는 사람들이 무엇을 근거로 들어 설명하는지 자세히 보자
- 26. Pros & Cons 장점과 단점
- 27. Pros & Cons •하나의 이슈에도 다양한 방법론이 있습니다 • 각 방법론은 장점과 단점이 있습니다 • 치명적인 단점을 가진 방법은 사용할 수 없습니다 • 이왕이면 장점이 많은 방법이 좋습니다 • 실수하면 이슈가 생기고 어떤 단점이 있는지 알게 됩니다 우리는 경험에서 배웁니다
- 28. 반응형 웹디자인 Pros& Cons
- 29. IR 기법에도 다양한방식이… 안녕하세요. 막내 오브 막내 조은입니다. 오늘 발표드렸던 IR기법 발표 자료 공유하겠습니다. 1. NIR(Nash image replacement) URL: http://nicolasgallagher.com/css-image-replacement-with-pseudo-elements/ - IE7 이하에서 기능구현이 제대로 되지 않아서 IE7이하에서는 Phark Method로 적용되게 했습니다. - 함경우 과장님이 말씀하셨지만, only mobile용으로 개발한다면 좋은 기법이 될 것이라 생각됩니다. - SPRITE기법을 사용하는 방식이 다소 복잡합니다. (코드량이 어마무지하게 늘어납니다.) 2. nine Techniques for CSS IR URL: http://css-tricks.com/css-image-replacement/ - 소개드렸던 대부분의 기법을 소개해 주고 있습니다. 3. Scott Kellum Method URL: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ - Phark Method의 -9999px을 사용하면 우리 눈에는 보이지 않지만 브라우저 상에서는 해당 박스 영역까지 렌더링이 되 니, 그 부분을 수정해보자! 라는 의미에서 만든 거라고 합니다. - Phark Method에서는 길이가 극단적으로 길어질 경우에는 텍스트가 노출되는 경우가 있는데, 이 기법은 노출되지 않습 니다. 4. Another Image Replacement URL: http://nicolasgallagher.com/another-css-image-replacement-technique/
- 30. Float clear도 다양한방식이…
- 31. '웹 표준'은 결국합의 • 표준이 뭐야 • 가 뭐야 • 걔네가 만드는게 표준이야
- 32. 웹 문서, 웹 애플리케이션 자다시 신기술 얘기를 합시다
- 33. 웹을 보는 관점 •문서다
- 34. 웹을 보는 관점 •문서다 • 앱이다
- 35. Rich Internet Application •필요를 대체했던
- 36. Rich Internet Application •이제 준비를 갖추어 가고 있는
- 37. Single Page Interface • 페이지 이동이 없는 웹 • 페이지는 고정이지만 화면은 앱 처럼 변화 • 줄여서 라고 부르기도 하고 • 라고 하기도 하고 • 참고자료 http://www.slideshare.net/iolo/ss-7719322
- 38.
- 39. Device Web App •하이브리드 앱 플랫폼 제공 • 런타임 앱 플랫폼 제공
- 40.
- 41.
- 42.
- 43. 웹사이트, 웹앱의 호환기준 • 웹사이트의 개념 모든 환경의 사용자를 지원 • 앱의 개념 기준 환경 이상부터 지원 • 앱의 경우는 호환기준이 다를 수 있다 • 디바이스 웹앱의 경우는 더욱 그렇다
- 44. 국내 점유율 통계(스탯카운터)
- 45. CSS의 지원범위 • 은 지원여부를 고민할 필요가 없지만 는 모든 속성에 대해 지원범위를 확인해야 한다
- 46. 다음을 지원하는 IE버전은? • • • • • •
- 47. 다음을 지원하는 IE버전은? • 이상 • 이상 • 이상 • 이상 • 이상 • 이상
- 48.
- 49. 신기술을 대하는 자세 신기신기한 신기술
- 50. 내 마음 나도몰라 • 마크업 바운더리안에 갇혀 어느 순간 새로운 게 없다는 느낌 • 변화의 흐름이 너무 빨라서 쫓아가기 버겁다는 느낌
- 51. 내 마음 나도몰라 • 마크업 바운더리안에 갇혀 어느 순간 새로운 게 없다는 느낌 계속 공부하면 새로운 걸 알게되고 • 변화의 흐름이 너무 빨라서 쫓아가기 버겁다는 느낌
- 52. 내 마음 나도몰라 • 마크업 바운더리안에 갇혀 어느 순간 새로운 게 없다는 느낌 계속 공부하면 새로운 걸 알게되고 • 변화의 흐름이 너무 빨라서 쫓아가기 버겁다는 느낌 계속 공부하면 잘 쫓아갈 수 있고
- 53. 내 마음 나도몰라 • 마크업 바운더리안에 갇혀 어느 순간 새로운 게 없다는 느낌 계속 공부하면 새로운 걸 알게되고 • 변화의 흐름이 너무 빨라서 쫓아가기 버겁다는 느낌 계속 공부하면 잘 쫓아갈 수 있고 • 즐기세요
- 54. 내 마음 나도몰라 • 마크업 바운더리안에 갇혀 어느 순간 새로운 게 없다는 느낌 계속 공부하면 새로운 걸 알게되고 • 변화의 흐름이 너무 빨라서 쫓아가기 버겁다는 느낌 계속 공부하면 잘 쫓아갈 수 있고 • 즐기세요 즐기면 재밌어요
- 55. 신기술의 함정 • 신기술보다구기술이 유용하다 • 스페셜리스트 보다는 제네럴리스트 인생은 하드코어 모드 • 기술 예언자가 되어 정신승리 하지 말자
- 56. 신기술의 유익 • 남들보다앞서가면 재미있다 재미를 느끼면 열심히 하게 된다 • 신기술은 시간이 지나면 구기술이 된다 유용해진다 • 신기술은 주목 받는다 커리어 관리 측면에 장점
- 57. 선구자가 된다는 것 •어느새 내 앞에 가던 사람들이 안 보일 때 • 열심히 길을 닦아 갑시다 • 적어도 해외에는 있을거에요 • 로 로 배웁시다
- 58. Can you speakEnglish? 할 줄 알어?
- 59. 신기술은 어디서 배우나 • 도서는 번역서 나오는데 년 • 커뮤니티는 답글도 적고 오답도 많고 • 블로그는 쓰는 사람만 쓰고 새 글도 띄엄띄엄 • 세미나도 너무 가끔 • 교육은 비싸고
- 60. 번역이… 엉터리 • 꼭 틀린 번역이라고 할 수는 없지만 • 유쾌한 구어체가 딱딱한 문어체로 • 의역은 죄 짓는 기분이라서 결국 직역 • 그러나 직역으론 의미전달이 안 되는게 함정 • 출판사도 독자도 틀린 걸 잘 몰라 • 가 가리키는 것 헷갈려 • 개발용어인지 그냥 단어인지 헷갈려
- 61.
- 62. 자 정리합시다 담배 피고싶어 죽겠지
- 63. 결론 • 웹 기술은변화 중 고정관념을 갖지 말자 • 이미 이루어진 많은 이들의 합의에서 배우자 • 앱을 만드는 웹기술도 있다 • 신기술을 즐겨 익히되 맹신하진 말자 • 모던 는 매번 지원 범위 확인 습관 필요 • 영어도 게을리 말자
- 64.