Comments and neat nesting · 주석 및 깔끔한 중첩
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · 이 페이지는 최신 브라우저(SharedArrayBuffer 지원)가 필요합니다. Chrome, Edge, Firefox 또는 Safari를 최신 버전으로 업데이트해 주세요.
English
Comments
- A comment is a note for you, not for the reader.
- The browser ignores it — it never shows on the page.
- Write it like this:
<!-- this is a comment -->.
한국어
주석
- 주석(comment) 은 독자가 아닌 본인을 위한 메모입니다.
- 브라우저는 ** 무시**하므로 페이지에 절대 표시되지 않습니다.
- 이렇게 작성하세요:
<!-- this is a comment -->.
<!-- The header goes here -->
<h1>Welcome</h1>
<!-- TODO: add a photo below -->
English
Tags go inside tags
- HTML tags nest: one pair can sit inside another.
- A
<div>is a plain box you can put other things in. - Indent the inside tags a little, so the nesting is easy to read.
한국어
태그는 태그 안에 들어갑니다
- HTML 태그는 중첩 nest됩니다 — 하나의 쌍이 다른 쌍 안에 위치할 수 있습니다.
<div>는 다른 요소를 넣을 수 있는 평범한 상자입니다.- 중첩이 쉽게 읽히도록 안쪽 태그를 몇 자만큼 들여씁니다.
<div>
<h2>My card</h2>
<p>Some text inside the box.</p>
</div>
English
Common mistakes
- Tags must nest, not overlap:
<b><i>x</i></b>, never<b><i>x</b></i>. - A comment is
<!-- ... -->and is ignored by the browser.
한국어
흔한 실수
- 태그는 중첩되어야 하며 겹치지 않아야 합니다:
<b><i>x</i></b>, 절대<b><i>x</b></i>이 아닙니다. - 주석은
<!-- ... -->이며 브라우저에 의해 무시됩니다.
English
Now you try
- Comments help you stay organised; nesting builds structure.
- Leave a comment, then nest a paragraph inside a
<div>.
한국어
이제 직접 해보기
- 주석은 정리하는 데 도움이 되고, 중첩은 구조를 만듭니다.
- 주석을 남긴 뒤,
<div>안에 문단을 중첩하세요.
Explore · 탐색하기
Neat nesting = the tree · 깔끔한 중첩 = 트리 구조
Indentation in your HTML mirrors the parent/child tree. · HTML의 네이밍 indentation은 parent/child 트리를 반영합니다.
Leave a note for yourself. Add a comment, like <!-- TODO: add a photo -->. · 나를 위한 메모를 남기십시오. <!-- TODO: add a photo -->와 같은 주석을 추가하십시오.
Put the paragraph inside a box. Wrap it in a <div> … </div>. · 문단을 상자 안에 넣으십시오. <div> … </div>로 감싸십시오.