심리테스트 만들기 (1) git page 만들기

얼마 전에 친구가 심리테스트를 해보라 했습니다.

하다 보니 심리테스트들이 다 똑같은 질문내용에 결과만 다른 것들 뿐이라는 생각이 들었습니다.

그래서 이 정도면 나도 만들 수 있지 않나? 싶어서 시작하게 됐습니다.

 

아직 주제는 못 정했는데, 우선 질문이랑 형태만 다 만들어놓고 아이디어는 나중에 입히기로 했습니다.

 

맨 처음 할 일은 페이지를 만드는 겁니다.

깃허브 블로그를 이용해 html로 페이지를 만들 수 있다고 해서 바로 하는 법을 알아봤습니다.

 

그냥 리포지토리를 유저명.github.io로 만들면 되더군요.

그리고 리포지토리에 index.html 을 만들어서 아무 내용이나 적었습니다. 왜냐면 처음엔 readme.md로 돼 있어서 html이 되는지 테스트해야 했습니다.

 

github.com/HappyFaceFriend/HappyFaceFriend.github.io

 

깃 허브 : github.com/HappyFaceFriend/HappyFaceFriend.github.io

변경된 깃 허브 : https://github.com/HappyFaceFriend/SuperpowerMBTI

그러면 리포지토리 이름 그대로 제 페이지가 생깁니다.

 

https://happyfacefriend.github.io/

여기에 대충 형태만 잡아봤습니다.

 

 

이거 하나 만드는 데에도 참 검색을 많이 했습니다.

우선 반응형 웹을 만드는 데에 @media라는 css코드가 쓰인다는 걸 알았습니다.

@media 관련 글 : nykim.work/84

그리고 어떤 요소 내부의 요소들을 정렬하는 display: flex 라는 것도 배웠습니다.

flex 관련 글 : codingbroker.tistory.com/60

 

다음번엔 시작부터 문제 3개 하고 마지막까지 이동하는 것까지 한번 만들어 보겠습니다.