HTML & CSS
Chapter 1-4. HTML 기본 문법(HTML/CSS)
Chansman
2025. 3. 28. 11:44
🚀 HTML 기본 문법 완벽 정리 및 실습 가이드
HTML은 웹 페이지를 구성하는 기본적인 언어로, 웹 페이지의 구조를 정의하고 콘텐츠(텍스트, 이미지, 영상 등)를 표현하는 데 사용됩니다. 이번 강의에서는 HTML의 가장 핵심적인 요소인 태그, 속성, 주석에 대해 학습하고, 직접 코드를 작성하며 개념을 익혀 보겠습니다.
📌 1. HTML 태그(Tag)의 개념과 기본 구성
태그는 HTML에서 웹 페이지의 구조와 콘텐츠를 정의하는 핵심 요소입니다.
태그의 기본 구조는 다음과 같습니다:
<태그명>콘텐츠</태그명>- 여는 태그 (시작 태그): <태그명>
- 닫는 태그 (끝 태그): </태그명>
- 콘텐츠: 태그 안에 들어가는 실제 내용(텍스트, 이미지 등)
✅ 예시
<p>안녕하세요!</p>- 위의 예시에서 <p>는 여는 태그, </p>는 닫는 태그, 안녕하세요!는 콘텐츠입니다.
- 결과는 텍스트가 화면에 표시됩니다.
📌 2. 단일 태그 (Self-closing Tag)
일부 태그는 콘텐츠를 포함하지 않고 단독으로 사용됩니다. 이를 단일 태그라고 합니다.
✅ 예시
<br> <!-- 줄바꿈 -->
<hr> <!-- 수평선 -->- 단일 태그는 시작 태그와 닫는 태그가 없으며, 기능만 수행합니다.
- 다음과 같은 형태로 표현할 수 있습니다. (두 형태 모두 가능)
<br>
또는
<br/>📌 3. 태그 작성 시 주의 사항 ⚠️
- 태그명은 반드시 소문자로만 작성합니다.
- HTML 표준에 따라 태그 이름은 소문자만 사용합니다.
- 여는 태그와 닫는 태그를 정확히 입력합니다.
- 시작과 끝을 명확하게 구분해야 정확한 HTML 구조가 완성됩니다.
- 태그 안에 또 다른 태그를 포함할 수 있습니다.
- 예시: <div><p>안녕하세요</p></div>
- 들여쓰기를 반드시 활용합니다.
- 코드의 가독성을 높여 코드 작성과 수정이 편리해집니다.
✅ 올바른 들여쓰기 예시
<div>
<p>내용</p>
</div>📌 4. HTML 속성(Attribute)의 개념과 사용법
속성은 태그에 추가로 부여하는 기능입니다.
태그의 시작 태그에 위치하며, 필수가 아닌 선택사항입니다.
기본 구조는 다음과 같습니다:
<태그명 속성명="속성값">콘텐츠</태그명>- 여러 속성을 추가할 때는 공백으로 구분합니다.
✅ 예시
<p style="color:red;">빨간색 텍스트</p>- 위 예시에서 style이 속성명, "color:red;"는 속성값입니다.
- 결과적으로 콘텐츠의 색상이 빨간색으로 변경됩니다.
🔸 속성의 종류
- 화면상 변화를 일으키는 속성: 스타일(style), 너비(width) 등
- 화면상 변화가 없는 속성: 아이디(id), 클래스(class) 등
(나중에 CSS, JavaScript에서 활용됨)
✅ 여러 속성 추가 예시
<p style="color:blue;" id="intro">파란색 텍스트, 아이디 부여</p>📌 5. HTML 주석(Comment)의 개념과 작성법
주석은 코드 안에서 메모를 남길 때 사용하며, 브라우저 화면에 표시되지 않습니다.
- 개발자만 볼 수 있고, 컴퓨터는 해석하지 않습니다.
✅ 주석 작성 예시
<!-- 이 내용은 주석입니다. 화면에는 표시되지 않아요! -->🔸 주석 사용의 장점
- 코드를 나중에 이해하거나 다른 사람과 협업할 때 코드의 의도를 전달하는 용도로 사용됩니다.
- 디버깅 시 특정 코드를 일시적으로 비활성화할 때 유용합니다.
✅ 주석 활용 예시
<p>안녕하세요</p>
<!-- <p>이 내용은 화면에 나오지 않습니다.</p> -->🖥️ 실습 예제 (VS 코드 활용)
다음은 실제로 VS 코드에서 HTML을 작성하고, 라이브 서버로 결과를 확인하는 과정입니다.
✅ 실습 코드 예시
<!-- HTML 기본 태그와 속성 예시 -->
<p>안녕하세요, 여러분!</p>
<hr>
<!-- 스타일 속성 적용 예시 -->
<p style="color:red;" id="text">빨간색으로 표시되는 텍스트</p>
<!-- 주석 처리된 태그 -->
<!-- <p>이 태그는 화면에 나타나지 않습니다.</p> -->🔹 실습 단계
- VS 코드에서 위 코드를 작성하고 저장합니다.
- 라이브 서버(Go Live)를 실행하여 웹 브라우저에서 결과를 확인합니다.
- 태그와 속성의 변화를 실시간으로 확인하며 학습합니다.
🚩 최종 학습 요약 및 복습 체크리스트
다음의 항목을 기억하고 있는지 확인하세요:
✅ 태그의 기본 구성 요소
✅ 단일 태그의 정의와 사용법
✅ 태그 작성 시 주의사항 (소문자, 정확한 시작과 끝 태그)
✅ 속성의 개념과 여러 속성 추가 방법
✅ 주석의 용도와 작성법
✅ 들여쓰기의 중요성 (코드 가독성 증가)
📚 핵심 용어 복습
용어설명
| HTML | 웹페이지의 뼈대, 구조를 만드는 언어 |
| 태그(Tag) | 웹페이지 구조와 콘텐츠를 정의하는 핵심 요소 |
| 속성(Attribute) | 태그에 부가적 기능을 부여하는 기능 |
| 주석(Comment) | 화면에 보이지 않고 코드 설명이나 메모를 추가하는 요소 |
| 여는 태그 | 태그 시작을 나타내는 태그 |
| 닫는 태그 | 태그 끝을 나타내는 태그 |
| 콘텐츠 | 태그 내부에 들어가는 내용(텍스트, 이미지 등) |
| 단일 태그 | 콘텐츠 없이 기능만 수행하는 태그 |
| 들여쓰기 | 코드 가독성을 높이기 위한 공백 처리 방식 |
🎯 마무리하며
이번 강의를 통해 HTML의 가장 기초적이고 중요한 요소들을 익혔습니다. 이제 여러분은 HTML 태그, 속성, 주석을 이용하여 웹 페이지의 기본적인 구조를 만들 수 있습니다.
"백문이 불여일타!" 이 내용을 실제로 타이핑하며 직접 확인해보세요.
지금부터 여러분만의 웹 페이지를 하나씩 만들어 봅시다! 👏✨