프로젝트/수익형 Mbti 테스트 만들기10 심심해? 이시국 MBTI 유형별 추천 마스크 한 번 시도해봐🥰 혹시 거기 당신!! 😭요즘같은 코시국 집안에서 뒹굴뒹굴 거리는데 재밌는 게 없어서 울상이신가요? 😭 🤔나의 숨겨진 매력을 알리고 싶은데 떠오르는 방법이 없어 고민중이신가요? 🤔 그런 당신을 위해 준비했습니다!!! 💖이시국 MBTI 추천 마스크 테스트💖 오랜 코로나로 늘 마스크를 쓰고 다니는데 익숙해져버린 당신! 그런 당신께 추천합니다! 마스크로도 나만의 개성을 나타낼 수 있다? 간단한 질문들에 답하고 나의 성향이 어떤지 우선 파악해보세요! 알고 계셨나요? 🤗 마스크는 가면과 같은 뜻으로 쓰인답니다 🤗 😞 너무 진지하게 받아들이지 말기 😞 혼자서 친구와 가족과 연인과 킬링타임용으로 즐겨보세요! 💯 핵꿀잼 보장 💯 👉 지금 바로 해보기 👈 2021. 12. 8. 2021년 12월 8일 - 이시국 MBTI 유형별 추천 마스크 프로젝트 후기 ☆ 프로젝트 소개 이 프로젝트에 대해 얘기하자면, 내가 코딩을 시작하기 전으로 거슬러 올라가야한다. 내가 코딩에 대한 지식이 거의 전무할때(사실 지금도 거의 아는 게 없다고 생각한다) 무작정 유튜브에서 재미있겠다싶어 따라하기로 마음 먹었었다. 그런데 웬걸? 비전공자도 누구나 할 수 있다는 말에 혹했지만, 사실 그 말은 반은 맞고 반은 틀린 것이었다. 강사는 크게 디테일한 설명을 붙이지 않았고, 그런 수준에서 단순히 따라만한다면 비전공자도 충분히 따라할 수 있는 수준이었다. 그러나 그건 어디까지나 단순히 따라했을 때의 이야기다. 단순히 강의를 보며 따라치면서도 나는 지금 눈앞에 펼쳐진 코드들이 외계어 처럼 보일 뿐이었다. 이대로 이해없이 단순히 따라하기만 하면 내걸 만드는 건 고사하고 완성된 작품은 골자라.. 2021. 12. 8. 2021년 12월 4일 ~ 5일 - MBTI 프로젝트 中 참고 사이트 (2) ◎ SNS 공유기능 - AddThis https://www.addthis.com/dashboard#gallery/pub/ra-61ab25a20efae5f2/get-the-code/pco/shin/widgetId/5fks Sign In - AddThis www.addthis.com ◎ Add Network - kakao addfit https://accounts.kakao.com/login/adfit?continue=https%3A%2F%2Fadfit.kakao.com%2Fj_spring_security_check 카카오계정 로그인 여기를 눌러 링크를 확인하세요. accounts.kakao.com ◎ 네이버에 내 사이트 검색해서 나오게하기 - 네이버 웹 마스터 도구 - robots.txt https://s.. 2021. 12. 5. 2021년 11월 27일 - MBTI 프로젝트 中 참고 사이트 (1) ◎ CSS - background image 꽉 차게 https://cowimming.tistory.com/107 [🙌 CSS] 배경이미지 화면에 맞게 꽉차게 지정하기 height: 100vh를 지정해주면 각각 컴퓨터 화면에 맞는 꽉 찬 사이즈로 자동으로 변경된다 body { height: 100vh; background-image: url('img/signup.jpeg'); background-repeat : no-repeat; background-size : c.. cowimming.tistory.com ◎ GIF 움직이는 이미지 CSS로 제어 https://marshall-ku.tistory.com/200 마우스를 올려 gif를 재생하기 gif의 프레임을 잘라서 멈춰있는 이미지를 만들 땐 ezgif.. 2021. 11. 30. 2021년 9월 5일 - 가면 무도회 MBTI 정리 (2) 1. 시작 페이지 무도회 분위기 - 어두운 배경 역동적인 시작 버튼 타이틀, 배경, 버튼 디자인 등 2. 주의사항 페이지 처음보는 공간 날 맞이하는 집사 (초대장 추가?) 집사 등장 : 자기 소개, 무도회 설명 컨셉 설명 : 어울리는 가면이 준비될 동안 대화 시작 - 입장하기 3. 문제 페이지 로딩바 컨셉에 맞게 이쁘게 문제 배경 꾸미기 선택 버튼 꾸미기 화면 중앙에 상황을 알리는 입력창 준비 1) 실례가 안된다면 선생님 성함을 여쭤볼 수 있겠습니까? E : 본명을 가르쳐준다. I : 처음보는 상대에게 이름을 가르쳐주기 불안하다. 적당히 가명을 둘러댄다. 2) 집사가 커피를 내어준다며 메뉴판을 내밀었는데 이상해보는 메뉴 둘이 전부였다. 하나를 꼭 시켜야한다면 무엇으로 부탁할까. E : 화끈하고 정렬적인 .. 2021. 9. 5. 2021년 9월 4일 - 수익형앱 Mbti 테스트 만들기 개괄(4) 3. MBTI TEST 제작 html 코드 작성 - UTF-8/LF로 작성 Bootstrap 이용해 간단한 버튼 배치 Java Script 이용해 버튼을 누르면 문제가 나오는 동적인 처리 - 페이지 넘기기 게이지 바 생성, 각 버튼 사이 간격 조절 문제 + 답에 대한 값 저장 문제 선택지에 따라 점수 배부 각 문제에 해당하는 내용 객체로 저장 문제 클릭시 다음 페이지로 이동 프로그래스 바 차오르게 만들기 : width % 조절 + for문으로 조금씩 차오르게 12문제 모두 생성 결과화면으로 넘어가기 : article 추가 이미지 더하기 - Border 적용 이미지 크기 조절 결과창 이미지, 텍스트 중앙으로 이동 : "class : text-center" mbti 로직 구현 결과값 이미지, 설명 등 저장 .. 2021. 9. 4. 2021년 8월 30일 - 가면 무도회 MBTI 정리 (1) ☆ MBTI MBTI가 성격을 대략적인 유형별로 나누었다는 것도, 심지어 내 MBTI 성향도 알고 있는데 정작 MBTI의 종류조차 잘 알지 못했다. 그리고 내가 만드려는 "가면 무도회" 컨셉에 있어 과연 각 성향에 맞는 결과가 어떤 것이 있을지 정리할 필요성을 느꼈다. 만드는 MBTI 테스트가 단순 재미용이라는 것을 감안하여, 표는 아래에 간단히 정리된 것을 참고했다. 이미지들은 상업적으로 사용해도 문제가 없는 이미지들을 사용하였다. ◎ ISTJ : 소금형 → 한번 시작한 일은 끝까지 해내는 성격 ★ 가면라이더 가면 ◎ ISFJ : 권력형 → 성실하고 온화며 협조를 잘하는 사람 ★ 깃털 º 무도회 가면 ◎ INFJ : 예언자형 → 사람에 관한 뛰어난 통찰력을 가진 사람 ★ 맨얼굴 ◎ INTJ : 과학자형.. 2021. 8. 30. 2021년 8월 28일 - 수익형앱 Mbti 테스트 만들기 개괄(3) 3. MBTI TEST 제작 html 코드 작성 - UTF-8/LF로 작성 Bootstrap 이용해 간단한 버튼 배치 Java Script 이용해 버튼을 누르면 문제가 나오는 동적인 처리 - 페이지 넘기기 게이지 바 생성, 각 버튼 사이 간격 조절 문제 + 답에 대한 값 저장 문제 선택지에 따라 점수 배부 각 문제에 해당하는 내용 객체로 저장 문제 클릭시 다음 페이지로 이동 프로그래스 바 차오르게 만들기 : width % 조절 + for문으로 조금씩 차오르게 12문제 모두 생성 결과화면으로 넘어가기 : article 추가 이미지 더하기 - Border 적용 이미지 크기 조절 결과창 이미지, 텍스트 중앙으로 이동 : "class : text-center" ※ calc(계산값%) - 계산 ☆ JQuery 문.. 2021. 8. 28. 2021년 8월 27일 - 수익형앱 Mbti 테스트 만들기 개괄(2) ※ 본 내용은 개인 기록용입니다. ※ 조코딩 님의 강의를 토대로 작성되었습니다. 3. MBTI TEST 제작 html 코드 작성 - UTF-8/LF로 작성 Bootstrap 이용해 간단한 버튼 배치 Java Script 이용해 버튼을 누르면 문제가 나오는 동적인 처리 - 페이지 넘기기 게이지 바 생성, 각 버튼 사이 간격 조절 문제 + 답에 대한 값 저장 문제 선택지에 따라 점수 배부 각 문제에 해당하는 내용 객체로 저장 문제 클릭시 다음 페이지로 이동 ☆ JS의 객체 var jsObject = {key : value} jsObject[key] → value var q = { 1: {"title" : "문제 1번", "type" : "EI", "A":"E", "B":"I"}, 2: {"title" : ".. 2021. 8. 27. 이전 1 2 다음
