Chapter 1-4. HTML 기본 문법(HTML/CSS)

🚀 HTML 기본 문법 완벽 정리 및 실습 가이드

HTML은 웹 페이지를 구성하는 기본적인 언어로, 웹 페이지의 구조를 정의하고 콘텐츠(텍스트, 이미지, 영상 등)를 표현하는 데 사용됩니다. 이번 강의에서는 HTML의 가장 핵심적인 요소인 태그, 속성, 주석에 대해 학습하고, 직접 코드를 작성하며 개념을 익혀 보겠습니다.

---

📌 1. HTML 태그(Tag)의 개념과 기본 구성

태그는 HTML에서 웹 페이지의 구조와 콘텐츠를 정의하는 핵심 요소입니다.
태그의 기본 구조는 다음과 같습니다:

<태그명>콘텐츠</태그명>

• 여는 태그 (시작 태그): <태그명>
• 닫는 태그 (끝 태그): </태그명>
• 콘텐츠: 태그 안에 들어가는 실제 내용(텍스트, 이미지 등)

✅ 예시

<p>안녕하세요!</p>

• 위의 예시에서 <p>는 여는 태그, </p>는 닫는 태그, 안녕하세요!는 콘텐츠입니다.
• 결과는 텍스트가 화면에 표시됩니다.

---

📌 2. 단일 태그 (Self-closing Tag)

일부 태그는 콘텐츠를 포함하지 않고 단독으로 사용됩니다. 이를 단일 태그라고 합니다.

✅ 예시

<br> <!-- 줄바꿈 -->
<hr> <!-- 수평선 -->

• 단일 태그는 시작 태그와 닫는 태그가 없으며, 기능만 수행합니다.
• 다음과 같은 형태로 표현할 수 있습니다. (두 형태 모두 가능)

<br>
또는
<br/>

---

📌 3. 태그 작성 시 주의 사항 ⚠️

1. 태그명은 반드시 소문자로만 작성합니다.
   • HTML 표준에 따라 태그 이름은 소문자만 사용합니다.
2. 여는 태그와 닫는 태그를 정확히 입력합니다.
   • 시작과 끝을 명확하게 구분해야 정확한 HTML 구조가 완성됩니다.
3. 태그 안에 또 다른 태그를 포함할 수 있습니다.
   • 예시: <div><p>안녕하세요</p></div>
4. 들여쓰기를 반드시 활용합니다.
   • 코드의 가독성을 높여 코드 작성과 수정이 편리해집니다.

✅ 올바른 들여쓰기 예시

<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 태그, 속성, 주석을 이용하여 웹 페이지의 기본적인 구조를 만들 수 있습니다.

"백문이 불여일타!" 이 내용을 실제로 타이핑하며 직접 확인해보세요.
지금부터 여러분만의 웹 페이지를 하나씩 만들어 봅시다! 👏✨