{"id":318,"date":"2026-01-09T11:00:14","date_gmt":"2026-01-09T02:00:14","guid":{"rendered":"https:\/\/javascript.auctionpro.co.kr\/?p=318"},"modified":"2026-01-09T11:00:16","modified_gmt":"2026-01-09T02:00:16","slug":"textarea-bg-color","status":"publish","type":"post","link":"https:\/\/javascript.auctionpro.co.kr\/?p=318","title":{"rendered":"textarea bg color"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n\n<style>\n.console {\n    flex: 1;\n    display: block;\n    min-height: 0;\n    font-family: Consolas;\n    background-color: #222;\n    color: #f1f1f1;\n    white-space: pre-wrap;\n    word-break: break-word;\n    overflow-wrap: normal;\n    outline: none;\n    overflow-y: auto;\n    overflow-x: hidden;\n    margin: 0;\n    padding: 5px 5px 0 15px;\n    line-height: 1.2;\n    font-size: 37%;\n    font-weight: 100;\n}\n<\/style>\n\n<\/head>\n<body>\n\n\n<section class=\"split\">\n          <div class=\"panel left\">\n            <div class=\"header active\">\n              <span class=\"badge-num\">1<\/span>\n              <span>Windows1<\/span>\n              <span class=\"more-dots\">\n\t\t\t\t\t<input type=\"color\" class=\"bg-picker\" data-target=\"leftConsole\">\n\t\t\t\t\t<input type=\"color\" class=\"txt-picker\" data-target=\"leftConsole\">\n\t\t\t\t\t<select class=\"font-picker\" data-target=\"leftConsole\">\n\t\t\t\t\t\t<option value=\"Consolas\">Consolas<\/option>\n\t\t\t\t\t\t<option value=\"Courier New\">Courier New<\/option>\n\t\t\t\t\t\t<option value=\"Menlo\">Menlo<\/option>\n\t\t\t\t\t\t<option value=\"Monaco\">Monaco<\/option>\n\t\t\t\t\t\t<option value=\"Noto Sans Mono KR\">Noto Sans Mono KR<\/option>\n\t\t\t\t\t  <\/select>\n\t\t\t\t\t  <select class=\"size-picker\" data-target=\"leftConsole\">\n\t\t\t\t\t\t<option value=\"12px\">12px<\/option>\n\t\t\t\t\t\t<option value=\"14px\">14px<\/option>\n\t\t\t\t\t\t<option value=\"16px\">16px<\/option>\n\t\t\t\t\t\t<option value=\"18px\">18px<\/option>\n\t\t\t\t\t\t<option value=\"18px\">20px<\/option>\n\t\t\t\t\t  <\/select>\n\t\t\t\t\t<button type=\"button\" class=\"reset-btn\" data-target=\"leftConsole\">\ucd08\uae30\ud654<\/button>\n\t\t\t\t  <\/span>\n            <\/div>\n            <textarea class=\"console\" id=\"leftConsole\" tabindex=\"0\" data-index=\"0\" spellcheck=\"false\" rows=\"6\" cols=\"50\">&gt;<\/textarea>\n            \n          <\/div>\n          <div class=\"splitbar1\" aria-hidden=\"true\"><\/div>\n          <div class=\"panel right\" style=\"flex:1\">\n            <div class=\"header\">\n              <span class=\"badge-num\">2<\/span>\n              <span>Windows2<\/span>\n              <input type=\"color\" class=\"bg-picker\" data-target=\"rightConsole\">\n\t\t\t  <input type=\"color\" class=\"txt-picker\" data-target=\"rightConsole\">\n\t\t\t\t<select class=\"font-picker\" data-target=\"rightConsole\">\n\t\t\t\t\t<option value=\"Consolas\">Consolas<\/option>\n\t\t\t\t\t<option value=\"Courier New\">Courier New<\/option>\n\t\t\t\t\t<option value=\"Menlo\">Menlo<\/option>\n\t\t\t\t\t<option value=\"Monaco\">Monaco<\/option>\n\t\t\t\t\t<option value=\"Noto Sans Mono KR\">Noto Sans Mono KR<\/option>\n\t\t\t\t  <\/select>\n\t\t\t\t  <select class=\"size-picker\" data-target=\"rightConsole\">\n\t\t\t\t\t<option value=\"12px\">12px<\/option>\n\t\t\t\t\t<option value=\"14px\">14px<\/option>\n\t\t\t\t\t<option value=\"16px\">16px<\/option>\n\t\t\t\t\t<option value=\"18px\">18px<\/option>\n\t\t\t\t\t<option value=\"18px\">20px<\/option>\n\t\t\t\t  <\/select>\n\t\t\t<button type=\"button\" class=\"reset-btn\" data-target=\"rightConsole\">\ucd08\uae30\ud654<\/button>\n            <\/div>\n            <textarea class=\"console\" id=\"rightConsole\" tabindex=\"0\" data-index=\"1\" spellcheck=\"false\" rows=\"6\" cols=\"50\">&gt;<\/textarea>\n            \n          <\/div>\n        <\/section>\n\n\n<br><br>\n\n<script>\nconst DEFAULT_STYLE = {\n  bg: \"#222222\",\n  txt: \"#f1f1f1\",\n  font: \"Consolas\",\n  size: \"14px\"\n};\n\nconst KEY_PREFIX = \"CONSOLE_STYLE_\";\n\n\/\/ \ucd08\uae30\ud654 & \ubcf5\uc6d0\ndocument.querySelectorAll(\"textarea.console\").forEach(initConsole);\n\nfunction initConsole(ta) {\n  const id = ta.id;\n  const saved = JSON.parse(localStorage.getItem(KEY_PREFIX + id) || \"{}\");\n  const style = { ...DEFAULT_STYLE, ...saved };\n\n  ta.style.backgroundColor = style.bg;\n  ta.style.color = style.txt;\n  ta.style.fontFamily = style.font;\n  ta.style.fontSize = style.size;\n\n  syncPicker(id, \"bg-picker\", style.bg);\n  syncPicker(id, \"txt-picker\", style.txt);\n  syncPicker(id, \"font-picker\", style.font);\n  syncPicker(id, \"size-picker\", style.size);\n}\n\n\/\/ \uacf5\ud1b5 \uc774\ubca4\ud2b8 \ucc98\ub9ac\ndocument.addEventListener(\"input\", handleChange);\ndocument.addEventListener(\"change\", handleChange);\n\nfunction handleChange(e) {\n  const t = e.target;\n  const id = t.dataset.target;\n  if (!id) return;\n\n  const ta = document.getElementById(id);\n\n  if (t.classList.contains(\"bg-picker\")) {\n    ta.style.backgroundColor = t.value;\n    save(id, { bg: t.value });\n  }\n\n  if (t.classList.contains(\"txt-picker\")) {\n    ta.style.color = t.value;\n    save(id, { txt: t.value });\n  }\n\n  if (t.classList.contains(\"font-picker\")) {\n    ta.style.fontFamily = t.value;\n    save(id, { font: t.value });\n  }\n\n  if (t.classList.contains(\"size-picker\")) {\n    ta.style.fontSize = t.value;\n    save(id, { size: t.value });\n  }\n}\n\n\/\/ \ucd08\uae30\ud654\ndocument.addEventListener(\"click\", function (e) {\n  if (!e.target.classList.contains(\"reset-btn\")) return;\n\n  const id = e.target.dataset.target;\n  const ta = document.getElementById(id);\n\n  localStorage.removeItem(KEY_PREFIX + id);\n  initConsole(ta);\n});\n\n\/\/ \uc800\uc7a5\nfunction save(id, patch) {\n  const key = KEY_PREFIX + id;\n  const cur = JSON.parse(localStorage.getItem(key) || \"{}\");\n  localStorage.setItem(key, JSON.stringify({ ...cur, ...patch }));\n}\n\n\/\/ picker \ub3d9\uae30\ud654\nfunction syncPicker(id, cls, value) {\n  document\n    .querySelectorAll(`.${cls}[data-target=\"${id}\"]`)\n    .forEach(p => p.value = value);\n}\n<\/script>\n\t\n<\/body>\n<\/html><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"class_list":["post-318","post","type-post","status-publish","format-standard","hentry","category-samples"],"_links":{"self":[{"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/318","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=318"}],"version-history":[{"count":1,"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/318\/revisions"}],"predecessor-version":[{"id":320,"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/318\/revisions\/320"}],"wp:attachment":[{"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=318"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=318"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}