초보자들이 헷갈리기 쉬운 주석(Comment) 처리 방법을 HTML, CSS, JavaScript, PHP 각 언어별로 정리해서
📌 쉽게 배우고 바로 쓸 수 있도록 비교 자료 + 예제 포함해서 알려드릴게요!
🧠 **주석(Comment)**이란?
코드에 대한 설명을 적지만, 실행되지 않는 부분
❗ 즉, 브라우저나 서버는 무시하고 개발자끼리 이해하기 위해 쓰는 글!
🔧 언어별 주석 처리 방법 + 예제
언어 한 줄 주석 여러 줄 주석 예제
🔷 1. HTML
항목 설명
| 한 줄 주석 | ❌ 없음 |
| 여러 줄 주석 | <!-- 내용 --> |
<!-- 이건 HTML 주석입니다 -->
<p>안녕하세요!</p>
<!-- <p>이건 보이지 않아요</p> -->
🎨 2. CSS
항목 설명
| 한 줄 주석 | ❌ 없음 (지원 안함) |
| 여러 줄 주석 | /* 내용 */ |
/* 이건 CSS 주석입니다 */
body {
background-color: lightblue; /* 배경색 지정 */
}
📜 3. JavaScript
항목 설명
| 한 줄 주석 | // |
| 여러 줄 주석 | /* 내용 */ |
// 이건 한 줄짜리 JS 주석입니다
/*
이건 여러 줄 JS 주석입니다
복잡한 설명에 사용해요
*/
console.log("Hello World"); // 콘솔 출력
🐘 4. PHP
항목 설명
| 한 줄 주석 | // 또는 # |
| 여러 줄 주석 | /* 내용 */ |
<?php
// 한 줄 주석
# 이것도 한 줄 주석입니다
/*
여러 줄 주석입니다
여러 줄을 무시할 때 유용해요
*/
echo "안녕하세요!";
?>
📊 한눈에 비교표
언어 한 줄 주석 여러 줄 주석
| HTML | ❌ 없음 | <!-- 내용 --> |
| CSS | ❌ 없음 | /* 내용 */ |
| JavaScript | // 내용 | /* 내용 */ |
| PHP | // 또는 # | /* 내용 */ |
💬 팁
- 주석은 코드의 설명서입니다.
✍️ 협업할 때, 나중에 내가 봐도 이해가 되도록 적어두세요! - 긴 설명은 여러 줄 주석,
간단한 코멘트는 한 줄 주석으로 쓰면 좋아요 😊
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML/CSS/JS/PHP 주석 처리 방법</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
body {
background-color: #f4f7fa;
font-family: 'Noto Sans KR', sans-serif;
}
.comment-card {
background-color: #ffffff;
border: 1px solid #dee2e6;
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.code-block {
background-color: #212529;
color: #f8f9fa;
padding: 15px;
border-radius: 6px;
font-family: monospace;
font-size: 0.95rem;
white-space: pre-wrap;
margin-top: 10px;
}
.section-title {
color: #007bff;
margin-top: 40px;
margin-bottom: 20px;
}
table th, table td {
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="container py-5">
<h1 class="text-center mb-4">💬 HTML / CSS / JS / PHP 주석 처리 방법</h1>
<p class="text-center fs-5 mb-5">초보자를 위한 설명 + 예제 비교</p>
<!-- 개념 설명 -->
<div class="comment-card">
<h4>🧠 주석(Comment)이란?</h4>
<p>코드 안에 <strong>설명을 작성하되, 실행되지 않도록</strong> 만드는 것!</p>
<p>❗ 개발자끼리 소통하거나, 나중을 위해 메모해두는 용도로 사용돼요.</p>
</div>
<!-- HTML 주석 -->
<div class="comment-card">
<h4 class="section-title">🔷 HTML 주석</h4>
<p><strong>여러 줄만 가능</strong>하며 이렇게 작성합니다:</p>
<div class="code-block">
<!-- 이건 HTML 주석입니다 -->
<p>안녕하세요!</p>
<!-- <p>이건 보이지 않아요</p> -->
</div>
</div>
<!-- CSS 주석 -->
<div class="comment-card">
<h4 class="section-title">🎨 CSS 주석</h4>
<p><strong>한 줄 / 여러 줄 모두 가능</strong>, 스타일 코드 중간에도 사용 가능</p>
<div class="code-block">
/* 이건 CSS 주석입니다 */
body {
background-color: lightblue; /* 배경색 지정 */
}
</div>
</div>
<!-- JavaScript 주석 -->
<div class="comment-card">
<h4 class="section-title">📜 JavaScript 주석</h4>
<p><strong>//</strong>은 한 줄, <strong>/* */</strong>은 여러 줄</p>
<div class="code-block">
// 한 줄 주석입니다
/*
여러 줄 주석입니다
설명을 자세히 쓸 때 좋아요
*/
console.log("Hello World"); // 콘솔 출력
</div>
</div>
<!-- PHP 주석 -->
<div class="comment-card">
<h4 class="section-title">🐘 PHP 주석</h4>
<p><strong>//, #, /* */</strong> 모두 지원합니다!</p>
<div class="code-block">
<?php
// 한 줄 주석
# 이것도 한 줄 주석입니다
/*
여러 줄 주석입니다
*/
echo "안녕하세요!";
?>
</div>
</div>
<!-- 비교표 -->
<div class="comment-card">
<h4 class="section-title">📊 한눈에 비교!</h4>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead class="table-light">
<tr>
<th>언어</th>
<th>한 줄 주석</th>
<th>여러 줄 주석</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML</td>
<td>❌ 없음</td>
<td><!-- 내용 --></td>
</tr>
<tr>
<td>CSS</td>
<td>❌ 없음</td>
<td>/* 내용 */</td>
</tr>
<tr>
<td>JavaScript</td>
<td>// 내용</td>
<td>/* 내용 */</td>
</tr>
<tr>
<td>PHP</td>
<td>// 또는 #</td>
<td>/* 내용 */</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 결론 -->
<div class="comment-card text-center bg-light">
<h5>✅ 마무리 요약</h5>
<p class="mb-0">주석은 코드 실행에는 영향 없지만, <strong>개발자에게는 필수 도구!</strong> 🎯</p>
</div>
</div>
</body>
</html>반응형
'웹제작 강의' 카테고리의 다른 글
| [웹개발강의] HTML 대표 태그 30선 – 초보자용 설명과 예시 (0) | 2025.04.09 |
|---|---|
| [웹개발강의] CSS, JS 코드가 들어 있어도 왜 "HTML 문서"라고 부르나요? (0) | 2025.04.08 |
| [웹개발강의] <div>와 <span> 태그의 차이점은 웹 개발자라면 꼭 알아야 하는 기본 중 기본 (0) | 2025.04.07 |
| [웹개발강의] 건물짓는 것에 비유하면, CSS = 인테리어 + 디자인 (0) | 2025.04.07 |
| CSS 도우미 도구: 부트스트랩(Bootstrap) vs 테일윈드(Tailwind CSS) (0) | 2025.04.06 |
