생산성 향상과 스킬 업/온라인 무료강좌 학습노트
-
웹사이트, 모바일 앱 디자인 무료 툴 5가지 | 사이드 프로젝트 꿀템생산성 향상과 스킬 업/온라인 무료강좌 학습노트 2022. 4. 6. 22:33
1. https://mycolor.space/ 색상 팔레트 - Color Space 2. https://cssgradient.io 그레디언트 - CSS Gradient > CSS 복사 가능 3. https://shapedivider.app 꼬불 꼬불 선나누기 - Shape Divider > html, CSS 복사 가능 4. https://haikei/app 다양한 SVG -Haikei > 디자인적인 버튼 사용 예 5. https://dribbble.com 이쁜 배경 이미지 - Cool Backgrounds 보너스 - Dribble 활용법 > Popular - 최신 트렌드 확인 > Goods for Sale : Filters에서 Price 0 선택 시 다양한 아이템 획득 가능 * 원본 출처 : https:..
-
똥손 개발자를 위한 간단한 디자인 스킬 14개생산성 향상과 스킬 업/온라인 무료강좌 학습노트 2022. 4. 2. 12:30
제목 보고 너무 찔려서 보게 된 ㅋㅋ 내용도, 영상 시간도, 심플하고 핵심만 간단해서 좋았다 그래서 금방 핵심정리! 1. 다양한 색 금지 - 강조하고자 하는 곳에만 강조하는 색 사용 > 예 : 버튼, 아이콘, 강조할 글자, 로고 2. 안쪽여백(Padding) 많이 3. 폰트는 제목용/본문용 2개만 4. 심심하면 글자에 gradient 5. 제목은 16px이상, 본문은 16px 이하 6. 자간간격 조절하면 이쁨 7. 이미지 폭, 높이 동시조절 금지 8. 안중요한 글씨는 회색 9. 테두리는 옅은 회색부터 10. 그래픽 애셋 사용 시 통일감이 우선 - 선 굵기, 색상, 그라디에이션 등 차이가 없도록 11. 급한 로고디자인은 fontsquirrel.com에서 가볍게 할 수 있으며, 라이선스 확인 후 사용할 것 ..
-
코딩애플 - React 기초 0/1/2강생산성 향상과 스킬 업/온라인 무료강좌 학습노트 2022. 1. 4. 16:25
node.js, visual studio code 최신 버전 설치 * React 기초 1강 TIL visual studio code에서 작업폴더 만들 때 node.js 설치된 드라이브에서 해야 npx 에러가 안뜸 생성한 작업트리의 동작 구조 * React 기초 2강 TIL 제대로 웹-앱 동작을 만들기 위해서는 state에 데이터를 저장해 사용해야 한다 ----------------------- 원본 출처 : 코딩애플 React 기초 0강 : 리액트왜 쓰는지 알려줌 (+ 수강시 필요 사전지식) https://www.youtube.com/watch?v=LclObYwGj90&list=PLfLgtT94nNq1e6tr4sm2eH6ZZC2jcqGOy React 기초 1강 : 리액트 설치와 셋팅법 (2021+ 스타일..
-
인프런 - 컴퓨터, 웹, 코딩, 프로그래밍의 시작 - Web1 #3생산성 향상과 스킬 업/온라인 무료강좌 학습노트 2021. 4. 20. 23:02
16. 원시웹 (primitive web, web 1.0) - 웹의 메소포타미아 17. 인터넷을 여는 열쇠 : 서버와 클라이언트 - 2대의 컴퓨터 > Web Browser > request index.html > Web Server (index.html) > reponse index.html - 웹서버를 이해하는 방법은 web hosting 서비스를 이용하거나 또는 자신의 컴퓨터에 web server를 설치하는 것이다 18. 웹서버 운영 (github를 이용한 호스팅) - github를 이용해 할 수 있는 일 > 소스코드 변경 내용을 보관하는 버전 관리 > 자신의 github 페이지를 이용해 만든 index.html 호스팅 (단, static web hosting임) 19. 웹서버 운영하기 - 웹서버 소..
-
인프런 - 컴퓨터, 웹, 코딩, 프로그래밍의 시작 - Web1 #2생산성 향상과 스킬 업/온라인 무료강좌 학습노트 2021. 4. 18. 16:39
8. 통계에 기반한 학습 - html 태그들은 약 150개 정도 되므로, 중요한 것들만 숙지하고 있고 나머지는 찾아서 쓰면 된다 9. 줄바꿈 : br vs p - 줄바꿈 검색 시 추천 검색어 : html new line tag, html paragraph tag > br : 줄바꿈이라는 의미만 있는 단점, 중복 사용 시 줄바꿈 간격을 넓힐 수 있는 장점 > p : 단락이라는 정보 제공의 장점, 줄바꿈의 간격이 이미 정해진 단점 → 단, CSS를 활용해 여백을 조절할 수 있다. 10. HTML이 중요한 이유 - 기초가 중요하다. 기초 그 자체로만도 중요하고, 응용을 위해 나아가기 위해서도 필요하다 1. 태그를 이용해 정보를 표현하고 활용할 수 있다 2. Accessibility : 개방성, 접근성 11. ..
-
인프런 - 컴퓨터, 웹, 코딩, 프로그래밍의 시작 - Web1 #1생산성 향상과 스킬 업/온라인 무료강좌 학습노트 2021. 4. 17. 13:57
1. 수업소개 나의 문제를 코딩으로 해결하려는 엔지니어의 자세로 공부하자 2. 프로젝트의 동기 직접 만들자 3. 기획 만들기 전에 무엇을 만들 것인가를 설계하는 과정 4. 코딩과 HTML - 필요한 사항 > 사람이 하는 일과 기계가 하는 일의 구분 > 원인과 결과의 추론 5. HTML 코딩과 실습환경 준비 여기서는 ATOM의 예를 들으나 자신에게 맞는 HTML Editor를 찾아 사용하는 것을 목표로 할 것 6. 기본문법 태그 - TAG는 설명이다 > 진하게 > 밑줄 7. 혁명적인 변화 - TAG를 배우고 난 후, 무엇을 모르는 지는 아는 상태가 되어, 검색할 수 있고 질문할 수 있게 되었다 > 검색 후에는 예제를 보고 무엇인지 예상한 상태에서 정의를 보고 확신하는 방법으로 이해하는 것이 좋음