cd-record 님의 블로그

장바구니(리뷰) 오늘의 할일(리뷰) 배열 - new Array(): 새로운 배열 객체를 생성하는 생성자 함수 *주의: 인자가 숫자 하나일 때숫자 하나만 넣으면 그 숫자만큼의 '길이(length)'를 가진 빈 배열을 만듭니다. 요소는 채워져 있지 않은 '비어 있는' 상태입니다.const arr = new Array(5);console.log(arr.length); // 5console.log(arr); // [empty × 5] (비어 있음) - Array.from(): 이름 그대로 **"~로부터 배열을 만든다"**는 뜻 기본 구조Array.from(대상, [맵핑함수]) 주요 사용 사례 유사 배열(NodeList)을 배열로 바꾸기document.querySelectorAll()로 가져온 요소..

이름 나이 표 만들기(리뷰) 장바구니 만들기(리뷰) .reduce(): 여러 개의 값이 담긴 배열을 **"하나의 값으로 응축(reduce)"**할 때 사용(누산기)기본 문법array.reduce((accumulator, currentValue, currentIndex, array) => { return nextAccumulator;}, initialValue); accumulator (누산기): 콜백의 반환값을 누적합니다. 마지막에는 최종 결과값이 됩니다.currentValue: 현재 처리 중인 배열 요소입니다.initialValue (선택 사항): accumulator의 초기값입니다. (안 쓰면 배열의 첫 번째 요소가 초기값이 됩니다.)- 예시const cart = [ { item: "노트북",..

계산기 만들기 리뷰 document.createElement(""); - 자바스크립트에서 새로운 HTML 요소를 메모리상에 생성하는 메서드 - 형식: const element = document.createElement(tagName);tagName: 생성할 요소의 태그 이름(예: 'div', 'p', 'button', 'span')을 문자열로 전달합니다.* inner.HTML과의 차이점 보안: 사용자의 입력을 그대로 HTML에 넣을 때 발생하는 XSS(교차 사이트 스크립팅) 공격을 방지하기 훨씬 안전합니다.성능 및 제어: 생성된 요소가 즉시 자바스크립트 객체가 되므로, 추가적인 querySelector 없이 바로 이벤트 리스너(addEventListener)를 달거나 속성을 수정할 수 있..

구구단 만들기 계산기 DOM 선택자 자바스크립트라는 '손'이 HTML이라는 '물건'을 집기 위해 사용하는 **'집게'**와 같다. 메소드특징반환 형태document.getElementById("id")특정 ID를 가진 요소를 단 하나만 찾습니다.단일 요소document.getElementsByClassName("class")해당 클래스를 가진 모든 요소를 찾습니다.HTML 컬렉션(유사 배열)document.getElementsByTagName("tag")특정 태그(예: div, li)를 모두 찾습니다.HTML 컬렉션(유사 배열)document.querySelector("selector")CSS 선택자 문법으로 가장 먼저 매칭되는 하나만 찾습니다.단일 요소document.querySelectorAll..

JavaScript - document.getElementById("cartItem").value: 그 요소가 가진 value라는 속성(Attribute)의 값만 쏙 뽑아오는 것 *유사 함수 비교 - parseInt(): 자바스크립트의 전역함수로, 문자열을 정수로 변환(형변환) *유사 함수 비교parseInt("10"); // 10parseInt("10.99"); // 10 (소수점 버림)parseInt(" 10 "); // 10 (공백 무시)parseInt("10px"); // 10 (문자 앞까지만 해석)parseInt("f2", 16); // 242 (16진수로 해석)​ 예시const score = parseInt(document.getEl..

자바스크립트(java script) 자바스크립트(JavaScript)는 객체(object)기반의 스크립트 언어HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인(레이아웃 구성)하며, 자바스크립트로는 웹의 동작을 구현 JavaScript 코드는 HTML에서 태그 안에 작성JavaScript 코드는 , 태그 안에 작성할 수 있다. * 태그 안에 작성될 경우동작: HTML 본문()을 읽기 전에 자바스크립트를 먼저 불러오고 실행용도: 설정 파일, 디자인 관련 라이브러리 등 화면이 보이기 전에 준비되어야 하는 코드들* 태그 안에 작성될 경우동작: 화면에 보일 HTML 요소들을 모두 다 그려낸 다음에 자바스크립트를 실행용도: 일반적인 기능 구현, 버튼 클릭 이벤트 등 대부분의 스크립트 1. JavaSc..

HTML, CSS 정리 -기본적인 문서 구조DOCTYPE html>html lang="en">head>head>body>body>html> -태그~제목태그 텍스트 서식을 그대로 표현(고정폭)-빈 태그줄 바꿈 태그수평선 태그 -서식 태그, , , , , , , , -인용구, -엔티티 -인라인스타일p style="color: blue; background-color: lightgray; font-size: 20px; font-weight: bold; font-family: 궁서; text-align: center;">1point: 1.3px, 1em: 부모요소 폰트사이즈 기준(1배)으로 하는 상대적 단위색상 표현법: 색상이름, 16진수코드, RGB값p style="background-image: url..

HTML-스타일(style) style: 인라인(요소 내부)으로 CSS를 적용하는 방법 문법: style="속성: 값; 속성: 값; ..." 장점: 빠른 적용, 특정 요소만 커스터마이즈 가능 1) 배경색 = background-color 2) 글자색: color 3) 안쪽 여백: padding 4) 글자 크기와 정렬: font-size = 글자 크기 지정하는 속성(px, rem등 단위 사용) text-align = 텍스트의 수평 정렬 방식을 지정하는 속성 주 정렬 값: left, center, right, justify(양쪽 정렬) 5) 테두리: border(만약 한 방향만 ..

부트캠프를 하게 된 계기 학창시절에 공부해서 원하는 대학을 가고 싶었지만 가지 못해서 대학에 대한 아쉬움이 남았었다.하지만 수능공포증(?)으로 인해 재수는 하고 싶지 않았고 그 1년이라는 시간을 낭비하고 싶지도 않았지만 대학이라는 아쉬움을 버리지 못해 편입이라는 길을 선택하게되었다. 그래서 대학을 갔어도 처음에는 편입이라는 목표가 확고했기 때문에 대학수업은 학점만 채우자는 생각으로 학교수업과 학교생활을 하지 않은 채 2년이라는 시간을 보냈다. 편입이라는 목표를 두고 마음을 다잡지 못하고 편입공부를 제대로 하지 않아 2년이라는 시간동안 학교공부, 편입공부 다 놓친 아무것도 안 한 사람이 되었다. 그 상태로 군대를 갔는데 전문특기병인 정보보호병 나름 연관이 있는 곳으로 가게 되었다.그곳에서 근무를 하면서 느..

HTML 본격적으로 수업이 시작되었다. 첫 수업은 HTML수업이다.- 환경 설치vscode 설치확장자 html 파일 만들기확장 프로그램 들어가서 live server 설치(내장 웹 서버 설치, 정식 서버로는 쓸 수 없음)(로컬 호스트 IP (도메인) 127.0.0.1로 지정)(5500 → 포트번호, 쉽게 말해 문 , 중복 X)(/001.html → 파일경로)(*http 프로토콜 포트번호 → 80, https 프로토콜 포트번호 → 443) - 개요 HTML(Hyper Text Markup Language) 웹페이지는 HTML 문서이며, 웹 브라우저가 이를 해석하여 화면에 렌더링(표현)합니다. 태그(Tag)와 속성(Attribute)을 사용하여 웹 문서의 구조와 의미를 명확하게 표현합니다. - HT..