1. Design requirements
만들려는 웹사이트의 Design 요구사항을 정해보자.
예)
하나의 페이지에 모든 내용이 들어가게 만들것이고 클릭을 최대한 안하게 만들것이다.
그리고 크게 00 내용을 넣을 것이다.
2. Plan for contents
위에 정의한 00 내용을 구체적으로 정리해본다.
예)
주요 스택
- 프론트엔드 (HTML, CSS, JS, react)
- 백엔드 (Node.js, Django)
- 모바일 앱 (Android)
- 머신러닝
- 데이터 (python)
3. Wireframing
https://www.youtube.com/watch?v=8-vTd7GRk-w
프로토타이핑 툴을 사용해도 되지만 간단하게 스케치를 통해 어떤구조로 어떤 기능을 만들고 사용할 건지 그려보자.
* 색상 Link
https://material.io/resources/color/#!/?view.left=0&view.right=0
*Font LInk
https://fonts.google.com/?sidebar.open&selection.family=Noto+Sans+KR:wght@300#standard-styles
font를 고르고 embed에서 link 복사해서 html에 넣으면 된다.
*무료 Icon Link
https://fontawesome.com/icons?d=gallery
HTML에 사용하려면 <script ~~ >를 넣어줘야 한다.
다운받아서 svn 파일을 열고 fill에 원하는 색상을 넣어서 바꾼다음(HEX코드) 다시 svn으로 변환시켜서 사용할 수 있다.
* 직접 제작 Icon, Background link (logo, ppt,...)
png로 받아서 (흰 배경임)
White background remover (remove.bg)
HTML 디버깅
'Web' 카테고리의 다른 글
SSE(Server-Sent-Event) 서비스에 적용하기 (0) | 2023.12.01 |
---|---|
Android target33으로 변경 및 Push Notification 권한 추가 (1) | 2023.12.01 |
쿠키 vs 세션 vs 캐시. 무엇이 다를까? (0) | 2021.07.15 |
HTML,CSS,JS : 정적인 Youtube mobile로 반응형 웹사이트 clone coding (0) | 2020.08.17 |
HTML CSS JS tip 정리 (0) | 2020.07.15 |