HTML 뼈대와 미리보기 계약

이 사이트에서 웹이란

/preview/에서 HTML·CSS·JS 파일을 합쳐 sandbox iframe에 넣습니다.
부모 페이지 쿠키에는 접근하지 못하고, 네트워크도 CSP로 제한될 수 있습니다.

최소 HTML

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>연습</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1 id="title">안녕</h1>
    <button type="button" id="btn">눌러</button>
    <script src="main.js"></script>
  </body>
</html>

멀티파일일 때 사이트는 파일을 합칩니다. 경로는 미리보기 규칙에 맞게 두세요.

시맨틱 태그

header main section button label을 쓰면 구조가 읽기 쉽습니다.
장식만 div로 쌓지 마세요.

접근성 한 줄

버튼은 <div onclick> 대신 <button type="button">.
이미지는 의미 있으면 alt를 넣습니다.

보안 감각

미리보기는 연습용입니다. 사용자 입력을 innerHTML에 그대로 넣지 않는 습관을 들이세요.
연습이라도 textContent가 더 안전합니다.

파일 역할

파일	역할
HTML	구조·텍스트·버튼
CSS	색·간격·배치
JS	클릭·입력 반응

폼 없이 버튼

type="button"을 명시하지 않으면 폼 안에서 submit이 될 수 있습니다.

미리보기 디버그

iframe 안에서 깨지면, 합쳐진 HTML을 상상하며 태그 닫힘을 확인하세요.
CSS가 안 먹으면 선택자·파일 연결을 의심합니다.