연습장:Yuc/4: 두 판 사이의 차이

  • 최근 수정 시각: 2026년 2월 2일 (월) 17:23
  • 위키의 문서를 이용할 때에는 문서의 라이선스를 확인하세요. 자세한 내용은 이용 약관을 참고하세요.
    이용자 보호 창구 | evewiki.kr@gmail.com후원계좌 | 100-152-076102 케이뱅크 김성보
편집 토론 문서 역사
< 연습장:Yuc
← 이전 편집다음 편집 →
시각위키텍스트
Yuc (토론 | 기여)
2,970 편집
편집 요약 없음
Yuc (토론 | 기여)
2,970 편집
편집 요약 없음
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>


== 대형사철 ==
== 대형사철 ==

2026년 2월 2일 (월) 17:23 판

레웨걸용 연습장

테스트

커뮤니티

대형사철

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

(평양권) 평양메트로

수도권

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

수도권 사철

  • 네오트랜스
    • 신분당선
    • 신일산선
  • 새서울철도
    • 신용산선
  • 경진철도
    • 사당선
  • 경기철도
  • 대원철도
  • 경인급행전철
    • 신경인선
  • 강화철도
    • 강화본선
  • 경동철도
    • 경동본선

만철

일본 국철

2

김유성
金流盛 | Kim yu-sŏng
△ 양유진의 김유성 코스프레
[1]
나이 18세 혈액형 B형
신장 162㎝ 체중 45㎏
생년 2009년
5월 12일 		성별 여성
국적 대한제국 쓰는 손 오른손
출신지 평안북도 선천시 거주지 경기도 시흥부
다른 이름 류세이 (リュウセイ)
메테오 (メテオ)
학력 상반중학교 (전학)
일직중학교 (졸업)[2]
금천공업고등학교 (재학 중)
가족 김구성 (아버지)
이세류 (어머니)
김유미 (여동생)
김유한 (남동생)
취미 철도 덕질, 사진 찍기, 자전거 타기, 트위터 하기, 트친들과 놀러다니기



3

대한제국 행정구역 단계
[ 펼치기 · 접기 ]
광역자치단체 기초자치단체 3단계 4단계 5단계 6단계
부 구 동 통 반
군 읍 리
면
도 부 시 동 반
구 동
읍 리
면
군 읍 리
면
구 동 통
읍 리
면
시 동 통 반
구 동
읍 리
면
군 읍 리 반
면
  1. ↑ 작가의 역량 부족으로(...) 일러를 구할 수가 없어서 임시로 사용하는 사진이다... 일러를 구한다면 바로 교체될 것
  2. ↑ 시흥부 일직동 소재, 현실의 경상북도 안동시 일직면에 있는 일직중학교와는 연관없는 가상의 중학교이다.