페이지 직접 추가하는 방법 질문
제목과 같이 제가 아래 코드들이 담긴 내용들을 직접 추가해서 해당 url으로 접속하면 보여지게 하고 싶은데 404 에러가 발생하여 뭐가 문제인지 궁금하여 질문드립니다.
예를 들어서 test.pe.kr/ukeToKrw.php 이렇게 접근하게 하고 싶은데 아래 내용의 파일을 어떻게 삽입해야 할까요..
Copy
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
table {
border-collapse: collapse;
width: 80%;
max-width: 600px;
margin: 20px 0;
}
th, td {
border: 1px solid #dddddd;
text-align: center;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
.input-container {
position: relative;
margin: 10px;
width: calc(100% - 40px);
max-width: 300px;
}
.input-container input {
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.input-container .unit {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: #888;
}
@media (max-width: 600px) {
table {
width: 100%;
}
.input-container {
width: calc(100% - 20px);
}
}
</style>
<h1>CUKE, UKE to KRW 환산기</h1>
<table>
<thead>
<tr>
<th>CUKE</th>
<th>UKE</th>
<th>원화 (KRW)</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>400</td><td>10,000,000</td></tr>
<tr><td>2</td><td>800</td><td>20,000,000</td></tr>
<tr><td>3</td><td>1200</td><td>30,000,000</td></tr>
<tr><td>4</td><td>1600</td><td>40,000,000</td></tr>
<tr><td>5</td><td>2000</td><td>50,000,000</td></tr>
<tr><td>6</td><td>2400</td><td>60,000,000</td></tr>
<tr><td>7</td><td>2800</td><td>70,000,000</td></tr>
<tr><td>8</td><td>3200</td><td>80,000,000</td></tr>
<tr><td>9</td><td>3600</td><td>90,000,000</td></tr>
<tr><td>10</td><td>4000</td><td>100,000,000</td></tr>
</tbody>
</table>
<div class="input-container">
<input type="text" id="cukeInput" placeholder="CUKE 단위 입력">
<span class="unit">CUKE</span>
</div>
<div class="input-container">
<input type="text" id="ukeInput" placeholder="UKE 단위 입력">
<span class="unit">UKE</span>
</div>
<div class="input-container">
<input type="text" id="krwInput" placeholder="원화 입력">
<span class="unit">KRW</span>
</div>
<script>
// 1 CUKE = 400 UKE = 10,000,000 원
const cukeToUkeRate = 400;
const cukeToKrwRate = 10000000;
const ukeToKrwRate = 25000;
function formatNumber(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
function parseNumber(str) {
return parseFloat(str.replace(/,/g, ""));
}
document.getElementById('cukeInput').addEventListener('keyup', function() {
const cukeValue = parseNumber(this.value);
if (!isNaN(cukeValue)) {
document.getElementById('ukeInput').value = formatNumber(cukeValue * cukeToUkeRate);
document.getElementById('krwInput').value = formatNumber(cukeValue * cukeToKrwRate);
} else {
document.getElementById('ukeInput').value = '';
document.getElementById('krwInput').value = '';
}
});
document.getElementById('ukeInput').addEventListener('keyup', function() {
const ukeValue = parseNumber(this.value);
if (!isNaN(ukeValue)) {
document.getElementById('cukeInput').value = formatNumber(ukeValue / cukeToUkeRate);
document.getElementById('krwInput').value = formatNumber(ukeValue * ukeToKrwRate);
} else {
document.getElementById('cukeInput').value = '';
document.getElementById('krwInput').value = '';
}
});
document.getElementById('krwInput').addEventListener('keyup', function() {
const krwValue = parseNumber(this.value);
if (!isNaN(krwValue)) {
document.getElementById('cukeInput').value = formatNumber(krwValue / cukeToKrwRate);
document.getElementById('ukeInput').value = formatNumber(krwValue / ukeToKrwRate);
} else {
document.getElementById('cukeInput').value = '';
document.getElementById('ukeInput').value = '';
}
});
</script>답변 2개
답변을 작성하려면 로그인이 필요합니다.
로그인