어쨌든 해내는 코딩 일기

사용자가 버튼을 눌러 생긴 데이터 값이 어떻게 뜨는지 console.log로 확인const endPoint =12;// 결과값const result=document.querySelector("#result");// 사용자 입력값에 대한 배열const select = [];   setTimeout(() => { // 사용자 입력이 몇 번째인지 인덱스로 넣어주고 // idx로 받아주기 -> 몇 번째 질문에서 몇 번째 답변 눌렀는지 select[qIdx] = idx; for(let i=0; iselect[qIdx] = idx;가 몇 번째 질문에서 몇 번째 답변 눌렀는지 알려줄 것임.function goresult(){..

진행상태창 만들기1. HTML) qna section 안에 div.status로 status 클래스 만들고, 그 안에div.statusbar로 statusbar 클래스를 만들다  2. Javascript) const endPoint를 정의해준다나는 질문이 12개였음. // statusbar 위한 엔드포인트 정의const endPoint =12;3. 이어서 goNext 함수 안에 var status를 .statusbar를 가져오는 것으로 정의하고status의 스타일 너비는 (100/ endPoint) * (qIdx+1) 씩 하고 퍼센테이지로 한다 function goNext(qIdx){ ..

.qbox와 .answerlist에도 넘어갈 때 fadein, fadeout 애니메이션 효과 주는 방법 animation.css@keyframes fadeIn { from { opacity:0; } to { opacity:1; }}@keyframes fadeOut { from { opacity:1; } to { opacity:0; }}/* 크롬은 webkit */@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; }}@-webkit-keyframes fadeOut { from { opacity:1; } to { opacity:0; }}/* fadeIn이라는 클래스를 가지면 */.fadeIn{ a..

classlist.add 사용하는 이유, 방법사용자가 누를 수 있는 answer들은 class나 id 값이 없어서queryselector가 불가능하므로 js 안에서 클래스 만들어준다.밑에서 세 번째 줄 ★ : answer.classlist.add('answerlist');function addAnswer(answerText){ var a = document.querySelector('.answerbox'); var answer = document.createElement('button'); // answer는 클래스나 id값이 없어서 querySelector이용 불가하므로 클래스 만들어주기 answer.classList.add('answerlist'); a.appendChil..

작업관리자 열기(코드 구조 확인): Ctrl+Shift+I  qnalist 코드를 작업관리자 console에서 열어보면 구조가 나옴.Key와 Value로 이루어져 있고q라는 key에 질문(q)가 있고a라는 key에 배열 3개(array(3))이 있고 -> a는 answer와 와 type이라는 value로 이루어져있다.  type이 4개가 있어서 사용자가 누르는 값에 따라 cow, tiger, dragon, chick의 결과를 띄워줌****object형식의 자료는 .으로 자료를 찾을 수 있음.innerHTML 정의:Element 속성(property) innerHTML 은 요소(element) 내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정한다. innerHTML 사용하는 방법이미 우리는 다량..

script 심어주기(java script를 html에 import하는 방법)- 자바스크립트를 html에 import 할 때에는 body태그 또는 head태그에 해도 되지만통상적으로 body태그 끝나는 지점에 하는 것을 추천 ex.  const 변수를 상수로 선언(한 개만) / verqueryselector는 문서에서 css선택자에 대응하는 것을 선택해준다.// main변수= 문서 내 #main을 찾아서 가지고 와라const main= document.querySelector("#main");const qna= document.querySelector("#qna");function begin(){ main.style.display = "none"; qna.style.display = "..

HTML: Hyper text markup language -markup: 문서나 데이터를 처리하기 위해 문서에 추가되는 정보-즉, 웹사이트의 뼈대를 구성하기 위해 사용하는 마크업 언어-Tag(태그): 구조형성, 태그는 열었으면 꼭 닫아줘야 함.  ex) , or 은 열고 닫는 것 한 번1)head tag :제목 같은 속성이 들어감. ex) title2)body tag: 실제로 웹사이트에서 보이는 콘텐츠가 들어감.SPA: Single page application-하나의 페이지로 웹사이트 표현 ( content 부분을 react로 구현 ) CSS: cascading style sheets-웹사이트의 색상, 글꼴 등 디자인 입히기 JavaScript(ECMAScript,ES6기준으로 설명)- 사용자 입력..