마우스 호버링 시 파스텔 톤의 녹색으로 강조되는 효과 추가
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>표 생성기</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
.input-container {
margin-bottom: 20px;
}
input[type="number"] {
padding: 10px;
font-size: 1rem;
width: 80px;
margin: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 20px;
font-size: 1rem;
background-color: #007aff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #005ecb;
}
table {
margin: 20px auto;
border-collapse: collapse;
width: auto;
}
td {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
transition: background-color 0.3s ease; /* 부드러운 강조 효과 */
}
td:hover {
background-color: #b2f2bb; /* 파스텔 톤의 녹색 */
}
</style>
</head>
<body>
<h1>표 생성기</h1>
<div class="input-container">
<label for="rows">행:</label>
<input type="number" id="rows" min="1" placeholder="행 수 입력">
<label for="columns">열:</label>
<input type="number" id="columns" min="1" placeholder="열 수 입력">
<button onclick="generateTable()">표 생성</button>
</div>
<div id="table-container"></div>
<script>
function generateTable() {
// 입력 값 가져오기
const rows = parseInt(document.getElementById("rows").value);
const columns = parseInt(document.getElementById("columns").value);
// 유효성 검사
if (isNaN(rows) || isNaN(columns) || rows <= 0 || columns <= 0) {
alert("유효한 숫자를 입력하세요.");
return;
}
// 기존 표 제거
const tableContainer = document.getElementById("table-container");
tableContainer.innerHTML = "";
// 새 표 생성
const table = document.createElement("table");
for (let i = 0; i < rows; i++) {
const tr = document.createElement("tr");
for (let j = 0; j < columns; j++) {
const cell = document.createElement("td");
cell.textContent = `셀 ${i + 1}-${j + 1}`;
tr.appendChild(cell);
}
table.appendChild(tr);
}
// 표 추가
tableContainer.appendChild(table);
}
</script>
</body>
</html>'개발 > 웹(Web)' 카테고리의 다른 글
| [React] 개발환경 구축 완료 : 오류 해결 방법 (1) | 2025.01.04 |
|---|---|
| [JavaScript] 문서 객체 모델(DOM) : 할 일 목록 구현 실습 (1) | 2025.01.02 |
| [JavaScript] 문서 객체 모델(DOM) : 웹에 노드 추가하고 삭제하기 (톡 게시판 만들기) (0) | 2025.01.02 |
| [JavaScript] 문서 객체 모델(DOM) : 더보기 버튼 만들기 (0) | 2025.01.02 |
| [JavaScript] 문서 객체 모델(DOM) : 라이트박스 사진 갤러리 만들기 (1) | 2025.01.01 |