개발 노트

https://www.namoham.com/zxcv/ 수학 퀴즈 www.namoham.com [ ] 한 자리 수 두자리수 버튼 만들고 둘 다 되게 만들기->o [ ] 정답 맞추면 빵빠레나 화려하게 이펙트주기->o [ ] 이미지 가져오기->o -> 처음부터 코드를 최적화해야지 나중에 코딩을 덧붙이거나 새로운 기능을 넣을때 더 효율적이라는것을 깨달았다.

내용 사칙연산 단순한 두자리 연산 - 연산자 a와 b 의 연산 후 결과 출력 문제와 답을 박스형식으로 만들고 예시로 [11]+[19]=[30] [확인] 확인 누르면 (맞았습니다. 틀렸습니다. 알려주기) 사칙연산 사이트 레퍼런스 - 일일수학 11math.com 누르면 맞았습니다. 틀렸습니다 https://www.11math.com/calc#72CE6769 입력한 시간 날짜 사칙연산 연습 숫자를 입력하세요 연산을 선택하세요 + - X / 값을 입력하세요 확인해보기 다시하기 정답확인 #wrap { width: 400px; margin: 50px auto; text-align: center; background-color: rgb(238, 214, 214); border-radius: 50px; display:..

* { font-size: 40px; } h1 { color: #ffffff; } body { background-color: #000000; } article { display: flex; flex-direction: column; } .center { text-align: center; } .calculator { width: 287px; border: 6px solid rgb(33, 182, 58); background-color: #ffffff; padding: 6px; display: inline-block; } .calculator form { display: grid; grid-template-columns: repeat(4, 65px); grid-auto-rows: 65px; grid-ga..

* { box-sizing: border-box; margin: 10px; justify-content: center; } body { font-family: "Open Sans", sans-serif; margin: 0; } button { cursor: pointer; padding: 10; } div { display: flex; flex-wrap: wrap; text-align: center; } input { border-radius: 10px; } form { display: flex; flex-wrap: wrap; text-align: center; } #testID { color: #4646b4; background: #aba8f4; padding: 20px; border-radius: 5..

Dom은 한마디로 무엇인가 -> html이나 xml문서를 실체로 나타내는 api dom을 알아보기 전에 웹브라우저는html문서를 해석하고 화면을 통해 해석된 결과를 보여준다. 해석한 html 코드를 화면을 통해 보여주는 과정을 렌더링이라고한다. 렌더링의 세부 과정 브라우저는 html코드를 해석해서 요소들을 트리형태로 구조화해 표현하는 문서(객체)를 생성한다. 이를 dom이라 하며, 브라우저는 dom을 통해 화면에 웹 콘텐츠들을 렌더링한다. dom의 존재 목적 dom은 자바스크립트를 사용해서 웹 콘텐츠를 추가, 수정, 삭제하거나 마우스 클릭, 키보드 타이핑 등 이벤트에 대한 처리를 정의할 수 있도록 제공되는 프로그래밍 인터페이스이다. -> 내용정리 Document(Document Object Model) ..

// 객체의 키와 값을 정적으로 생성한다 const pet = { name: "구름", age: 8, }; // 객체의 키와 값을 동적으로 생성한다 pet.color = "brown"; // 객체의 키와 값을 동적으로 제거한다! delete pet.color; // 출력 console.log(pet); const object = { ko: "빵", en: "bread", ja: "ㄹㄹ", fr: "pain", es: "pan", lang: { ko: "한국어", en: `영어`, ja: "일본어", fr: "프랑스어", es: "스페인어", }, print: function (lang) { console.log(`${this.ko}는 ${this.lang[lang]}로 ${this[lang]}입니다.`)..