전체 게시판을 통합해서 보는 통합게시판기능이 있었으면 좋겠어요.
꾸벅꾸벅!!!
추가로 생성형 ai처럼 코드 실행기능도 추가부탁드려요.
많이 어렵지 않아 보여서요.
딥씨크
쳇지피티
클로드
그록
댓글 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>
게시글 목록
| 번호 | 제목 |
|---|---|
| 1717252 | |
| 1717247 | |
| 1717243 | |
| 1717237 | |
| 1717225 | |
| 1717214 | |
| 1717208 | |
| 1717203 | |
| 1717189 | |
| 1717183 | |
| 1717177 | |
| 1717172 | |
| 1717163 | |
| 1717162 | |
| 1717156 | |
| 1717154 | |
| 1717153 | |
| 1717141 | |
| 1717140 | |
| 1717138 | |
| 1717113 | |
| 1717111 | |
| 1717105 | |
| 1717099 | |
| 1717085 | |
| 1717076 | |
| 1717072 | |
| 1717065 | |
| 1717062 | |
| 1717050 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기