HTML Editor

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>붙여넣으면, 링크가 됩니다</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css">
  <style>
    :root { --ink:#1c1c1c; --sub:#8a8a85; --line:#e7e7e3; --bg:#fdfdfc; }
    * { box-sizing:border-box; margin:0; }
    body {
      font-family:"Pretendard Variable",Pretendard,-apple-system,sans-serif;
      background:var(--bg); color:var(--ink);
      line-height:1.75; -webkit-font-smoothing:antialiased;
      padding:96px 24px;
    }
    main { max-width:600px; margin:0 auto; }
    h1 { font-size:2.2rem; font-weight:700; letter-spacing:-0.03em; line-height:1.25; }
    .lede { margin-top:16px; color:var(--sub); font-size:1.1rem; }
    hr { border:none; border-top:1px solid var(--line); margin:40px 0; }
    p { margin-bottom:14px; }
    .step { display:flex; gap:14px; margin-bottom:18px; }
    .num {
      flex-shrink:0; width:26px; height:26px; border-radius:50%;
      border:1px solid var(--line); display:flex; align-items:center;
      justify-content:center; font-size:0.85rem; color:var(--sub);
    }
    .step p { margin:0; padding-top:1px; }
    footer { margin-top:56px; color:var(--sub); font-size:0.85rem; }
  </style>
</head>
<body>
  <main>
    <h1>여기, 이 자리를<br>당신의 것으로 지우세요.</h1>
    <p class="lede">이건 예시입니다. AI로 만든 HTML이나 마크다운을 왼쪽에 붙여넣으면, 이 화면이 바로 당신의 것으로 바뀝니다.</p>

<hr>

<div class="step"><span class="num">1</span><p>ChatGPT·Claude·Gemini에게 원하는 걸 만들어 달라고 하세요.</p></div>
    <div class="step"><span class="num">2</span><p>결과물을 복사해 왼쪽 편집기에 붙여넣습니다.</p></div>
    <div class="step"><span class="num">3</span><p>'URL 생성' — 끝. 링크 하나가 당신 손에 있습니다.</p></div>

<footer>붙여넣으면, 링크가 됩니다. — onepage</footer>
  </main>
</body>
</html>

미리보기

실시간