Web Resources

Web Design Resources LINK

"경쟁력 있는 디자이너가
되기를 원하십니까? 그렇다면
많은 자료를 참고하세요!"

아래의 정보들은 수업 시간의 제약으로 인해 자세히 강의할 수 없는 내용을 나열하였습니다. 내용별로 묶어 정리하였으니 참고하시기 바랍니다. 이외의 궁금한 내용이나 부족하다고 느끼는 점이 있다면 메일(Mail) 또는 스페이시스(Spaces)로 코멘트 바랍니다.

HTML5 & CSS3

웹 표준 단체 및 매거진…

    [ HTML5 & CSS3 ]

  1. W3C - World Wide Web Consortium…
  2. WHATWG - Web Hypertext Application Technology Working Group…

    3. [ Magazine ]

  3. A List Apart: For People Who Make Websites…
  4. Smashing Magazine – For Professional Web Designers and Developers…

    5. [ Learning & Tutorials ]

  5. Learn CSS Layout…
  6. Mozilla Developer Network…
  7. Codrops…

Responsive Layout Example

반응형을 위한 레이아웃 예제…

    [ Basic Layout Example ]

  1. 기본 반응형 웹 구조…
  2. 반응형 웹이 적용되지 않은 레이아웃…
  3. 반응형 웹이 적용된 레이아웃…
  4. 미디어쿼리를 이용한 예제…
  5. 반응형 웹 스토리텔링 응용 예제…
  6. 반응형 웹을 위한 9가지 기본원칙…
  7. 미디어쿼리 테스트…

    8. [ Box Layout Example ]

  8. Basic Static Layout…
  9. Float Layout…
  10. Flexbox Layout…
  11. Float - left…
  12. 3 Column Responsive Layout…
  13. Responsive equal height columns…
  14. @media query…
  15. Position of text inside an image…
  16. Display Container…
  17. Magazine…
  18. Advertising…
  19. Newspaper…
  20. Mobile…
  21. 3 Column Layout…
  22. Shuffle Box…
  23. Radius Box…
  24. Card Box…
  25. CAMPERS…

    26. [ Grid Layout Example ]

  26. Response Grid…
  27. Flexbox Grid…
  28. Negative Margins…
  29. Column Drop…
  30. Responsive grid with Flexbox…
  31. Used Grid Template…
  32. CSS Masonry layout…
  33. Custom Grid Layout…
  34. Based on a 12 columns grid system…
  35. Grid Block With Section Titles…
  36. Desktop Grid PSD…
  37. Tablet Grid PSD…
  38. Mobile Grid PSD…

    39. [ Flexible Layout Example ]

  39. INQUIRER…
  40. Little Pea Bakery…
  41. Mr. Simon Collison…
  42. Corporate…
  43. Vertical Type Blog…
  44. Carter McAlister…
  45. Onepage Portfolio…
  46. Mixed Portfolio…

    47. [ Font & Icon Example ]

  47. Typographic Scaling…
  48. Bootstrap Icon…
  49. Font Awesome Icons…
  50. Google Font Effect…
  51. Google Font…
  52. Google Icon…
  53. Scaling HTML & Fonts…
  54. Responsive Typography…
  55. Super responsive typography, using viewport units and calc…
  56. Responsive 'Hipster' Typography…
  57. Responsive Icons in CSS…

HTML5 + CSS3 + Javascript = Templates

개인이 및 기업이 공개한 Onepage Navigation 템플릿…

    [ Personal ]

  1. Template & Onepage Navigation #01…
  2. Template & Onepage Navigation #02…
  3. Template & Onepage Navigation #03…
  4. Template & Onepage Navigation #04…
  5. Template & Onepage Navigation #05…
  6. Template & Onepage Navigation #06…
  7. Template & Onepage Navigation #07…
  8. Template & Onepage Navigation #08…
  9. Template & Onepage Navigation #09…
  10. Template & Onepage Navigation #10…
  11. Template & Onepage Navigation #11…

    12. [ Blog & Portfolio ]

  12. Fashion Template…
  13. Blog Template…
  14. Fullwidth Template…
  15. Aside Template…
  16. Box Portfolio…
  17. Platz – Free Grid HTML template…
  18. Spore – Free HTML5 Masonry Blog Template…
  19. Future Imperfect…
  20. Bodo – Personal Template…
  21. Retrospect – Minimal features…
  22. Lens – Photographers always look…
  23. Spectral – Onepage website…
  24. Brandy – Portfolio Templatee…
  25. Dimension - Portfolio Theme…
  26. Editorial - Portfolio Theme…
  27. Forty - Portfolio Theme…
  28. Multiverse - Portfolio Theme…

    29. [ Enterprise ]

  29. Eleganter Template…
  30. Prospera Template…
  31. Design Template…
  32. Onepage Template…
  33. Sticky Footer Template…
  34. Shop Template…
  35. Business Template…
  36. Snow landing page…
  37. White Image Slider…
  38. White Video Slider…
  39. Sima…
  40. Space Agency…
  41. Bent – App Landing page…
  42. Triangle – Multicolor…
  43. Triangle – Singlecolor…
  44. Capture – Bootstrap HTML template…
  45. Bukku – Book/eBook Template…
  46. Timber – Onepage Bootstrap Template…
  47. Mabur - Portfolio Theme…

Responsive Elements

웹 디자인에 적용되는 다양한 요소 예제…

    [ Navigation ]

  1. Responsive Retina-Friendly Menu…
  2. CSS3 Responsive Navigation Menu…
  3. Responsive navigation multilevel…
  4. CSS3 animated & responsive dropdown menu…
  5. Greedy Navigation…
  6. Full Page Intro & Navigation…
  7. Responsive 3D Flip Navigation…
  8. Animated Navigation Examples…
  9. Responsive overlay menu - rows menu example…
  10. Responsive Show and Hide Navigation…
  11. Responsive Off Screen Navigation jQuery Plugin…
  12. Responsive Menu App…

    13. [ Breadcrumbs ]

  13. Responsive Breadcrumbs…

    14. [ Slide & Gallery ]

  14. Sliding Header Layout…
  15. Auto play Slider…
  16. Flat Sliding Boxes…
  17. Flexbox Image Gallery…
  18. Photo Gallery…
  19. Parallax Drag-slider With Transparent Letters…
  20. Fullscreen slider…
  21. Grid Gallery…
  22. Carousel layout - Spread of cards…
  23. Responsive Infinite Carousel…
  24. Slide to extra content…
  25. Full Width Scroller…
  26. Masonry…
  27. Fullscreen Pageflip Layout with BookBlock…
  28. Moving box carousel…
  29. List + Flip effect gallery…
  30. Flip gallery style menu…

    31. [ Timeline ]

  31. Responsive Material Design Timeline…
  32. RESPONSIVE TIMELINE…
  33. Responsive HTML Timeline…
  34. Super Simple Bootstrap Responsive Timeline…
  35. Pure CSS Timeline…
  36. Responsive Vertical Timeline…
  37. Responsive Bootstrap 3 Timeline…
  38. Responsive Timeline w/ Fade Animations…
  39. Responsive Horizontal Time Line…

    40. [ Comparison ]

  40. Sliding Panels using transforms…
  41. Image Comparison Slider…
  42. Before & After…

    43. [ Background ]

  43. Moving background-image on mousemove…
  44. Background and navigation…
  45. Animating Gradient…
  46. Background image fade on scroll…
  47. Background video…
  48. Full screen background…

    49. [ Popup ]

  49. Magnific popup…

    50. [ Chart ]

  50. Organization Chart…

    51. [ Tab ]

  51. Icon/Text Tabs…

    52. [ Accordion ]

  52. Animated accordion…
  53. Flexible slide-to-top accordion…
  54. Responsive Accordion…

    55. [ Table ]

  55. Table Layouts…

    56. [ Card ]

  56. Cards material design…
  57. Blog card…

    58. [ Form ]

  58. Form UI…
  59. Flat responsive form…
  60. Responsive Login/Signup Modal Window…

    61. [ Font & Text ]

  61. Animated ribbon title…
  62. Multiline truncation…

    63. [ Pagination ]

  63. Responsive pagination…

    64. [ Elements Animation ]

  64. Animated elements - slider…
  65. Responsive Huggy Laser Panda Factory…

    66. [ SVG ]

  66. Animated SVG path…
  67. Absolutely positioned SVG…
  68. SVG & Typographic Layouts…
  69. SVG Animation…

    70. [ Element Queries ]

  70. Responsive Aspect Ratio…

    71. [ Filter ]

  71. Buoyant Responsive Logo…
  72. A blurred overlay…
  73. Interactive Particle Logo…
  74. The confetti animation…
  75. 3D solar system…

    76. [ etc ]

  76. Break out of parent element…
  77. Testimonials grid…
  78. Grid of Hexagons#1…
  79. Grid of Hexagons#2…
  80. Grid of Squares…
  81. Company Cards & List view…
  82. Flat UI Colors…
  83. Responsive website mockup…

Tools

좋은 툴은 효율과 생산성을 높여준다…

    [ Prototype Tools ]

  1. Sketch 3 - Professional Digital Design for Mac…
  2. Adobe Experience Design CC - 디자인. 프로토타입. 공유. 모두가 가능한 하나의 올인원 앱…

    3. [ Text Editor ]

  3. Sublime Text - Download…
  4. Textmate - The Missing Editor for Mac OS X…

    5. [ Code Editor for Web ]

  5. Liveweave - HTML5, CSS3 & JavaScript playground for web…
  6. CodePen - Front End Developer Playground & Code Editor in the…

    7. [ Web Font ]

  7. Google Fonts…
  8. MyFonts - Fonts for Print, Products & Screens…

    9. [ Color Picker ]

  9. Color Kuler - Create color schemes…
  10. Color Picker - Color Trends + Palettes…
  11. Color Hex Color Codes…

    12. [ Font Generator ]

  12. Modern and simple css @font-face generator…
  13. IconMoon - Icon Font & SVG Icon Sets IcoMoon…
  14. Favicon Generator - Favicon & App Icon Generatorn…

    15. [ Ruler ]

  15. mydevice.io - web devices capabilities…

Free Resources

포토 이미지, 벡터 이미지, 아이콘, 폰트 등 다향한 리소스를 무료로 사용가능…

    [ Icons ]

  1. Flaticon

    2. [ Vector Graphics ]

  2. Freepik

    3. [ Video & Photos ]

  3. Coverr

    4. [ Photography ]

  4. Pexels
  5. Unsplash - by Kang Ji-won

Mobile Apps

효율적인 작업을 위한 모바일 앱…

    [ Utility ]

  1. Adobe Capture

    2. [ Memo ]

  2. Google Keep;

    3. [ Collaboration ]

  3. Slack
  4. Trello

    5. [ Bookmarks ]

  5. Pocket

    6. [ Mindmap ]

  6. SimpleMind
  7. Mindly

Showcase

디자인 쇼캐이스…

  1. AWWARDS
  2. FWA
  3. CSS Design Awards
  4. MOBILE PATTERNS
  5. Behance
  6. Dribbble
  7. MediaQueri

Web Agency

국내 웹 에이전시 목록…

  1. 펜타브리드…
  2. 매그넘빈트…
  3. 바이닐…
  4. MZ…
  5. 디지털트리비…
  6. 인픽스…
  7. 엘루오…
  8. 디지털다임…
  9. 퓨즈…
  10. 더크림유니언…
  11. 프레임아웃…
  12. 인터메이저…
  13. 픽스다인…
  14. 원더랜드…
  15. 브릭스리퍼블릭…
  16. 키위…
  17. 알마커뮤니케이션즈…
  18. 가우테크…
  19. 디자인픽셀…
  20. 벤투스미디어웍스…

Links / Resources

자바스크립트와 CSS 관련 문서와 참고자료…

    [ Reference ]

  1. Mozilla JavaScript reference…
  2. Mozilla DOM reference…

    3. [ Browser Compatibility ]

  3. QuirksMode…
  4. Can I Use…
  5. ES5 Compatibility by Kangax…

    6. [ JQUERY ]

  6. jQuery API…
  7. jQuery Cheatsheet…
  8. jQuery UI…

    9. [ Javascript Newsletters ]

  9. JavaScript Weekly Newsletter…

    10. [ Tools ]

  10. JS Lint…
  11. JS Hint…
  12. Minifier…
  13. Unminifier…
  14. JSON Validator…
  15. Modernizr: Feature detection…

    16. [ Validation Service ]

  16. HTML Validation…
  17. CSS Validation…

  ©2016 KNULAB