HTML vs CSS: 웹의 뼈대와 옷차림을 구분해볼까요? 🦴👗

안녕하세요 logro 입니다 :)

처음 웹 개발을 시작하면 가장 먼저 만나게 되는 친구들이 있죠.
바로 HTML과 CSS입니다!
이 둘은 웹 페이지를 만들 때 꼭 필요한 기본 요소인데요, 많은 분들이 처음에는 헷갈려 하곤 해요.
오늘은 HTML과 CSS의 역할을 비유와 함께 쉽~게 풀어볼게요! ☕️

---

🦴 HTML이란? – 웹의 뼈대

HTML은 HyperText Markup Language의 줄임말이에요.
말 그대로 ‘하이퍼텍스트를 마크업하는 언어’인데... 너무 어렵게 느껴질 필요 없어요!

간단히 말하면, 웹 페이지의 구조(뼈대)를 만드는 역할을 해요 🏗️

예를 들어, 블로그 글을 만든다고 생각해볼게요.
제목, 본문, 이미지, 링크 등이 어디에 있는지, 어떤 순서로 나오는지 정해주는 게 바로 HTML이에요.

<h1>오늘의 일기</h1> <p>오늘은 날씨가 정말 좋았다.</p> 
<img src="sunny.png" alt="햇살 가득한 하늘">

위 코드처럼 HTML은 내용과 구조를 담당해요!

---

👗 CSS란? – 웹의 옷차림

이제 HTML로 뼈대를 만들었다면, 예쁘게 꾸며야겠죠?
그 역할을 맡은 친구가 바로 CSS입니다! 🎨
CSS는 Cascading Style Sheets의 줄임말로, 웹 페이지의 스타일(색깔, 폰트, 여백 등)을 담당해요.

h1 { color: blue; font-size: 30px; } 
p { line-height: 1.6; }

이렇게 작성한 CSS는 HTML에 연결해서 적용할 수 있어요.
같은 내용을 가진 페이지라도 CSS 덕분에 훨씬 보기 좋게 꾸밀 수 있죠!

---

🧠 비유로 쉽게 정리해볼까요?

• HTML은 사람의 ‘뼈대’와 ‘장기’처럼, 내용과 구조를 잡는 역할
• CSS는 옷, 화장, 헤어스타일처럼, 겉모습을 꾸며주는 역할

즉, HTML 없이는 내용이 없고, CSS 없이는 멋이 없어요!
둘 다 함께 있어야 진짜 웹 페이지가 완성됩니다 ✅

---

☺️ 마무리하며

HTML과 CSS는 웹 개발의 기본 중 기본이에요.
처음에는 헷갈릴 수 있지만, 하나씩 실습해보면서 천천히 익혀보세요!
다음에는 이 둘을 어떻게 연결하는지도 알려드릴게요.

그럼 오늘도 한 개념, 잘 배워봤죠?
내일 또 만나요! 안녕~ 👋