본문 바로가기

전체 글

(20)
CSS word-break로 줄 바꿈 제어하기 💬 CSS word-break - 줄 바꿈 제어하기 웹페이지에서 텍스트 줄 바꿈은 UI/UX에 큰 영향을 줍니다. 특히 한글, 일본어, 중국어처럼 단어 경계가 명확하지 않은 언어에서는 더욱 그렇죠. ✅ word-break란? word-break: normal | break-all | keep-all | break-word; 🧩 속성값 설명 속성값 설명 normal 기본값. 브라우저 기본 규칙 사용. 영어는 띄어쓰기 기준, 한중일은 글자 단위 줄 바꿈 허용. break-all 단어 중간이라도 줄 바꿈. 영어, 한글, 일본어 등 모두 강제 줄 바꿈. keep-all ..
부드러운 애니메이션 효과를 주는 transition ✨ CSS transition과 :hover 같이 쓰는 법 transition은 CSS에서 스타일 변화에 부드러운 애니메이션 효과를 주는 속성이에요. 보통 :hover와 함께 써서, 마우스를 올렸을 때 자연스럽게 바뀌도록 만들죠! 🧠 기본 개념 transition: 변화 줄 스타일 지정 background-color: 어떤 속성을 변화시킬지 0.3s: 변화에 걸리는 시간 (0.3초) ease: 부드러운 속도 곡선 (처음 느리게 → 점점 빨라짐 → 다시 느리게) ❌ transition 없는 경우 button { background-color: #d1bfa7;}button:hover { background-color: #b9a68e;} → 변화가..
일정 시간 뒤에 코드를 실행하는 setTimeout과 setInterval setTimeout과 setIntervalJavaScript에서는 일정 시간 뒤에 코드가 실행되거나, 일정 간격으로 반복 실행되도록 만들 수 있습니다. 그때 사용하는 대표적인 함수가 setTimeout과 setInterval입니다.📌 setTimeout – 일정 시간 후 한 번만 실행setTimeout(function, delay); function: 나중에 실행할 함수 delay: 대기 시간 (밀리초, 1000ms = 1초)✅ 예시console.log("시작");setTimeout(() => { console.log("3초 후 실행");}, 3000);console.log("끝");📤 출력:시작끝3초 후 실행setTimeout은 비동기적으로 동작하므로, 다음 줄의 코드가 먼저 실행됩니다.📌 ..
배열 메서드 forEach, map, fill, filter, reduce 📘 JavaScript 배열 메서드JavaScript에서는 배열을 다룰 수 있는 다양한 메서드가 제공됩니다. 그 중에서도 자주 쓰이는 forEach, map, fill, filter, reduce 메서드를 한 번에 정리해보겠습니다.✅ 1. forEach()설명: 배열의 각 요소에 대해 주어진 함수를 실행합니다.용도: 반복 작업 (출력, 로직 수행 등)반환값: 없음const fruits = ['apple', 'banana', 'cherry'];fruits.forEach(function(fruit, index) { console.log(`${index + 1}: ${fruit}`);});💡 반환값이 없으므로, 새로운 배열을 만들고 싶을 때는 map()을 사용하세요.✅ 2. map()설명: 배열의 각 요..
DOM 요소 선택 방법 getElementById, querySelector, querySelectorAll 📌 DOM 요소 선택 방법 정리✅ 1. getElementById()id 속성으로 하나만 선택할 때 사용빠르고 간단하지만 id만 가능const element = document.getElementById("myId");✅ 2. querySelector()CSS 선택자 방식 사용 가능클래스, 태그, 조합 등 가능 (첫 번째 요소만 반환)const element = document.querySelector(".my-class");const element2 = document.querySelector("div > p");✅ 3. querySelectorAll()CSS 선택자 방식으로 모든 요소 선택NodeList 반환 (배열처럼 forEach 사용 가능)const elements = document.quer..
DOM 조작이란 🧱 DOM이란?✅ DOM = Document Object ModelHTML 문서를 자바스크립트가 다룰 수 있는 "객체" 형태로 만든 구조즉, HTML을 트리 구조로 변환한 거야예:    안녕!   DOM이 뭔가요?  이런 HTML은 자바스크립트 입장에서 보면: document.body document.querySelector('h1') document.querySelector('p').textContent 🔧 DOM 조작이란?"자바스크립트를 이용해서 HTML 요소나 내용을 추가/수정/삭제/이동하는 것" 🛠️ 자주 하는 DOM 조작 예시작업                                          예시 요소 찾기document.getElementById(), querySelector..
HTML 요소에 내용 추가하는 3가지 방법 — append, textContent, innerHTML ✨ 추천 사용 상황✅ append() : 요소나 텍스트를 안전하게 덧붙이고 싶을 때✅ textContent : 태그 없이 순수 텍스트만 다룰 때✅ innerHTML : HTML 구조나 스타일을 같이 넣고 싶을 때 📘 append vs textContent vs innerHTML 요약메서드           설명                                    태그 해석                                                  추가 방식 append()요소나 텍스트를 뒤에 추가❌ 텍스트에 HTML 태그 써도 그대로 나옴요소 또는 문자열 가능(여러 개도 가능)textContent텍스트만 넣기❌ HTML 태그 무시됨기존 내용에 텍스트만 추가/대체innerHTMLH..
indexOf, lastIndexOf, includes 배열이나 문자열에서 특정 값 찾기 🔎 indexOf() 개념✅ 배열 버전array.indexOf(searchElement[, fromIndex]) searchElement: 찾고 싶은 값fromIndex (선택): 검색을 시작할 위치 (기본은 0)결과값: 찾은 값의 인덱스(위치) 반환못 찾으면 -1 반환 ✅ 문자열 버전 string.indexOf(searchValue[, fromIndex])   📦 배열 예시 const fruits = ['apple', 'banana', 'cherry']; console.log(fruits.indexOf('banana')); // 1 console.log(fruits.indexOf('grape'));  // -1  📦 문자열 예시 const message = "hello world"; console..