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 문법

$(".progress-bar").attr('style','width: calc(100/12*'+num+'%)')

.progress-bar : class를 선택한다.

.attr('style','~~') : style 속성을 선택하고, 속성 내에서 ~~를 선택함

 

 

 

★ 무료 이미지 다운로드

상업적으로 이용이 가능한 무료 이미지 사이트

 

◎ https://www.pngwing.com/ko

PNGWing - 독점적 인 PNG 이미지

 

◎ https://pixabay.com/ko/

 

 

 

★ Border 적용

 

부트스트랩 - Border 검색

Border-radius 이미지에 적용

 

 

 

★ 이미지 크기 조절

 

#img { 
    width: 300px;
    height: 300px;
    margin: 0 auto;
}

 

class="text-center" mt-5

class="text-center" : 문자 가운데로
mt-5 : 위에서부터 공백