developer tool

Slack HTML 미리보기

슬랙에서 공유받은 HTML을 그대로 붙여 넣고, 실제 웹페이지 형태와 반응형 화면을 바로 확인합니다. 입력 내용은 서버로 전송되지 않습니다.

미리보기는 격리된 영역에서 실행됩니다. JavaScript는 기본적으로 차단되어 있어요.

HTML 입력

Slack 코드 블록(```html)도 자동으로 제거합니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Product update</title>
    <style>
      * { box-sizing: border-box; }
      body {
        min-height: 100vh;
        margin: 0;
        display: grid;
        place-items: center;
        padding: 32px;
        color: #e2e8f0;
        font-family: Inter, Pretendard, system-ui, sans-serif;
        background:
          radial-gradient(circle at 20% 20%, #0ea5e955, transparent 34%),
          linear-gradient(145deg, #020617, #0f172a 58%, #082f49);
      }
      .card {
        width: min(680px, 100%);
        padding: 44px;
        border: 1px solid #ffffff24;
        border-radius: 28px;
        background: #ffffff10;
        box-shadow: 0 28px 80px #02061780;
        backdrop-filter: blur(20px);
      }
      .tag {
        display: inline-flex;
        padding: 7px 12px;
        border-radius: 999px;
        color: #7dd3fc;
        background: #0ea5e91f;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
      }
      h1 { margin: 22px 0 14px; font-size: clamp(34px, 7vw, 64px); line-height: .98; }
      p { margin: 0; color: #94a3b8; font-size: 17px; line-height: 1.75; }
      button {
        margin-top: 28px;
        padding: 12px 18px;
        border: 0;
        border-radius: 12px;
        color: white;
        font-weight: 800;
        background: linear-gradient(135deg, #0ea5e9, #14b8a6);
      }
    </style>
  </head>
  <body>
    <main class="card">
      <span class="tag">Preview ready</span>
      <h1>Slack에서 받은 HTML을 바로 확인하세요.</h1>
      <p>HTML, CSS를 한 번에 붙여 넣고 데스크톱부터 모바일까지 빠르게 미리볼 수 있습니다.</p>
      <button type="button">시작하기</button>
    </main>
  </body>
</html>

1,830자

미리보기

데스크톱 · 100%

JavaScript

렌더링 중

Slack 복사에 최적화

```html 코드 펜스가 포함되어도 자동으로 걷어내고 렌더링합니다.

반응형 빠른 확인

데스크톱, 태블릿, 모바일 폭을 한 번의 클릭으로 전환합니다.

브라우저 안에서 처리

붙여 넣은 코드는 서버에 저장하거나 전송하지 않고 격리해 표시합니다.