어쨌든 해내는 코딩 일기

2. bootstrap > 'cards' 검색 > Image caps밑에 있는 코드 복사해서 html body에 붙여넣기 image caps는 위, 아래로 생성3.  옆으로 생성되는 것이 필요하므로 card groups 밑의 코드 다시 복사 붙여넣기 4. grid cards를 통해서 카드 삽입

카카오톡 공유버튼 만들기 0. kakao developers 사이트에 접속한다https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com1. 상단 바의 내 애플리케이션 클릭 -> 애플리케이션 추가하기2. 앱 이름, 회사명, 카테고리 입력3.상단 바의 문서 ->  메시지 4.메세지- 이해하기 - 카카오톡 공유 -javascript 클릭5. 직접 만든 버튼 사용 아래에 있는 예시 코드를 복사한 후 share.js라는 파일에 붙여넣기 한다.6. 시작하기> javascript> 데모> JS SDK 데모 클릭7. sc..

Meta 태그 수정(추가):viepoint, author, keywords, description 을 meta name으로 지정 favicon이란?:웹페이지 이름 옆에 뜨는 조그마한 이모티콘 favicon 만드는 법1. https://icon-icons.com/  Free Icons PNG, ICO, ICNS and SVGMingCute building - filledicon-icons.com2. 찾고 싶은 이미지 검색하기3. ico 확장자로 다운로드4. 폴더에 넣어주기 -> vs code에서 자동으로 업데이트 됨.  5. html에 코드 입력해주기.참고) 두 번째줄은 apple 사용자를 위해서 추가한 것만든 웹사이트 배포하는 방법 1. http..

사용자가 버튼을 눌러 생긴 데이터 값이 어떻게 뜨는지 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 = "..

테두리 둥글게 하는 법- border-radius#main{ background-color: whitesmoke; width: 80%; text-align: center; /* main의 테두리를 둥글게 */ border-radius: 20px;} 줄, 간격 조정메인이 딱 달라붙어있는 것을 떼고 조금 띄우도록 mt-5(margin top)글자는 위를 띄우려면 pt-5 (padding top)버튼 아래를 조금 띄우도록 pb-5(padding bottom) by. bootstrap  * 다른 방법으로 표현하기(py, px)- pt, pd 는 합쳐서 py-5로 나타낼 수 있음- 가로는 px-3으로 임의입력 웹사이트에서 terminal 확인하는 방법 - 마우스 오른..