{"id":22154158,"url":"https://github.com/ppeeou/fe-study","last_synced_at":"2026-03-19T21:59:30.204Z","repository":{"id":21353113,"uuid":"92462863","full_name":"ppeeou/FE-study","owner":"ppeeou","description":"codepen.io , template etc..","archived":false,"fork":false,"pushed_at":"2023-03-01T11:29:17.000Z","size":349,"stargazers_count":3,"open_issues_count":5,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-15T07:41:54.124Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ppeeou.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-26T02:17:47.000Z","updated_at":"2023-03-08T02:55:44.000Z","dependencies_parsed_at":"2024-12-02T02:37:25.250Z","dependency_job_id":null,"html_url":"https://github.com/ppeeou/FE-study","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ppeeou%2FFE-study","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ppeeou%2FFE-study/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ppeeou%2FFE-study/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ppeeou%2FFE-study/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ppeeou","download_url":"https://codeload.github.com/ppeeou/FE-study/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245284736,"owners_count":20590307,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-02T01:41:34.825Z","updated_at":"2026-01-06T04:31:48.367Z","avatar_url":"https://github.com/ppeeou.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FE- Study\n\n## codepen , template etc..\n\nlink : https://codepen.io\n\n- animation \nur: http://anicollection.github.io/#/\n\n## Web 개발\n\n00. MEDIA Query \n    - 0~ 480px Phone\n    - 480 ~ 768px tablet\n    - 768 ~ 1024px tablet 가로\n01. font는 15 ~ 25px 로 작성 / head line font 32 , 60 px\n02. 글자간 간격은 150% 이 적합 / 한줄에 글자수는 78글자가 적합\n03. font url \n    - google : https://fonts.google.com/ \n    - free download : http://www.fontsquirrel.com/\n\n04. color\n    - material https://material.io/tools/color/#!/?view.left=0\u0026view.right=0\u0026primary.color=F44336\n    - Cool Flat UI colors: http://flatuicolors.com/\n    - Even more cool colors: http://getuicolors.com/\n    - Find varia.ons of colors (very good) : http://www.0to255.com/\n\n    - Adobe Color CC, play around with colors: http://color.adobe.com/create/color-wheel/    \n    - PaleTon, play around with colors: http://paleTon.com\n    - Beau.ful gradients for webdesign: http://uigradients.com/\n    - Learn about colors:\n    http://www.rocket-design.fr/color-template/\n    - Learn even more about colors:\nhttp://webdesign.tutsplus.com/ar.cles/an-introduc.on-to-color-theory-for-web-designers--webdesign-1437\n\n05. Image\n    - Random Image\n    https://unsplash.it/200/300\n    - Basically all free images in one place:\n    http://thestocks.im/\n    - Images from many sources:\n    http://www.pexels.com/\n    - Unsplash, a must see:\n    http://unsplash.com/\n    - Food images:\n    http://foodiesfeed.com/\n    - A curated collec.on of free resources:\n    http://www.imcreator.com/free\n    - Huge paTern library:\n    http://thepaTernlibrary.com/         \n    - Subtle paTerns:\n    http://subtlepaTerns.com/\n    - Free videos:\n    http://mazwai.com/\n    - Techniques for working with images in CSS:\n    http://css-tricks.com/design-considera.ons-text-images/\n    - People face\n    https://uifaces.com/\n\n06. ICON\n    - Beau.ful icon font:\n    http://ionicons.com/\n    - Another beau.ful icon set:\n    http://entypo.com/\n    - Font awesome icons:\n    http://fontawesome.io/icons/\n    - Big collec.on of SVG fonts:\n    http://iconmonstr.com/\n    - Yet another icon font:\n    http://icon-works.com/\n\n07. 영감 얻는 곳\n    - Find beau.ful websites:\n    http://www.siteinspire.com/\n    - Dribble, show and tell for designers:\n    http://dribbble.com/\n    - Behance:\n    http://www.behance.net/\n    - Inspira.on for one-page websites:\n    http://onepagelove.com/\n    - Even more webdesign inspira.on:\n    http://www.admiretheweb.com/\n    - Flat design inspira.on:\n    http://flatdsgn.com/\n    - Collec.on of specific design elements and paTerns:\n    http://paTerntap.com/\n    - Another collec.on of design elements:\n    http://calltoidea.com/\n    - Google fonts inspira.on:\n    http://femmebot.github.io/google-type/      \n    - Some amazing designers on Dribble:\n        - http://dribbble.com/victorerixon\n        - http://dribbble.com/benske \n        - http://dribbble.com/peterfinlan \n        - http://dribbble.com/Radium\n\n08. Resource\n    - Huge list of front-end development resources:\n    http://github.com/dypsilon/frontend-dev-bookmarks\n    - Curated resources for everything crea.ve:\n    http://oozled.com/\n\n09. 구조\n    - HTML special characters\n    http://css-tricks.com/snippets/html/glyphs/\n\n10. css selector about\n    - Complete CSS reference (this is really good):\n    http://tympanus.net/codrops/css_reference/\n    - Important CSS selectors:\n    http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048\n    - Cool things you can do with Google Chrome Developer Tools:\n    http://www.labnol.org/sokware/chrome-dev-tools-tutorial/28131/\n\n11. web 제작 순서\n    - Periodic table of web design process:\n    http://www.newdesigngroup.ca/blog/web-design-process-infographic/\n\n12. web 제작시 필요한 도구\n* simple and easy-to-use fluid grid:\n    - http://www.responsivegridsystem.com/\n* animate\n    - http://daneden.github.io/animate.css/ \n* Maplace.js, google maps plugin:\n    - http://maplacejs.com/\n* OnePageScroll\n    - http://www.thepetedesign.com/demos/onepage_scroll_demo.html\n* Favicon Generator. For real. \n    - http://realfavicongenerator.net/\n* Compress images:\n    - http://op.mizilla.com/\n* Normalize.css\n    - http://necolas.github.io/normalize.css/\n* jsdelivr (css IE 8,9,10 )\n    - http://www.jsdelivr.com\n* caniuse (브라우저 기능 지원 확인)\n    - http://caniuse.com\n* Tooltipster\n    - http://iamceege.github.io/tooltipster/#demos\n* Webappers, huge list of plugins:\n    - http://www.webappers.com/category/components/tool.ps/\n* jQuery Rain, another huge list of plugins:\n    - http://www.jqueryrain.com/\n* Magnific popup:\n    - http://dimsemenov.com/plugins/magnific-popup/\n        \n\n### CSS PREFIXES\n```\nAndroid : -webkit-\nChrome : -webkit-\nFirefox : -moz\nInternet Explorer : -ms-\nIOS : -webkit-\nOpera : -o-\nSafari : -webkit-\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fppeeou%2Ffe-study","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fppeeou%2Ffe-study","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fppeeou%2Ffe-study/lists"}