연습장: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;
  background: var(--bg);
  color: var(--text);
  padding: 16px;
  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);
}

.post.read .title {
  color: var(--subtext);
}

.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 = JSON.parse(localStorage.getItem("posts") || "[]");
let read = JSON.parse(localStorage.getItem("read") || "{}");
let currentPostId = null;

function save() {
  localStorage.setItem("posts", JSON.stringify(posts));
  localStorage.setItem("read", JSON.stringify(read));
}

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;
  }

  posts.unshift({ id: Date.now(), nick, pass, t, c });
  save();

  nicknameInput.value = "";
  passwordInput.value = "";
  titleInput.value = "";
  contentInput.value = "";

  render();
}

function render() {
  list.innerHTML = "";
  posts.forEach(p => {
    const d = document.createElement("div");
    d.className = "post" + (read[p.id] ? " read" : "");
    d.innerHTML = `
      <div class="title">${p.t}</div>
      <div class="meta">작성자: ${p.nick}</div>
    `;
    d.onclick = () => openPost(p.id);
    list.appendChild(d);
  });
}

function openPost(id) {
  const p = posts.find(x => x.id === id);
  if (!p) return;

  currentPostId = id;
  modal.style.display = "flex";
  modalTitle.innerText = p.t;
  modalNickname.innerText = "작성자: " + p.nick;
  modalContent.innerText = p.c;

  read[id] = true;
  save();
  render();
}

function deletePost() {
  const p = posts.find(x => x.id === currentPostId);
  if (!p) return;

  const input = prompt("비밀번호를 입력하세요");
  if (input !== p.pass) {
    alert("비밀번호가 틀렸습니다.");
    return;
  }

  posts = posts.filter(x => x.id !== currentPostId);
  delete read[currentPostId];
  save();
  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>
|}
{{-}}