수익형 웹4 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월 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 다음
