연습장:Yuc/4 문서 원본 보기

레웨걸용 연습장

== ==
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>커뮤니티</title>
<style>
:root {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --text: #1f2937;
  --subtext: #6b7280;
  --border: #e5e7eb;
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --danger: #ef4444;
}
* { box-sizing: border-box; font-family: "Pretendard", system-ui, -apple-system, sans-serif; }
body { margin:0; padding:16px; background:var(--bg); color:var(--text); min-width:320px; }
.container { width:100%; max-width:100%; }
.write-box { background:var(--panel); border-radius:14px; padding:16px; margin-bottom:20px; box-shadow:0 6px 18px rgba(0,0,0,0.05);}
.write-row { display:flex; gap:10px; margin-bottom:10px; flex-wrap:nowrap;}
.write-row input { flex:1 1 0; min-width:0; border:1px solid var(--border); background:#fafafa; padding:12px; border-radius:8px; font-size:14px; }
.write-row input:focus { outline:none; border-color:var(--accent); background:#fff;}
#titleInput { width:100%; margin-bottom:10px; border:1px solid var(--border); background:#fafafa; padding:12px; border-radius:8px; font-size:14px; }
#titleInput:focus { outline:none; border-color:var(--accent); background:#fff;}
textarea { width:100%; min-height:150px; resize:vertical; margin-bottom:12px; border:1px solid var(--border); background:#fafafa; padding:12px; border-radius:8px; font-size:14px; }
textarea:focus { outline:none; border-color:var(--accent); background:#fff;}
button { background:var(--accent); color:white; border:none; padding:10px 18px; border-radius:8px; cursor:pointer; font-size:14px; }
button:hover { background:var(--accent-hover); }
.list { background:var(--panel); border-radius:14px; padding:6px; box-shadow:0 6px 18px rgba(0,0,0,0.05); }
.post { padding:14px 16px; border-radius:10px; cursor:pointer; }
.post:hover { background:#f3f4f6; }
.post + .post { border-top:1px solid var(--border); }
.title { font-size:15px; font-weight:600; }
.meta { font-size:12px; color:var(--subtext); margin-top:4px; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; z-index:999; }
.modal-content { background:var(--panel); padding:22px; width:90%; max-width:900px; border-radius:16px; }
#modalTitle { margin:0; font-size:20px; }
.modal-meta { font-size:13px; color:var(--subtext); margin:6px 0 14px; }
#modalContent { white-space:pre-wrap; line-height:1.6; margin-bottom:20px; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; }
.delete { background:var(--danger); }
.delete:hover { background:#dc2626; }
</style>
</head>
<body>
<div class="container">
  <!-- 글쓰기 -->
  <div class="write-box">
    <div class="write-row">
      <input id="nicknameInput" placeholder="닉네임">
      <input id="passwordInput" type="password" placeholder="비밀번호">
    </div>
    <input id="titleInput" placeholder="제목">
    <textarea id="contentInput" placeholder="내용"></textarea>
    <button onclick="addPost()">등록</button>
  </div>

  <!-- 글 목록 -->
  <div class="list" id="list"></div>
</div>

<!-- 모달 -->
<div class="modal" id="modal" onclick="closeModal()">
  <div class="modal-content" onclick="event.stopPropagation()">
    <h3 id="modalTitle"></h3>
    <div class="modal-meta" id="modalNickname"></div>
    <div id="modalContent"></div>
    <div class="modal-actions">
      <button class="delete" onclick="deletePost()">삭제</button>
      <button onclick="closeModal()">닫기</button>
    </div>
  </div>
</div>

<script>
const nicknameInput = document.getElementById("nicknameInput");
const passwordInput = document.getElementById("passwordInput");
const titleInput = document.getElementById("titleInput");
const contentInput = document.getElementById("contentInput");
const list = document.getElementById("list");
const modal = document.getElementById("modal");
const modalTitle = document.getElementById("modalTitle");
const modalNickname = document.getElementById("modalNickname");
const modalContent = document.getElementById("modalContent");

let posts = [];  // 문법 문자열로 저장
let currentPostId = null;

// 문법 예시: [[닉네임]]|비밀번호|제목|내용
function addPost() {
  const nick = nicknameInput.value.trim();
  const pass = passwordInput.value.trim();
  const t = titleInput.value.trim();
  const c = contentInput.value.trim();

  if(!nick || !pass || !t || !c){ alert("모든 항목을 입력하세요."); return; }

  const line = `[[${nick}]]|${pass}|${t}|${c}`;
  posts.unshift(line);

  nicknameInput.value=""; passwordInput.value=""; titleInput.value=""; contentInput.value="";
  render();
}

function parsePost(line) {
  const [nickPart, pass, title, content] = line.split("|");
  const nick = nickPart.replace(/^\[\[|\]\]$/g,"");
  return { nick, pass, title, content };
}

function render() {
  list.innerHTML = "";
  posts.forEach((line, idx)=>{
    const p = parsePost(line);
    const d = document.createElement("div");
    d.className = "post";
    d.innerHTML = `<div class="title">${p.title}</div><div class="meta">작성자: ${p.nick}</div>`;
    d.onclick = ()=>openPost(idx);
    list.appendChild(d);
  });
}

function openPost(idx){
  const p = parsePost(posts[idx]);
  currentPostId = idx;
  modal.style.display="flex";
  modalTitle.innerText = p.title;
  modalNickname.innerText = "작성자: "+p.nick;
  modalContent.innerText = p.content;
}

function deletePost(){
  const p = parsePost(posts[currentPostId]);
  const input = prompt("비밀번호를 입력하세요");
  if(input !== p.pass){ alert("비밀번호가 틀렸습니다."); return; }
  posts.splice(currentPostId,1);
  closeModal();
  render();
}

function closeModal(){ modal.style.display="none"; currentPostId=null; }

render();
</script>
</body>
</html>

== 대형사철 ==
대한철도
(수도권)
한성메트로
네오트랜스
경진철도
대원철도
경기철도
강화철도
경동철도
(동남권)

(평양권)
평양메트로

== 수도권 ==
* 한성메트로 (사철)
** 1호선
** 2호선
** 3호선
** 4호선
* 한성도시철도공사
** 5호선
** 6호선
** 7호선
** 8호선
* 한성부메트로9호선 (사철)
** 9호선
* 안산전철 (사철)
** 10호선
* 분당급행전철 (사철)
** 11호선
* 철도청
** 12호선
** 13호선
* 서해철도
** 14호선

=== 수도권 사철 ===
* 네오트랜스
** 신분당선
** 신일산선

* 새서울철도
** 신용산선

* 경진철도
** 사당선

* 경기철도
* 대원철도

* 경인급행전철
** 신경인선

* 강화철도
** 강화본선

* 경동철도
** 경동본선

== 만철 ==

== 일본 국철 ==

== 2 ==

{| class="wikitable" style="width:100%; max-width:400px; border:2px solid #c30e2f; font-size:10.5pt; float:right"
|-
! colspan="4" style="background:#c30e2f; color:#FFF" | {{글씨 크기|15|김유성}}<br>金流盛 | Kim yu-sŏng
|-
| colspan="4" style="height:100px; text-align:center" | <div style="margin: -4.5px -9px">[[파일:김유성 코스프레.png]]</div>
|-
| width=30% colspan="4" | <center>△ [[양유진]]의 김유성 코스프레</center> <ref>작가의 역량 부족으로(...) 일러를 구할 수가 없어서 임시로 사용하는 사진이다... 일러를 구한다면 바로 교체될 것</ref>
|-
! width=20% colspan="1" style="background:#c30e2f; color:#FFF" | 나이
| width=30% colspan="1" | 18세
! width=20% colspan="1" style="background:#c30e2f; color:#FFF" | 혈액형
| width=30% colspan="1" | B형
|-
! width=20% colspan="1" style="background:#c30e2f; color:#FFF" | 신장
| width=30% colspan="1" | 162㎝
! width=20% colspan="1" style="background:#c30e2f; color:#FFF" | 체중
| width=30% colspan="1" | 45㎏
|-
! width=20% colspan="1" style="background:#c30e2f; color:#FFF" | 생년
| width=30% colspan="1" | [[5월 12일|2009년<br>5월 12일]]
! width=20% colspan="1" style="background:#c30e2f; color:#FFF" | 성별
| width=30% colspan="1" | 여성
|-
! width=20% colspan="1" style="background:#c30e2f; color:#FFF" | 국적
| width=30% colspan="1" | [[대한제국 (The Lost Dawn)|대한제국]]
! width=20% colspan="1" style="background:#c30e2f; color:#FFF" | 쓰는 손
| width=30% colspan="1" | 오른손
|-
! width=20% colspan="1" style="background:#c30e2f; color:#FFF" | 출신지
| width=30% colspan="1" | [[대한제국 (The Lost Dawn)|평안북도 선천시]]
! width=20% colspan="1" style="background:#c30e2f; color:#FFF" | 거주지
| width=30% colspan="1" | [[대한제국 (The Lost Dawn)|경기도 시흥부]]
|-
! width=20% colspan="1" style="background:#c30e2f; color:#FFF" | 다른 이름
| colspan="3" | 류세이 (リュウセイ)<br>메테오 (メテオ)
|-
! width=20% colspan="1" style="background:#c30e2f; color:#FFF" | 학력
| colspan="3" | 상반중학교 <small>(전학)</small><br>일직중학교 <small>(졸업)<ref>시흥부 일직동 소재, 현실의 경상북도 안동시 일직면에 있는 일직중학교와는 연관없는 가상의 중학교이다.</ref></small><br>금천공업고등학교 <small>(재학 중)</small>
|-
! width=20% colspan="1" style="background:#c30e2f; color:#FFF" | 가족
| colspan="3" | 김구성 (아버지)<br>이세류 (어머니)<br>김유미 (여동생)<br>김유한 (남동생)
|-
! width=20% colspan="1" style="background:#c30e2f; color:#FFF" | 취미
| colspan="3" | 철도 덕질, 사진 찍기, 자전거 타기, 트위터 하기, 트친들과 놀러다니기
|-
|-
|}
{{-}}

<br>



== 3 ==

{| class="wikitable" style="border: 2px solid #005bac; width: 100%; text-align: center"
| style="background-color:#fff; color: #005bac" | '''대한제국 행정구역 단계'''
|-
| colspan="1" style="background-color:#fff;" | 
<div class="mw-customtoggle-arrr" style="margin-left:auto; margin-right:auto; padding:6px -1px 11px; padding-left:7px; width:100%; text-align:center; background-color: transparent; color:#000000;"><div style="margin: -3px 0px">'''[ 펼치기 · 접기 ]'''</div></div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-arrr" style="background:none; border: 1px solid transparent;width:100%; text-align:center;">
<div class="toccolours mw-collapsible-content" style="background:none; margin: 0px -15px 0px; border: 1px solid transparent;text-align:center; ">
{| style="margin-left:-2px; margin-right:-15px;margin-bottom:-13px;width: calc(100% + 5px);text-align:center;margin-top:-2px font-size:10.5pt;"
|-
| width=16.6% colspan="2" style="background:#405486; color:#fff;" | <small>'''광역자치단체'''</small>
| width=16.6% colspan="2"  style="background:#506597; color:#fff;" | <small>'''기초자치단체'''</small>
| width=16.6% colspan="2"  style="background:#6176a8; color:#fff;" | '''3단계'''
| width=16.6% colspan="2"  style="background:#7287b9; color:#fff;" | '''4단계'''
| width=16.6% colspan="2"  style="background:#8398ca; color:#fff;" | '''5단계'''
| width=16.6% colspan="2"  style="background:#94a9db; color:#fff;" | '''6단계'''
|-
|-
| width=16.6% colspan="2" |
| width=16.6% colspan="2" |
| width=16.6% colspan="2" |
| width=16.6% colspan="2" |
| width=16.6% colspan="2" |
| width=16.6% colspan="2" |
|-
| colspan="2" rowspan="3" width=33.3% style="background:#405486; color:#fff;" | 부
| width=16.6% style="background:#506597; color:#fff;" colspan="2" | 구
| width=16.6% style="background:#6176a8; color:#fff;" colspan="2" | 동
| width=16.6% style="background:#7287b9; color:#fff;" colspan="2" | 통
| width=16.6% rowspan="3" colspan="2" style="background:#8398ca; color:#fff;" colspan="4" | 반
|-
| rowspan="2" width=16.6% style="background:#506597; color:#fff;" colspan="2" | 군
| width=16.6% style="background:#6176a8; color:#fff;" colspan="2" | 읍
| rowspan="2" width=16.6% style="background:#7287b9; color:#fff;" colspan="2" | 리
|-
| width=16.6% style="background:#6176a8; color:#fff;" colspan="2" | 면
|-
| colspan="2" rowspan="15" width=33.3% style="background:#405486; color:#fff;" | 도
| width=16.6% style="background:#506597; color:#fff;" rowspan="9" colspan="2" | 부
| width=16.6% rowspan="4" style="background:#6176a8; color:#fff;" colspan="2" | 시
| width=16.6% style="background:#7287b9; color:#fff;" colspan="4" | 동
| width=16.6% rowspan="9" style="background:#94a9db; color:#fff;" colspan="2" | 반
|-
| width=16.6% style="background:#7287b9; color:#fff;" colspan="2" | 구
| width=16.6% style="background:#8398ca; color:#fff;" colspan="2" | 동
|-
| width=16.6% style="background:#7287b9; color:#fff;" colspan="2" | 읍
| width=16.6% rowspan="2" style="background:#8398ca; color:#fff;" | 리
|-
| width=16.6% style="background:#7287b9; color:#fff;" colspan="2" | 면
|-
| rowspan="2" width=16.6% style="background:#6176a8; color:#fff;" colspan="2" | 군
| width=16.6% style="background:#7287b9; color:#fff;" colspan="2" | 읍
| width=16.6% rowspan="2" style="background:#8398ca; color:#fff;" colspan="2" | 리
|-
| width=16.6% style="background:#7287b9; color:#fff;" colspan="2" | 면
|-
| width=16.6% style="background:#6176a8; color:#fff;" rowspan="3" colspan="2" | 구
| width=16.6% style="background:#7287b9; color:#fff;" colspan="2" | 동
| width=16.6% style="background:#8398ca; color:#fff;" colspan="2" | 통
|-
| width=16.6% style="background:#7287b9; color:#fff;" colspan="2" | 읍
| width=16.6% rowspan="2" style="background:#8398ca; color:#fff;" colspan="2" | 리
|-
| width=16.6% style="background:#7287b9; color:#fff;" colspan="2" | 면
|-
| width=16.6% style="background:#506597; color:#fff;" rowspan="4" colspan="2" | 시
| width=16.6% colspan="4" style="background:#6176a8; color:#fff;" | 동
| width=16.6% rowspan="2" style="background:#8398ca; color:#fff;" colspan="2" | 통
| width=16.6% rowspan="4" style="background:#94a9db; color:#fff;" colspan="2" | 반
|-
| width=16.6% style="background:#6176a8; color:#fff;" colspan="2" | 구
| width=16.6% style="background:#7287b9; color:#fff;" colspan="2" | 동
|-
| width=16.6% style="background:#6176a8; color:#fff;" colspan="2" | 읍
| width=16.6% colspan="2" rowspan="2" style="background:#7287b9; color:#fff;" colspan="4" | 리
|-
| width=16.6% style="background:#6176a8; color:#fff;" colspan="2" | 면
|-
| width=16.6% style="background:#506597; color:#fff;" rowspan="2" colspan="2" | 군
| width=16.6% style="background:#6176a8; color:#fff;" colspan="2" | 읍
| width=16.6% rowspan="2" colspan="2"  style="background:#7287b9; color:#fff;" colspan="4" | 리
| width=16.6% rowspan="2" style="background:#94a9db; color:#fff;" colspan="2" | 반
|-
| width=16.6% style="background:#6176a8; color:#fff;" colspan="2" | 면
|-
|}</div></div>
|}
{{-}}