📅 날짜
2025년 2월 18일
🔥 오늘 배운 내용
1️⃣ 동적 테이블 생성 및 셀 선택 기능
✅ 사용자가 입력한 행(row)과 열(col) 개수를 기준으로 동적으로 테이블을 생성
✅ 각 셀을 클릭하면 해당 좌표를 확인하고 스타일 변경(배경색 강조)
✅ 이전 선택된 셀의 스타일을 초기화하는 기능 구현
✅ 테이블이 생성될 때 초기 중앙 셀을 자동으로 선택하는 기능 구현
🧐 문제 해결을 위한 생각의 흐름
📌 동적 테이블을 만들기 위해 고려해야 할 사항
- 사용자의 입력값(행과 열의 개수)을 받아서 테이블을 동적으로 생성해야 함
- 기존 테이블이 있으면 삭제하고 새로 만들어야 함
- 각
td(셀)에 클릭 이벤트를 추가하여, 선택한 셀을 강조해야 함 - 이전 선택된 셀의 스타일을 원래대로 되돌리는 기능이 필요함
- 테이블이 생성될 때 중앙 셀을 자동으로 선택하도록 초기 설정해야 함
📌 코드 작성 순서
1️⃣ HTML 요소 가져오기
2️⃣ 기존 테이블 삭제 (초기화)
3️⃣ 새로운 행과 열을 동적으로 생성
4️⃣ 각 td에 ID 추가 및 클릭 이벤트 바인딩
5️⃣ 이전 선택된 셀의 스타일 초기화
6️⃣ 테이블 생성 후 중앙 셀을 자동으로 선택
📌 동적 테이블 구현 코드 분석
// 현재 선택된 셀을 저장하는 변수
let selectedNode = null;
// 선택된 셀의 스타일을 변경하는 함수
const selectedStyle = (xPos, yPos) => {
console.log("선택된 좌표:", xPos, yPos);
// 이전에 선택된 셀이 있다면, 스타일을 원래대로 복구
if (selectedNode) {
deselectedStyle(selectedNode);
}
// 새롭게 선택된 셀을 저장하고 스타일 적용
selectedNode = document.getElementById(`${xPos}|${yPos}`);
selectedNode.style.backgroundColor = 'gray'; // 선택된 셀 강조
};
// 이전에 선택된 셀의 스타일을 복구하는 함수
const deselectedStyle = (node) => {
node.style.backgroundColor = 'white';
};
// 테이블을 동적으로 생성하는 함수
const makemap = () => {
const row = document.querySelector('#rownum').value; // 입력된 행 개수
const col = document.querySelector('#colnum').value; // 입력된 열 개수
const tbodyEl = document.querySelector('#tbl tbody');
// 기존 테이블 삭제 (초기화)
while (tbodyEl.firstChild) {
tbodyEl.removeChild(tbodyEl.firstChild);
}
// 입력된 행(row) 개수만큼 반복하여 `tr` 생성
for (let i = 0; i < row; i++) {
const trEl = document.createElement('tr');
// 각 행에 입력된 열(col) 개수만큼 `td` 생성
for (let j = 0; j < col; j++) {
const tdEl = document.createElement('td');
// 클릭 이벤트 추가 (셀을 클릭하면 강조)
tdEl.addEventListener('click', () => {
selectedStyle(j, i);
});
tdEl.innerHTML = `(${j},${i})`; // 셀 내부에 좌표 표시
tdEl.setAttribute('id', `${j}|${i}`); // 고유 ID 설정
trEl.appendChild(tdEl);
}
// 생성된 행을 `tbody`에 추가
tbodyEl.appendChild(trEl);
}
// 📌 중앙 좌표 자동 선택
curX = Math.ceil(col / 2 - 1);
curY = Math.ceil(row / 2 - 1);
selectedStyle(curX, curY);
};2️⃣ 반응형 요소 크기 조절 및 이벤트 감지
✅ DOMContentLoaded와 load 이벤트의 차이점 학습
✅ 화면 크기에 따라 요소(.ball)의 크기 및 스타일을 동적으로 변경하는 기능 구현
✅ window.innerWidth를 감지하여 모바일(480px), 태블릿(768px), 데스크탑(1280px) 환경에 맞춰 스타일 적용
✅ resize 이벤트를 활용하여 창 크기 변경 시 즉시 반응하도록 처리
window.addEventListener('DOMContentLoaded', () => {
// 반응형 요소 크기 조절 함수
const flexibleBall = (width, ballEl) => {
if (width < 768) {
ballEl.className = 'ball ball-480px'; // 모바일 처리
} else if (width < 1280) {
ballEl.className = 'ball ball-768px'; // 태블릿 처리
} else {
ballEl.className = 'ball ball-1280px'; // 데스크탑 처리
}
};
const width = window.innerWidth;
const ballEl = document.querySelector('.ball');
flexibleBall(width, ballEl);
// 창 크기 변경 시 반응형 적용
window.addEventListener('resize', () => {
const width = window.innerWidth;
flexibleBall(width, ballEl);
});
});🎯 배운 점 & 느낀 점
- 테이블을 동적으로 생성하고 클릭 이벤트를 활용하여 스타일을 변경하는 방법을 익힘
- LoDash 이벤트 감시 기능을 통해 UI 최적화 방안을 연구
- 반응형 디자인에서
resize이벤트를 활용하여 화면 크기에 따라 요소를 조절하는 방법을 익힘
📌 오늘의 학습 요약
| 학습 내용 | 주요 내용 |
|---|---|
| 동적 테이블 생성 | 사용자 입력값(행/열 개수)에 따라 테이블 생성 |
| 셀 선택 및 강조 | 클릭한 셀의 좌표를 확인하고 스타일 변경 |
| 이전 선택된 셀 복구 | 새롭게 선택된 셀 강조 전에, 이전 셀을 원래 상태로 복원 |
| 중앙 셀 자동 선택 | 테이블 생성 후 중앙 좌표 계산하여 기본 선택 적용 |
| LoDash 이벤트 감시 | UI 최적화 및 퍼포먼스 향상을 위한 이벤트 감시 |
| 반응형 요소 조절 | resize 이벤트를 활용한 동적 스타일 적용 |
Here, My Pale Blue.🌏