전체 게시판을 통합해서 보는 통합게시판기능이 있었으면 좋겠어요.
꾸벅꾸벅!!!
추가로 생성형 ai처럼 코드 실행기능도 추가부탁드려요.
많이 어렵지 않아 보여서요.
딥씨크
쳇지피티
클로드
그록
이렇게 ai가알려주네요.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>HTML Preview in Popup</title> <!-- Prism CSS --> <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet" /> <style> .container { padding: 20px; } pre { width: 100%; height: 400px; border: 1px solid #ccc; margin: 0 0 10px 0; } button { padding: 10px 20px; font-size: 16px; cursor: pointer; } </style> </head> <body> <div class="container"> <!-- 코드 입력 영역 --> <pre contenteditable="true" class="language-html"><code><div style="color: red;">Hello, World!</div> <button onclick="alert('Popup Test!')">Click Me</button></code></pre> <!-- Preview 버튼 --> <button onclick="openPreview()">Preview</button> </div>
<!-- Prism JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-html.min.js"></script> <!-- Preview 스크립트 --> <s cript> const codeElement = document.querySelector("pre code");
// 초기 하이라이팅 Prism.highlightAll();
// 입력 시 실시간 하이라이팅 codeElement.addEventListener("input", () => { Prism.highlightElement(codeElement); });
// HTML 엔티티 디코딩 함수 function decodeHtml(html) { console.log(html); const txt = document.createElement("textarea"); txt.innerHTML = html; return txt.value; }
// Preview 버튼 클릭 시 팝업 열기 function openPreview() { const htmlContent = decodeHtml(codeElement.innerText); // 입력된 코드 가져오기 const popup = window.open("", "HTMLPreview", "width=600,height=400"); // 팝업 창 열기 if (popup) { popup.document.open(); popup.document.write(` <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Preview</title> </head> <body> ${htmlContent} </ body> </ html> `); popup.document.close(); } else { alert("팝업 차단 설정을 확인해주세요!"); } } </s cript> </body> </html>
진행 중인 투표가 없습니다.
댓글 1개
이렇게 ai가알려주네요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Preview in Popup</title>
<!-- Prism CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet" />
<style>
.container {
padding: 20px;
}
pre {
width: 100%;
height: 400px;
border: 1px solid #ccc;
margin: 0 0 10px 0;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<!-- 코드 입력 영역 -->
<pre contenteditable="true" class="language-html"><code><div style="color: red;">Hello, World!</div>
<button onclick="alert('Popup Test!')">Click Me</button></code></pre>
<!-- Preview 버튼 -->
<button onclick="openPreview()">Preview</button>
</div>
<!-- Prism JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-html.min.js"></script>
<!-- Preview 스크립트 -->
<s cript>
const codeElement = document.querySelector("pre code");
// 초기 하이라이팅
Prism.highlightAll();
// 입력 시 실시간 하이라이팅
codeElement.addEventListener("input", () => {
Prism.highlightElement(codeElement);
});
// HTML 엔티티 디코딩 함수
function decodeHtml(html) {
console.log(html);
const txt = document.createElement("textarea");
txt.innerHTML = html;
return txt.value;
}
// Preview 버튼 클릭 시 팝업 열기
function openPreview() {
const htmlContent = decodeHtml(codeElement.innerText); // 입력된 코드 가져오기
const popup = window.open("", "HTMLPreview", "width=600,height=400"); // 팝업 창 열기
if (popup) {
popup.document.open();
popup.document.write(`
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Preview</title>
</head>
<body>
${htmlContent}
</ body>
</ html>
`);
popup.document.close();
} else {
alert("팝업 차단 설정을 확인해주세요!");
}
}
</s cript>
</body>
</html>