어쨌든 해내는 코딩 일기

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

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

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 입력한 결과

-JSX 정의자바스크립트 문법 확장한 것javascript+ xml/ html -JSX 코드const element = hello, world!;대입연산자(=)는 오른쪽에 있는 변수를 왼쪽에 대입. 왼쪽코드는 javascript 코드, 오른쪽 코드는 html 코드 - React.createElement 함수: JSX코드를 JavaScript 코드로 변환함.- jsx는 html의 ,을 사용하고 있음. -createElement의 파라미터 -type(유형)-[props](속성)-[...childerem](엘리먼트가 포함하고 있는 자식 엘리먼트)  즉, react에서 jsx를 쓰는 것이 필수는 아님! createElement함수를 사용하면 되기 때문임.하지만 jsx 사용하면 코드 간결+ 생산성,가독성 높아짐...

- 기존 웹사이트에 react 적용link는 html과 외부 리소스 링크를 연결해주는 역할 -ex. css나 웹브라우저의 아이콘 같은 것을 불러옴.href는 경로 css 오류 해결방법html과 css 파일은 동일한 디렉터리(같은 폴더) 안에 있어야 함! react 사용. dom container! virtual dom과 빠른 렌더링이 장점인 리액트.id="root"는 버츄얼 돔의 시작점자바스크립트 두 번 불러오기. mybutton 이라는 react component 만들어야함마지막 두 줄의 코드는 리액트 돔에 랜덤함수를 사용해서 리액트 컴포넌트를 돔컨테이너 안에 랜더링 하는 코드필요한 이유: 스크립트 태그를 사용해서 컴포넌트를 가져왔다고 해도 컴포넌트가 화면에 보이지 않기 때문-> 직접 누르면 state..