심리테스트6

• 

  웹 언어 코딩으로 심리 테스트 만들기 #5 선다형, 단답형 복합 구현 이번 시간은 기능을 대폭 강화해 보도록 할게요. 이전, 다음 버튼을 실제로 용도에 맞게 완성시키고 질문, 답변도 좀 더 다양하게 구성할 수 있도록 개선할 예정입니다. 웹 언어 코딩으로 심리 테스트 만들기 #4 데이터 입력 웹 언어 코딩으로 심리 테스트 만들기 #4 데이터 입력 기다리시는 분이 계셨을 지는 모르겠지만 ㅎㅎ 조금 늦어져서 죄송합니다. 이번에는 깊게 들어가면 복잡한 고급 스킬이지만 단순히 따라하기는 어렵지 않은 내용을 다루어 보겠습니다. 웹 언어 sangminem.tistory.com 목차 HTML 구성 변경 먼저 가장 기본이 되는 화면 구성부터 손 보겠습니다. test.html 파일에 변경된 부분이 좀 많습니다. {{intro}} {{title}} {{qna[currentIndex].q}} .. 코딩 강의/컨텐츠를 만들어 볼까요 2021. 2. 26.

• 

  웹 언어 코딩으로 심리 테스트 만들기 #4 데이터 입력 기다리시는 분이 계셨을 지는 모르겠지만 ㅎㅎ 조금 늦어져서 죄송합니다. 이번에는 깊게 들어가면 복잡한 고급 스킬이지만 단순히 따라하기는 어렵지 않은 내용을 다루어 보겠습니다. 웹 언어 코딩으로 심리 테스트 만들기 #3 화면 전환 기능 구현 웹 언어 코딩으로 심리 테스트 만들기 #3 화면 전환 기능 구현 이번에는 지난 시간에 만든 인트로, 메인, 결과 화면을 차례로 이동 시키는 코드 작성을 해보겠습니다. 웹 언어 코딩으로 심리 테스트 만들기 #2 인트로 및 결과 화면 작성 웹 언어 코딩으로 심리 sangminem.tistory.com 목차 VueJS 추가 개념 설명 이미 처음부터 VueJS 프레임워크를 사용하기 위한 구조를 잡아 놓은 상태인데요. 이번 시간에는 사용자가 무엇을 선택했는지에 따라 동작을 다르.. 코딩 강의/컨텐츠를 만들어 볼까요 2021. 2. 9.

• 

  웹 언어 코딩으로 심리 테스트 만들기 #3 화면 전환 기능 구현 이번에는 지난 시간에 만든 인트로, 메인, 결과 화면을 차례로 이동 시키는 코드 작성을 해보겠습니다. 웹 언어 코딩으로 심리 테스트 만들기 #2 인트로 및 결과 화면 작성 웹 언어 코딩으로 심리 테스트 만들기 #2 인트로 및 결과 화면 작성 지난 시간에 이어서 인트로 부분과 결과 부분을 작성해 보겠습니다. 인트로, 메인, 결과 전부 html 파일 하나에서 보여줄 예정입니다. 웹 언어 코딩으로 심리 테스트 만들기 #1 메인 화면 작성 웹 sangminem.tistory.com 목차 CSS 수정 먼저 기존에 정의했던 body 부분에 스타일을 좀 더 추가해 보겠습니다. body { margin: 0; overflow: hidden; /* 신규 추가 */ } overflow 속성에 hidden 값을 부여하여 화.. 코딩 강의/컨텐츠를 만들어 볼까요 2021. 1. 22.

• 

  웹 언어 코딩으로 심리 테스트 만들기 #2 인트로 및 결과 화면 작성 지난 시간에 이어서 인트로 부분과 결과 부분을 작성해 보겠습니다. 인트로, 메인, 결과 전부 html 파일 하나에서 보여줄 예정입니다. 웹 언어 코딩으로 심리 테스트 만들기 #1 메인 화면 작성 웹 언어 코딩으로 심리 테스트 만들기 #1 메인 화면 작성 기다리고 기다리던 심리 테스트 만들기 강좌를 시작하겠습니다. 웹 언어 코딩으로 심리 테스트 만들기 #0 소개 및 프리뷰 웹 언어 코딩으로 심리 테스트 만들기 #0 소개 및 프리뷰 심리 테스트를 sangminem.tistory.com 목차 인트로 화면 작성 test.html에 이어서 작성을 해 보겠습니다. 인트로 HTML 작성 테스트를 시작합니다 심리 테스트 시작 전에 도입 멘트를 표시하기 위한 부분입니다. 마찬가지로 클래스 이름을 미리 붙여서 지정해 놓았.. 코딩 강의/컨텐츠를 만들어 볼까요 2021. 1. 13.

• 

  웹 언어 코딩으로 심리 테스트 만들기 #1 메인 화면 작성 기다리고 기다리던 심리 테스트 만들기 강좌를 시작하겠습니다. 웹 언어 코딩으로 심리 테스트 만들기 #0 소개 및 프리뷰 웹 언어 코딩으로 심리 테스트 만들기 #0 소개 및 프리뷰 심리 테스트를 직접 코딩으로 만들어 보면 어떨까 하는 주변 사람의 의견이 있어서 한 번 도전해 보았습니다. 이번 포스팅은 간단한 프리뷰 정도로 생각해 주세요. 목차 컨셉 케릭터나 배경을 sangminem.tistory.com 오늘은 먼저 틀잡기부터 해볼게요. 목차 폴더 구조 먼저 단순하게 html, js, css 파일 하나씩 잡고 가 보겠습니다. 에디터는 원래 사용하던 것을 사용하시면 됩니다. 처음이시라면 Visual Studio Code를 추천합니다. HTML 구조 잡기 html, head, body의 기본 구조를 작성하고 m.. 코딩 강의/컨텐츠를 만들어 볼까요 2021. 1. 10.

• 

  웹 언어 코딩으로 심리 테스트 만들기 #0 소개 및 프리뷰 심리 테스트를 직접 코딩으로 만들어 보면 어떨까 하는 주변 사람의 의견이 있어서 한 번 도전해 보았습니다. 이번 포스팅은 간단한 프리뷰 정도로 생각해 주세요. 목차 컨셉 케릭터나 배경을 디자인 할 능력이 없으므로 최대한 심플한 컨셉으로 가보겠습니다. 필요 스킬 기본적인 웹 언어(HTML, CSS, JavaScript)와 자바스크립트 라이브러리(또는 프레임워크)인 jQuery, Vue 등을 사전에 알고 있으시면 더욱 수월하게 진행하실 수 있습니다. 완성 후 동작 화면 시작부터 심플 합니다. 인트로 부분도 심플 합니다. 테스트 질문, 답변 부분도 심플 합니다. 결과 화면 마저 심플 합니다. 모든 게 심플합니다. 데모(Demo) 아래 화면에서 시작하기를 누르면 실제로 동작합니다. 소리를 켜보세요. 인트로 부분.. 코딩 강의/컨텐츠를 만들어 볼까요 2021. 1. 9.