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