HTML-101 #3. 주석 및 명명 규칙
Source: Dev.to
Introduction
HTML을 배우면서 HTML‑101 시리즈의 일환으로 여정을 공개적으로 기록하고 있습니다. 이 시리즈는 초보자를 위한 탐구로, 내가 이해한 내용, 헷갈리는 점, 그리고 배우는 것을 공유합니다.
이번 포스트에서는 다음을 다룹니다:
- HTML 주석이란 무엇인가
- HTML 주석의 문법
- 기본 예시
- 중요한 규칙 및 제한 사항
- HTML 주석 vs. CSS 주석 vs. JavaScript 주석
- HTML 파일 명명 규칙 (표준 홈페이지 이름, 일반적인 관례)
모든 노트, 예시, 연습 코드는 GitHub 저장소에서 확인할 수 있습니다:
https://github.com/dmz-v-x/html-101
HTML Comments
Definition
주석은 코드 내에 목적, 로직, 혹은 이력을 설명하는 텍스트 주석입니다. 개발자에게는 보이지만 렌더링 시 무시되며, 렌더링된 웹 페이지에는 표시되지 않습니다. 그러나 주석 처리된 HTML도 브라우저에 전송되므로, 주석에 기밀 데이터를 넣지 않도록 주의하세요.
Syntax
<!-- comment --><!--와 --> 사이에 있는 모든 내용은 브라우저에 의해 무시됩니다.
Basic Examples
<!-- My Website -->
<h1>Hello World</h1>Important Rules & Limitations
-
중첩 금지 – 주석은 중첩될 수 없습니다. 다음과 같은 코드는 잘못된 것이며 HTML을 깨뜨립니다:
<!-- --> -
보안에 취약 – 주석은 브라우저의 개발자 도구에서 확인할 수 있습니다. 절대 민감한 정보(예: 비밀번호)를 주석에 저장하지 마세요.
-
임시 비활성화 – 주석은 설명용으로 사용하고, 큰 코드 블록을 영구적으로 비활성화하는 용도로는 사용하지 마세요.
Comment Syntax in Other Languages
| 언어 | 주석 문법 |
|---|---|
| HTML | <!-- comment --> |
| CSS | /* comment */ |
| JavaScript | // comment /* comment */ |
HTML File Naming Convention
Standard Homepage Name
기본 홈페이지 파일은 index.html(소문자, 공백 없음)으로 명명해야 합니다.
Common File Naming Conventions
- 소문자만 사용합니다.
- 단어 구분은 밑줄(
_)보다 하이픈(-)을 사용합니다. - 파일 이름에 공백을 넣지 않습니다.
예시
about-us.html✅contact-page.html✅
File Types Examples
| 유형 | 예시(s) |
|---|---|
| 메인 페이지 | index.html |
| CSS | style.css, main.css |
| JavaScript | script.js, app.js |
| 이미지 | hero.jpg, logo.png |
Takeaways
- HTML 주석은 문서화에 유용하지만 여전히 브라우저에 전송되므로 민감한 데이터를 포함하지 않도록 합니다.
- 파일은 일관된 소문자, 하이픈 구분 명명 방식을 따르고, 홈페이지는
index.html로 지정합니다.
Next Post
다음 포스트에서는 헤딩, 단락 및 줄 바꿈을 다루며, 새로운 노트를 GitHub 저장소에 계속 업데이트할 예정입니다.
Repository: https://github.com/dmz-v-x/html-101