|
|
| 1번째 줄: |
1번째 줄: |
| 레웨걸용 연습장 | | 레웨걸용 연습장 |
|
| |
| == ==
| |
| <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>
| |
|
| |
|
| == 대형사철 == | | == 대형사철 == |
레웨걸용 연습장
대형사철
대한철도
(수도권)
한성메트로
네오트랜스
경진철도
대원철도
경기철도
강화철도
경동철도
(동남권)
(평양권)
평양메트로
수도권
- 한성메트로 (사철)
- 한성도시철도공사
- 한성부메트로9호선 (사철)
- 안산전철 (사철)
- 분당급행전철 (사철)
- 철도청
- 서해철도
수도권 사철
만철
일본 국철
2
김유성
金流盛 | Kim yu-sŏng
|
|
|
| △ 양유진의 김유성 코스프레 [1]
|
| 나이
|
18세
|
혈액형
|
B형
|
| 신장
|
162㎝
|
체중
|
45㎏
|
| 생년
|
2009년
5월 12일
|
성별
|
여성
|
| 국적
|
대한제국
|
쓰는 손
|
오른손
|
| 출신지
|
평안북도 선천시
|
거주지
|
경기도 시흥부
|
| 다른 이름
|
류세이 (リュウセイ)
메테오 (メテオ)
|
| 학력
|
상반중학교 (전학)
일직중학교 (졸업)[2]
금천공업고등학교 (재학 중)
|
| 가족
|
김구성 (아버지)
이세류 (어머니)
김유미 (여동생)
김유한 (남동생)
|
| 취미
|
철도 덕질, 사진 찍기, 자전거 타기, 트위터 하기, 트친들과 놀러다니기
|
3
| 대한제국 행정구역 단계
|
| 광역자치단체
|
기초자치단체
|
3단계
|
4단계
|
5단계
|
6단계
|
|
|
|
|
|
|
|
| 부
|
구
|
동
|
통
|
반
|
| 군
|
읍
|
리
|
| 면
|
| 도
|
부
|
시
|
동
|
반
|
| 구
|
동
|
| 읍
|
리
|
| 면
|
| 군
|
읍
|
리
|
| 면
|
| 구
|
동
|
통
|
| 읍
|
리
|
| 면
|
| 시
|
동
|
통
|
반
|
| 구
|
동
|
| 읍
|
리
|
| 면
|
| 군
|
읍
|
리
|
반
|
| 면
|
|
- ↑ 작가의 역량 부족으로(...) 일러를 구할 수가 없어서 임시로 사용하는 사진이다... 일러를 구한다면 바로 교체될 것
- ↑ 시흥부 일직동 소재, 현실의 경상북도 안동시 일직면에 있는 일직중학교와는 연관없는 가상의 중학교이다.
