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
Color Tool - Material Design
Create and share color palettes for your UI, and measure the accessibility of any color combination.
material.io
*Font LInk
https://fonts.google.com/?sidebar.open&selection.family=Noto+Sans+KR:wght@300#standard-styles
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
font를 고르고 embed에서 link 복사해서 html에 넣으면 된다.
*무료 Icon Link
https://fontawesome.com/icons?d=gallery
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
HTML에 사용하려면 <script ~~ >를 넣어줘야 한다.
다운받아서 svn 파일을 열고 fill에 원하는 색상을 넣어서 바꾼다음(HEX코드) 다시 svn으로 변환시켜서 사용할 수 있다.
* 직접 제작 Icon, Background link (logo, ppt,...)
png로 받아서 (흰 배경임)
White background remover (remove.bg)
이미지에서 배경 제거 – remove.bg
이미지 배경 제거: 클릭 한 번 없이, 5초만에, 100% 자동, 무료.
www.remove.bg
HTML 디버깅
The W3C Markup Validation Service
Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.
validator.w3.org
'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 |
