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

🚀 HTML 기본 문법: 태그, 속성, 주석 활용법

이번 강의에서는 HTML의 핵심 요소인 태그, 속성, 주석을 깊이 있게 다루었습니다. 이를 통해 HTML 문서 구조의 이해와 작성 방법을 익히고, 웹 페이지를 구성할 수 있는 능력을 키울 수 있습니다.

---

📌 1. HTML 태그의 기본 구성과 주의사항

HTML은 웹 페이지의 다양한 요소를 배치하는 언어입니다. 텍스트, 이미지, 동영상, 표 등의 위치를 정의하며, 이를 위해 태그라는 표기법을 사용합니다.

🔹 태그 구성 요소

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

✅ 예시

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

🔸 단일 태그

• 콘텐츠가 없는 경우에는 단일 태그를 사용합니다.

<p style="color:red;">빨간색 텍스트</p>

🔹 태그 작성 시 주의사항

1. 태그명은 소문자로 작성해야 합니다.
2. 여는 태그와 닫는 태그를 정확히 입력해야 합니다.
3. 태그 안에 또 다른 태그를 포함할 수 있습니다.
4. 들여쓰기를 사용하면 코드 가독성이 높아집니다.

---

📄 2. HTML 속성의 정의와 사용법

속성은 태그에 부가적인 기능을 추가하는 요소입니다. 속성은 필수가 아니며 선택사항입니다.

🔹 속성 추가 방법

속성은 시작 태그의 내부에 정의되며, 여러 속성이 있을 경우 공백으로 구분합니다.

✅ 예시

<p style="color:red;">빨간색 텍스트</p>

• style="color:red;"는 스타일 속성으로, 텍스트 색상을 빨간색으로 설정합니다.

🔹 속성의 종류

• 스타일 속성: 태그의 디자인을 변경 (예: color, font-size 등)
• 아이디 속성: 태그에 고유한 이름을 부여하여 JavaScript나 CSS에서 활용 (예: id="intro")

---

📝 3. 주석의 정의와 사용법

주석은 코드 내에서 메모를 남기기 위한 요소입니다. 주석은 사람에게만 보이고, 컴퓨터에는 보이지 않으며 웹 페이지에는 표시되지 않습니다.

🔹 주석 사용 목적

• 코드 내 메모를 추가하거나, 특정 코드를 일시적으로 비활성화하는 데 사용됩니다.

✅ 주석 작성 형식

html

 

<!-- 이 내용은 주석입니다. 화면에는 표시되지 않아요! -->

🔹 주석 활용 예시

<!-- <p>이 내용은 화면에 나오지 않습니다.</p> -->

• 주석은 콘텐츠를 제거하거나 코드 설명을 추가하는 데 유용합니다.

---

✍️ 4. HTML 기본 문법과 태그 사용 방법

🔹 p 태그

• p 태그는 텍스트를 단락으로 구분할 때 사용됩니다.
• 예시: <p>여러분 안녕하세요</p>

🔹 hr 태그 (단일 태그)

• hr 태그는 수평선을 그리기 위한 단일 태그입니다.
  콘텐츠 없이 기능만 수행하는 태그입니다.
• 예시: <hr>

🔹 속성 추가 예시

속성을 추가하면 태그에 부가적인 기능을 부여할 수 있습니다.
스타일 속성을 사용하여 태그의 디자인을 변경할 수 있습니다.

<p style="color:red;">빨간색 텍스트</p>

---

📝 5. HTML 속성 및 주석 활용

🔹 HTML 속성

속성은 태그에 부가적인 기능을 추가하는 역할을 하며, 여러 개의 속성을 추가할 수 있습니다. 속성 사이에는 공백으로 구분합니다.

✅ 예시

<p style="color:blue;" id="intro">파란색 텍스트</p>

🔹 주석 활용

주석은 메모 용도로 자주 사용되며, 코드 내에서 보이지 않는 텍스트로 기능합니다.

✅ 주석 예시

<!-- 지금 문법 공부 중 -->

🔹 들여쓰기

코드를 작성할 때 들여쓰기를 사용하면 코드가 깔끔해지고, 가독성이 높아집니다. 태그와 콘텐츠의 관계를 명확하게 표현할 수 있습니다.

---

🚩 최종 학습 요약 및 복습 체크리스트

• 태그의 기본 구성 요소: 여는 태그, 닫는 태그, 콘텐츠
• 단일 태그: 콘텐츠 없이 기능만 수행하는 태그
• 속성의 개념과 여러 속성 추가 방법: 스타일, 아이디 등 다양한 속성
• 주석의 용도와 작성법: 코드에 메모를 남기고, 주석 내용은 웹 브라우저에 표시되지 않음
• 들여쓰기의 중요성 (코드 가독성 증가)

---

📚 핵심 용어 복습

용어설명

HTML	웹페이지의 뼈대, 구조를 만드는 언어
태그(Tag)	웹페이지 구조와 콘텐츠를 정의하는 핵심 요소
속성(Attribute)	태그에 부가적 기능을 부여하는 기능
주석(Comment)	화면에 보이지 않고 코드 설명이나 메모를 추가하는 요소
여는 태그	태그 시작을 나타내는 태그
닫는 태그	태그 끝을 나타내는 태그
콘텐츠	태그 내부에 들어가는 내용(텍스트, 이미지 등)
단일 태그	콘텐츠 없이 기능만 수행하는 태그
들여쓰기	코드 가독성을 높이기 위한 공백 처리 방식

---

🎯 마무리하며

이번 강의를 통해 HTML의 가장 기초적이고 중요한 요소들을 익혔습니다. 이제 여러분은 HTML 태그, 속성, 주석을 이용하여 웹 페이지의 기본적인 구조를 만들 수 있습니다.

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