본문 바로가기
반응형

HTML CSS 자바스크립트5

자바스크립트 객체와 DOM 이벤트로 구현한 온도 단위 변환기 ✅ 자바스크립트 DOM 객체 기반 학습 정리📌 1. DOM(Document Object Model) 요소 접근document.getElementById()document.querySelector()document.querySelectorAll()→ HTML 요소를 자바스크립트 객체로 참조해서 동작 제어 가능const txt1 = document.querySelector("input"); const lab1 = document.querySelector('[for=txt1]');📌 2. 객체 중심의 함수 설계 (선택 상태 변화 통합 처리)const selChange = (s1, s2, l1, l2, t1, t2) => { s2.value = (s1.value === "℃") ? "℉" : "℃";.. 2025. 5. 22.
자바스크립트 ES6로 배우는 배열과 함수 문법 ✅ 자바스크립트 (ES6 중심)📘 기본 문법 및 선언ES6 문법 사용화살표 함수 (=>)변수/상수 선언: let, const호이스팅 개념 이해📊 자료형 및 연산자료형 확인: typeof연산자 사용법문자열 리터럴: 백틱(``)을 활용한 템플릿 문자열문자열 속성 및 변환 함수📦 배열 관련 문법배열 순회: for, for...of, forEach(), entries(), map()배열 변형 및 정렬: map(), filter(), sort()배열 결합과 분해:결합: concat(), join()슬라이싱: slice(start, end)제거/삽입: splice(start, deleteCount, ...items)요소 찾기: indexOf(element, start)고급 문법:Trailing 쉼표전개 연산자.. 2025. 5. 21.
배열과 반복문 JS 회문 검사 배열 변형 🧪 회문(Palindrome) 체크 자바스크립트const check1 = (e) => { // e.preventDefault(); // 기본 동작 막기 let txt1 = document.getElementById("txt1").value; // 공백 제거 txt1 = txt1.replaceAll(" ", ''); // 문자열 뒤집기 let s = ''; for (let i = txt1.length - 1; i >= 0; i--) { s = s + txt1[i]; } // 비교 후 결과 출력 if (txt1 == s) { document.getElementById("txt2").value = "회문입니다."; } els.. 2025. 5. 21.
HTML CSS 선택자 Flexbox 웹폰트 웹아이콘 javascript 백틱 🧠 웹 개발 학습 정리✅ 기초 구성 요소구분설명 구분설명HTML웹 구조 담당. , 등 의미 없는 박스를 만드는 태그도 있음CSS디자인을 담당. 선택자 이해가 중요JavaScript (JS)동적인 기능 담당. 변수 let, 상수 const 중심React사용자 정의 태그(컴포넌트)로 UI를 구성. 직접 태그(컴포넌트)를 만들어 사용Node.js백엔드 프레임워크로 사용 가능 🎨 CSS 주요 개념1. 선택자(Syntax)css 선택자 { 속성: 값; } 선택자 종류예시태그 선택자div, p, a 등아이디 선택자#menu클래스 선택자.box부모 > 자식div > p조상 자손div p➡ 참고: CSS Selector Cheatsheet2. 초기화css* { margin: 0; padding: 0;} 3. .. 2025. 5. 21.
VSCode Git HTM CSS JS GitHub git ✅ 1. VSCode 학습 및 정리📌 1-1. 설치 및 준비VSCode 설치링크: https://code.visualstudio.com/docs/?dv=win64user설치파일: VSCodeUserSetup-x64-1.99.3.exe참고 사이트HTML 태그 문서:W3SchoolsMDN Web Docs📌 1-2. VSCode 확장 프로그램 (Extensions) 설치필수 설치 항목:Auto Rename Tag (자동 태그 닫기)Live Server (HTML 실시간 미리보기)📌 1-3. VSCode에서 HTML 실행하기index.html 파일에서 우클릭 → Open with Live Server실시간 웹 미리보기 가능📌 1-4. 작업 폴더 열기메뉴: File → Open Folder폴더 경로 예시:.. 2025. 5. 21.
반응형

티스토리툴바