🌐 HTML, CSS, JavaScript – 웹 개발의 3대 축! 💻🎨

💬 "웹페이지를 만들고 싶다면? HTML, CSS, JavaScript는 필수!"
💬 "각각의 역할을 제대로 이해하고 활용해야 웹사이트가 완성돼요!"

웹사이트를 구성하는 3대 요소는 바로 HTML, CSS, JavaScript입니다. 이 3가지 기술은 각기 다른 역할을 하며, 하나의 웹 페이지를 만드는 데 모두 필요합니다.

그럼, HTML, CSS, JavaScript가 무엇인지, 왜 중요한지, 그리고 어떻게 다르게 작동하는지 알아볼까요? 😊

---

🔹 1. HTML (HyperText Markup Language) – 웹페이지의 뼈대! 🦴

💡 "HTML은 웹 페이지의 구조를 정의하는 언어!"

📌 HTML이란?

✔ HTML은 웹 페이지의 골격을 정의합니다.
✔ 헤더, 본문, 링크, 이미지, 표 등 웹 페이지의 요소들을 태그로 마크업하여 작성합니다.
✔ 브라우저가 이 HTML 태그들을 해석하여, 사용자에게 웹 페이지의 기본적인 내용을 구조적으로 보여줍니다.

---

📌 💡 HTML의 사용 사례!

• ✅ 웹페이지 제목, 본문, 목록 등 작성
• ✅ 링크, 이미지, 비디오 삽입
• ✅ 입력 폼, 버튼 등 인터랙티브 요소 배치

---

🔹 2. CSS (Cascading Style Sheets) – 웹페이지의 디자인! 🎨

💡 "CSS는 웹 페이지의 스타일을 지정하는 언어!"

📌 CSS란?

✔ CSS는 웹 페이지의 외관을 꾸미는 데 사용됩니다.
✔ HTML로 작성한 구조에 색상, 폰트, 간격 등을 지정하여 디자인을 담당합니다.
✔ 레이아웃, 애니메이션, 반응형 디자인 등 사용자 경험을 풍부하게 만드는 역할을 합니다.

---

📌 💡 CSS의 사용 사례!

• ✅ 폰트, 배경색, 이미지 크기, 여백 설정
• ✅ 레이아웃 구성 (그리드, 플렉스박스)
• ✅ 애니메이션 및 전환 효과 추가

---

🔹 3. JavaScript – 웹페이지의 동작! 🖱️

💡 "JavaScript는 웹 페이지의 기능과 인터랙션을 담당하는 언어!"

📌 JavaScript란?

✔ JavaScript는 웹 페이지에 동적인 기능을 추가하는 스크립트 언어입니다.
✔ HTML로 구조를 만들고, CSS로 디자인을 꾸몄다면, JavaScript는 버튼 클릭, 폼 제출, 데이터 처리 등 사용자와의 상호작용을 처리합니다.
✔ 동적 콘텐츠 생성, 서버와의 비동기 통신, 애니메이션 효과 등 여러 동작을 JavaScript로 구현합니다.

---

📌 💡 JavaScript의 사용 사례!

• ✅ 버튼 클릭 시 새로운 콘텐츠 로딩
• ✅ 입력 값 검증 (이메일 형식 체크 등)
• ✅ AJAX로 서버와 비동기 통신

---

💬 HTML, CSS, JavaScript 비교!

	HTML	CSS	JavaScript
역할	웹 페이지의 구조	웹 페이지의 디자인	웹 페이지의 동작
주요 기능	텍스트, 이미지, 링크 등 배치	색상, 글꼴, 레이아웃, 애니메이션 등	버튼 클릭, 데이터 처리, 동적 콘텐츠 생성 등
작성 방식	<div>, <img>, <p> 태그 사용	color: red;, font-size: 16px; 스타일 속성 사용	alert(), document.getElementById() 등 메소드 사용
결과	웹 페이지의 뼈대	웹 페이지의 시각적 스타일	웹 페이지의 기능성 (인터랙티브 요소)

---

✅ 결론 – HTML, CSS, JavaScript, 3가지 기술의 조화가 중요!

✔ HTML은 웹 페이지의 구조를,
✔ CSS는 그 구조의 디자인을,
✔ JavaScript는 페이지의 동작과 기능을 담당합니다.