HeYStRanGeR
article thumbnail

(2020.11.02)

 

 

HTML, CSS, java script의 기본적인 지식들을 가지고 vue.js 공부를 해보려고 한다!!

그런데 vue 설치부터 막혀서 지금까지 배운 것들을 이용해서 나만의 웹의 토대를 만들어 보았다.

요즘 핸드폰 어플리케이션을 보니까 계좌랑 카드에 연결해서 알아서 가계부를 써주는 게 있었다.

거기에서 영감을 받아서 나는 자발적으로 작성하고 생각하는 소비 관리 WEB을 만들기로 결심했다.

웹의 공식적인 명칭은 아직 생각하지 못했고 일단은 소비 관리 WEB으로 부르기로 했다.

 

 


https://opentutorials.org/course/3084

 

WEB1 - HTML & Internet - 생활코딩

--- 우리는 지금부터 코딩 웹 인터넷 컴퓨터라는 거대한 주제에 대한 탐험을 시작할 거예요. 이 여행을 시작하기에 앞서서 한가지 준비가 필요한데요. 바로 우리들의 상상력입니다. 지금부터 여

opentutorials.org

내가 지금까지 공부했던 사이트이다.

기본적인 지식을 얻는데에 큰 도움이 되었다.

이 사이트만 보고도 간단한 웹을 만들 수 있다!!

나는 atom을 이용해서 웹을 만들었다.

내가 만든 웹의 메인 화면이다

메인화면->Login 클릭

 

메인화면에서 로그인 버튼을 누르면 위와 같은 화면이 나온다.

아이디와 비밀번호를 누르면 로그인되는 웹을 만들어야 하는데 아직 만드는 법을 몰라 디자인만 했다.

홈화면으로 돌아가기 버튼을 누르면 메인화면으로 돌아가진다.

 

메인화면->Join 클릭

 

메인화면에서 Join을 누르면 위와 같은 화면이 나온다.

회원가입 창인데 입력했을 때 정보를 저장할 수 있는 방법을 몰라서... 이것도 디자인만 해놨다.

이것도 마찬가지로 홈화면으로 돌아가기 버튼을 누르면 메인화면으로 돌아가진다.

메인화면->  MyMYWeb 클릭

 

메인화면에서 MyMyWeb을 누르면 마이페이지같은 느낌으로 들어올 수 있도록 해놓았다.

로그인하지 않은 사람은 못들어오는 방식인데 이것도 아직 구현할 줄 몰라서 디자인만 해놓았다.

나의 소비 관리 WEB에는 자기가 언제 얼만큼 썼는지를 입력하면 달력에 표시되는 시스템인데 이것도 아직 구현할 줄 몰라서 페이지만 만들어 놓았다.

대신 새로운 아이디어가 떠올랐는데 생활코딩사이트에서 자바스트립트 배울 때 event를 이용한다.

심각, 보통, 안전 이라는 버튼을 만들어서 자기가 자발적으로 자신의 소비생활을 점검하는 느낌이다.

심각버튼 클릭

 

 

 

 

보통버튼 클릭

 

 

 

 

안전버튼 클릭

 

 

이런식으로 스스로에게 건강한 소비생활을 하도록 하는 그런 버튼이다...

intro.html

 

login.html

 

join.html

 

MyMyWeb.html

 

728x90
profile

HeYStRanGeR

@HeYStRanGeR

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!