참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
- 오페라: Ctrl-F5를 입력.
/* =========================================
Developer Tools Panel
owner-only floating tools
========================================= */
#dev-tools-panel {
position:fixed;
right:18px;
bottom:18px;
z-index:99998;
width:306px;
background:#171717;
border:1px solid;
border-color:#555555 #2b2b2b #050505 #2b2b2b;
border-radius:0;
overflow:hidden;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.040),
inset 0 -1px 0 rgba(0,0,0,0.70),
0 8px 24px rgba(0,0,0,0.58);
color:#e2e2e2;
font-size:12px;
line-height:1.4;
}
#dev-tools-panel,
#dev-tools-panel * {
box-sizing:border-box;
}
#dev-tools-panel.dev-tools-collapsed {
width:auto;
min-width:176px;
}
#dev-tools-header {
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
min-height:30px;
padding:0 8px 0 10px;
border-bottom:1px solid #050505;
background:#1d1d1d;
color:#e2e2e2;
font-size:12px;
font-weight:700;
line-height:1;
cursor:default;
user-select:none;
text-shadow:1px 1px 0 #000;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.050);
}
#dev-tools-title {
display:flex;
align-items:center;
gap:7px;
min-width:0;
white-space:nowrap;
letter-spacing:.3px;
}
.dev-tools-led {
display:block;
width:7px;
height:7px;
background:#8fd09a;
border:1px solid #050505;
box-shadow:0 0 6px rgba(143,208,154,.28);
}
#dev-tools-toggle {
width:22px;
height:22px;
padding:0;
border:1px solid #202020;
border-top-color:#444444;
border-bottom-color:#050505;
border-radius:0;
background:#141414;
color:#e2e2e2;
font-size:14px;
line-height:18px;
font-weight:700;
text-align:center;
cursor:pointer;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.035);
}
#dev-tools-toggle:hover {
background:#202020;
border-color:#444444 #333333 #050505 #333333;
color:#ffffff;
}
#dev-tools-toggle:active {
background:#101010;
box-shadow:inset 1px 1px 3px rgba(0,0,0,0.82);
}
#dev-tools-body {
padding:8px;
background:#080808;
border-top:1px solid rgba(255,255,255,0.018);
}
#dev-tools-panel.dev-tools-collapsed #dev-tools-body {
display:none;
}
#dev-tools-panel.dev-tools-collapsed #dev-tools-header {
border-bottom:none;
}
.dev-tools-section {
display:flex;
flex-direction:column;
gap:6px;
margin:0 0 8px;
padding:7px;
background:#101010;
border:1px solid #202020;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.025),
inset 0 -1px 0 rgba(0,0,0,0.60);
}
.dev-tools-section:last-of-type {
margin-bottom:8px;
}
.dev-tools-section-title {
height:18px;
line-height:18px;
padding:0 5px;
background:#1d1d1d;
border:1px solid #202020;
border-top-color:#333333;
border-bottom-color:#050505;
color:#c8c8c8;
font-size:9px;
font-weight:700;
letter-spacing:.55px;
text-shadow:1px 1px 0 #000;
}
.dev-tools-note {
color:#8a8a8a;
font-size:10px;
line-height:1.45;
}
.dev-tools-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:5px;
}
.dev-tools-button {
display:flex;
align-items:center;
justify-content:center;
width:100%;
min-height:25px;
box-sizing:border-box;
padding:0 7px;
border-radius:0;
border:1px solid;
border-color:#333333 #202020 #050505 #202020;
background:linear-gradient(to bottom,#171717 0%,#141414 56%,#101010 100%);
color:#c8c8c8;
font-size:10px;
font-weight:700;
line-height:1;
text-align:center;
cursor:pointer;
text-shadow:1px 1px 0 #000;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.040);
}
.dev-tools-button:hover {
background:linear-gradient(to bottom,#202020 0%,#1a1a1a 56%,#141414 100%);
border-color:#444444 #333333 #101010 #333333;
color:#ffffff;
}
.dev-tools-button:active {
background:linear-gradient(to bottom,#0c0c0c 0%,#101010 55%,#171717 100%);
border-color:#050505 #202020 #333333 #202020;
box-shadow:inset 1px 1px 3px rgba(0,0,0,0.82);
}
.dev-tools-button:disabled,
.dev-tools-input:disabled {
cursor:default;
opacity:.55;
}
.dev-tools-danger {
border-color:#4a2828 #2e2020 #050505 #2e2020;
color:#c88a80;
}
.dev-tools-danger:hover {
border-color:#6a3933 #4a2828 #101010 #4a2828;
color:#e0a199;
}
.dev-tools-label {
margin:2px 0 -2px;
color:#8a8a8a;
font-size:9px;
font-weight:700;
letter-spacing:.45px;
line-height:1;
}
.dev-tools-input {
width:100%;
height:24px;
background:#070707;
border:1px solid #202020;
border-top-color:#333333;
color:#e2e2e2;
padding:0 7px;
border-radius:0;
font-size:11px;
line-height:22px;
outline:none;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.020),
inset 0 -1px 0 rgba(0,0,0,0.55);
}
.dev-tools-input:focus {
border-color:#555555 #333333 #050505 #333333;
background:#0c0c0c;
}
.dev-tools-progress-readout {
display:grid;
grid-template-columns:1fr 1fr;
gap:4px;
padding:5px;
background:#070707;
border:1px solid #202020;
color:#c8c8c8;
font-size:9px;
font-weight:700;
line-height:1.25;
text-shadow:1px 1px 0 #000;
}
.dev-tools-progress-readout span {
display:block;
min-width:0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
#dev-tools-status {
min-height:18px;
padding:4px 6px;
background:#101010;
border:1px solid #202020;
color:#8a8a8a;
font-size:10px;
line-height:1.25;
word-break:keep-all;
text-shadow:1px 1px 0 #000;
}
#dev-tools-status.dev-tools-status-error {
color:#d46262;
}
#dev-tools-status.dev-tools-status-ok {
color:#95c884;
}