https://devcafe.co.kr/w/index.php?action=history&feed=atom&title=Html%EC%97%90_%EB%B3%B5%EC%82%AC%ED%95%98%EA%B8%B0_%EB%B2%84%ED%8A%BC_%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0
Html에 복사하기 버튼 추가하기 - 편집 역사
2026-04-03T18:48:32Z
이 문서의 편집 역사
MediaWiki 1.42.1
https://devcafe.co.kr/w/index.php?title=Html%EC%97%90_%EB%B3%B5%EC%82%AC%ED%95%98%EA%B8%B0_%EB%B2%84%ED%8A%BC_%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0&diff=1393&oldid=prev
2025년 5월 19일 (월) 21:54에 Devcafe님의 편집
2025-05-19T21:54:08Z
<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ko">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← 이전 판</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">2025년 5월 20일 (화) 06:54 판</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l112">112번째 줄:</td>
<td colspan="2" class="diff-lineno">112번째 줄:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></html></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></html></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></source></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></source></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[category:javascript]]</ins></div></td></tr>
</table>
Devcafe
https://devcafe.co.kr/w/index.php?title=Html%EC%97%90_%EB%B3%B5%EC%82%AC%ED%95%98%EA%B8%B0_%EB%B2%84%ED%8A%BC_%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0&diff=1274&oldid=prev
Devcafe: 새 문서: <source lang=html> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>SQL 문장 보기</title> <style> body { font-family: Arial, sans-serif; margin: 40px; } .search-box { margin-bottom: 20px; } input[type="text"] { width: 300px; padding: 8px; font-size: 16px; } .sql-box { border: 1px solid #ccc; padding: 10px; margin-bottom: 20px;...
2025-04-10T13:33:49Z
<p>새 문서: <source lang=html> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>SQL 문장 보기</title> <style> body { font-family: Arial, sans-serif; margin: 40px; } .search-box { margin-bottom: 20px; } input[type="text"] { width: 300px; padding: 8px; font-size: 16px; } .sql-box { border: 1px solid #ccc; padding: 10px; margin-bottom: 20px;...</p>
<p><b>새 문서</b></p><div><source lang=html><br />
<br />
<!DOCTYPE html><br />
<html lang="ko"><br />
<head><br />
<meta charset="UTF-8"><br />
<title>SQL 문장 보기</title><br />
<style><br />
body { font-family: Arial, sans-serif; margin: 40px; }<br />
.search-box { margin-bottom: 20px; }<br />
input[type="text"] {<br />
width: 300px;<br />
padding: 8px;<br />
font-size: 16px;<br />
}<br />
.sql-box {<br />
border: 1px solid #ccc;<br />
padding: 10px;<br />
margin-bottom: 20px;<br />
position: relative;<br />
}<br />
.description {<br />
font-weight: bold;<br />
margin-bottom: 5px;<br />
}<br />
pre {<br />
background-color: #f4f4f4;<br />
padding: 10px;<br />
white-space: pre-wrap;<br />
}<br />
.copy-btn {<br />
position: absolute;<br />
top: 10px;<br />
right: 10px;<br />
padding: 5px 10px;<br />
font-size: 12px;<br />
cursor: pointer;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h1>SQL 문장 리스트</h1><br />
<br />
<div class="search-box"><br />
<input type="text" id="search-input" placeholder="SQL 또는 설명으로 검색..."><br />
</div><br />
<br />
<div id="sql-container">로딩 중...</div><br />
<br />
<script><br />
let allQueries = [];<br />
<br />
// SQL 렌더링 함수<br />
function renderQueries(queries) {<br />
const container = document.getElementById('sql-container');<br />
container.innerHTML = '';<br />
<br />
if (queries.length === 0) {<br />
container.innerHTML = '<p>검색 결과가 없습니다.</p>';<br />
return;<br />
}<br />
<br />
queries.forEach(query => {<br />
const box = document.createElement('div');<br />
box.className = 'sql-box';<br />
<br />
const desc = document.createElement('div');<br />
desc.className = 'description';<br />
desc.textContent = query.description;<br />
<br />
const pre = document.createElement('pre');<br />
pre.textContent = query.sql;<br />
<br />
const copyBtn = document.createElement('button');<br />
copyBtn.className = 'copy-btn';<br />
copyBtn.textContent = '복사';<br />
copyBtn.onclick = () => {<br />
navigator.clipboard.writeText(query.sql)<br />
.then(() => alert('복사되었습니다!'))<br />
.catch(() => alert('복사 실패'));<br />
};<br />
<br />
box.appendChild(desc);<br />
box.appendChild(pre);<br />
box.appendChild(copyBtn);<br />
container.appendChild(box);<br />
});<br />
}<br />
<br />
// 검색 기능<br />
document.getElementById('search-input').addEventListener('input', function () {<br />
const keyword = this.value.toLowerCase();<br />
const filtered = allQueries.filter(q =><br />
q.description.toLowerCase().includes(keyword) ||<br />
q.sql.toLowerCase().includes(keyword)<br />
);<br />
renderQueries(filtered);<br />
});<br />
<br />
// JSON 로딩<br />
fetch('sqls.json')<br />
.then(response => response.json())<br />
.then(data => {<br />
allQueries = data.queries;<br />
renderQueries(allQueries);<br />
})<br />
.catch(error => {<br />
document.getElementById('sql-container').textContent = 'SQL 로딩 실패: ' + error;<br />
});<br />
</script><br />
</body><br />
</html><br />
</source></div>
Devcafe