mbti 사이트 만들기 강의 후기(인프런 판다코딩)

좌 모바일버전 / 우 pc버전

 

우선 인프런 - 판다코딩 수업을 참고했고 첫 화면에 접속하면 이렇게 조회가 됨

맨 위에 게이지는 그라데이션도 주고 질문이 12개라 100%에서 12등분하여 단계별로 게이지가 차도록 세팅해주었고

질문같은 경우에도 알고리즘을 적용하여 결과값이 출력되도록 설정했다

좌 모바일버전 / 우 pc버전

결과값은 처음 설정한것처럼 십이간지 유형별로 결과값이 나옴

콘솔창보면 0부터 11까지 질문에 대한 대답을 배열로 받음

css는 결과페이지, 메인페이지, 화면 넘어갈때 fade in, fade out 주고 카카오톡 공유하기에서 hover를 주는 기능을 사용

img는 말그대로 사진들이고

js

◆ 참고했었던 사이트들

https://fonts.google.com/?subset=korean&noto.script=Kore

Browse Fonts - Google Fonts

폰트 > 무료폰트 중 상업적 이용이 가능한지 등등 여부를 확인하고 다운로드 하면 됨

https://www.colorzilla.com/gradient-editor/

Ultimate CSS Gradient Generator from ColorZilla

게이지 그라데이션 줄때 썼었던 colorzilla

https://icon-icons.com/icon/heart-like-love/113760

Heart like love - Social media & Logos Icons

이렇게 로고를 대신 보여줄수 있도록 설정 가능! ICO 버전으로 다운로드 받으면 된다

https://developers.kakao.com/console/app

카카오계정

카카오톡으로 공유하기 API를 썼을때 이용

이렇게 해서 HTML, CSS, javascript를 통해 mbti 만들기 완성!

https://www.netlify.com/

Scale & Ship Faster with a Composable Web Architecture | Netlify

사이트 배포할때 썼었던 netlify

십이간지 연애유형 (mellifluous-dodol-88ef2c.netlify.app)

십이간지 연애유형

이건 내가 만들은 사이트!

카카오 개발자에서 hostName을 변경할수 있는데 그냥 ..

 

중간중간 오류도 나고 그래서 수정하느라 시간이 좀 소요됐는데 생각보다 많이 안걸림

요새 mbti가 엄청 유행하는데 보통 mbti 사이트 들어가면 유형도 비슷하고 광고도 엄청 많은데 이용자가 많은걸 보니 돈벌이가 될거같다는 생각이 들었다

회고 끝!