어쨌든 해내는 코딩 일기

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..

진행상태창 만들기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..

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 = "..

css 파일에서 width :80% 입력하면 왼쪽부터 80임. #main{ background-color: whitesmoke; width: 80%;}  bootstrap에서 margin 검색m은 margin이고 x로 left and right 조절, auto로중앙으로 -> main에 클래스 만들기맨 마지막 줄 main 옆에 class="mx-auto" 입력 bootstrap에서 image검색fluid가 붙으면 이미지를 감싸고 있는 div 태그의 크기를 따라감.container는 12등분이고, img 위에 div.col-6을 입력해서 div태그로 img 감싼다.항상 img는 6/12가 되도록 fluid 할 것임.지금까지 결과알게된 점: class 만들고 싶으면  div.이름..

https://getbootstrap.com/ BootstrapPowerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.getbootstrap.com 부트 스트랩 사용 이유: 모바일, pc 모두 적용되는 반응형 웹사이트 제작 위해 1)read the docs 클릭2)css 부분을 긁어서 head에 넣어주기이런식으로 이미 짜여진 코드를 자유자재로 이용할 수 있어서 시간을 아낄 수 있음! 3) button을 입력한 다음 ..

최종본   https://twelvelovetype.netlify.app/ 십이간지 연애유형십이간지로 알아보는 연애유형twelvelovetype.netlify.app소스 모음https://github.com/nani6765/MyMBTI GitHub - nani6765/MyMBTIContribute to nani6765/MyMBTI development by creating an account on GitHub.github.com 필요한 method 및 함수 (HTML, CSS, JavaScript)페이지 레이아웃; 한 페이지 코드에 main, qna, result 다 들어가있어야 함.

vs code에서 html 여는 방법1) extension에 가서 open in browser을 install 한다2).html 파일을 오른쪽 버튼으로 누르고 open in default browser을 클릭한다. (alt+b)  vs code에서 html  기본 세팅, 자동완성 하는 방법! + enter 또는 html:5 입력  section id 쉽게 입력하는 방법  section#이름   - section#main -section#qna-section#result 입력한 결과