Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

CSS Round Display KIG 발표자료

5 250 vues

Publié le

2015년 9월 W3C HTML5 Korean IG 회의에서 발표한
CSS Round Display 자료입니다.

Publié dans : Technologie
  • Soyez le premier à commenter

CSS Round Display KIG 발표자료

  1. 1. CSS Round Display 송효진 주임연구원 hyojin22.song@lge.com LG전자 SW플랫폼연구소 @ W3C HTML5 Korean IG 회의 (강남 토즈점) 2015. 9. 9
  2. 2. 2 • W3C and CSS WG • Intel Crosswalk Project • CSS Round Display Specification • 최근 CSS 동향 목차
  3. 3. 3 W3C and CSS WG
  4. 4. 4 • W3C  1994년부터 Web의 발전을 이끈 국제 컨소시엄  HTML, CSS, XML, SVG, ... • 표준화 Process  Editor’s Draft에서 Recommendation까지 1) First Public Working Draft 2) Revising Public Working Draft 3) Candidate Recommendation 4) Proposed Recommendation 5) Recommendation • W3C 내 모든 표준 문서 열람  http://www.w3.org/TR W3C (World Wide Web Consortium)
  5. 5. 5 • CSS Working Group  주 1회 컨퍼런스 콜  월 평균 400건 내외의 메일링 리스트 활동  연 4회 F2F 미팅  과거의 브라우저 벤더 위주의 참여 => 현재는 제조, 금융, 출판 등에서 활발히 참여  https://wiki.csswg.org/ • Participation  원칙적으로는 W3C 가입사만 참여할 수 있으나 사실상 누구나 참여 가능 • CSS 내 모든 표준 문서 열람  https://drafts.csswg.org/ CSS Working Group
  6. 6. 6 • CSS (Cascading Style Sheets)  마크업 언어가 실제 표시되는 방법을 기술하는 언어  HTML과 함께 Web 기술의 핵심을 이루고 있음  Cascading??  CSS3?? CSS Working Group
  7. 7. 7 Intel Crosswalk Project
  8. 8. 8 • Crosswalk Overview  New HTML5 runtime based on Google’s Blink  Optimized for Android (Supports Tizen, Linux, Mac, and Windows)  Fully open source, BSD licensed. Started in September, 2013 • Crosswalk’s Values  Hybrid Application이 주는 개발 생산성  다양한 안드로이드 버전에 따른 WebView 파편화 문제 해결 (Blink를 App에 내장)  최신 기술 선 탑재를 통한, 차별화된 웹 앱 개발 가능 (Native에 견주는 성능/기능) • Related Projects  Upstream projects: Chromium, Blink, Skia, V8, Wayland  Downstream projects: Integrated with Cordova, Intel® XDK Intel Crosswalk Project
  9. 9. 9 • Features and APIs  SIMD (Single instruction, multiple data)  Second Screen Presentation API  W3C Resource Timing API  W3C User Timing API  HTML5 input enhancements  Manifest (Standard manifest for web applications)  Beacon  Vehicle API (IVI)  DLNA API (IVI)  W3C SysApps: Raw Sockets  W3C SysApps: Device Capabilities  W3C SysApps: App URI Intel Crosswalk Project
  10. 10. 10 • Crosswalk Architecture Goals  Blink와 Chromium의 일부를 기반으로 구성하되, 기존 코드 변경을 최소화  필요한 기능 지원을 위해 업스트림 프로젝트와 함께 연계  최신 크로미움 버전을 자주 업데이트하며 새로운 기능 제공  다양한 API 확장을 반영하고 관리 Cordova APIs, early or experimental W3C APIs • Crosswalk 공식 홈페이지  https://crosswalk-project.org/ Intel Crosswalk Project
  11. 11. 11 CSS Round Display Specification
  12. 12. 12 • CSS Extensions for a Round Display  원형 디스플레이를 효과적으로 지원하기 위한 CSS 확장안 • Background  원형 디스플레이가 탑재된 제품의 연이은 출시 LG G Watch R, LG Watch Urbane LTE, Samsung Gear S2, Moto 360, ...  HTML Element는 기본적으로 Box Model (width, height, padding, margin) • History  14년 10월: TPAC 2014의 Breakout Session에서 소개  15년 2월: CSS WG 미팅에서 표준화 활동 공식 승인 (Editor’s Draft)  15년 4월: Specification, Polyfill 공개  15년 8월: CSS WG 미팅에서 FPWD 승인 (Working Draft) CSS Round Display
  13. 13. 13 • CSS Round Display Specification  https://drafts.csswg.org/css-round-display/ • CSS Round Display Polyfill  https://github.com/anawhj/jRound/ CSS Round Display
  14. 14. 14 • “device-radius” property  Inspired by “border-radius”  Supports many shapes include rectangle, circle, ellipse, rectangle with round corners, etc. 1. Detecting a Round Screen (Media Query) UA not supporting device-radius UA supporting device-radius [1] [2] [1]: <link media=“screen and (device-radius: 0%)” rel=“stylesheet” href=“rectangle-clock.css” /> [2]: <link media=“screen and (device-radius: 50%)” rel=“stylesheet” href=“round-clock.css” />
  15. 15. 15 • New property of the Screen object  radius: {1000px | 50%} • (New) property of the body element  document.body.borderRadius: {1000px | 50%} • Existing properties of the Screen object 1. Detecting a Round Screen (JavaScript)
  16. 16. 16 • Fitting contents inside the screen 2. Content Alignment
  17. 17. 17 • Extend the “shape-inside” property  Add a value “display” 2. Content Alignment ABCD EFGHIJK LMNOPQ RSTUV ABCDEF GHIJKLM NOPQRS TUVWXY ABCDEFG HIJ ABCDEFGHIJ shape-inside: circle (50% at 50%, 50%); shape-inside: display; shape-inside: display; ? ABC DEFG A BCD EF ABCD EFGH
  18. 18. 18 • Broken border at the display edge 3. Border
  19. 19. 19 • New “border-boundary” property  “none”(default) or “display” 3. Border border-boundary: display;border-boundary: none;
  20. 20. 20 • Elements are often placed along a circle. (or concentric circles) • Polar coordinates are useful. 4. Layout
  21. 21. 21 • Polar coordinates  “polar-angle” and “polar-distance”  With “position: polar” 4. Layout <div id=“container” style=“position: polar”> <div id=“circle1” style=“polar-angle: 0deg; polar-distance: 50%”></div> <div id=“circle2” style=“polar-angle: 90deg; polar-distance: 20%”></div> <div id=“circle3” style=“polar-angle: 225deg; polar-distance: 100%”></div> </body> 1 2 3
  22. 22. 22 최근 CSS 동향
  23. 23. 23 • Web Animations • Will-change • Layout (Flexbox, Grid) • Writing Modes • CSS Page Floats • CSS Inline Layout 주요 Spec
  24. 24. 24 • CSS Specifications https://drafts.csswg.org/ • The CSS3 TEST http://css3test.com/ • CSS TRICKS https://css-tricks.com/ • CSS3.info http://www.css3.info/ • CSS Validation Tool https://jigsaw.w3.org/css-validator/ • CSS Weekly News http://css-weekly.com/archives/ 참고 사이트

×