반응형
HTML, CSS, JavaScript 차이 – 웹페이지를 만드는 삼총사
“웹사이트는 어떻게 만들어질까요? 건축물에 비유하면 딱 이해돼요!”
📌 목차
✅ 1. HTML이란?
HTML(HyperText Markup Language)는 웹페이지의 뼈대(구조)를 만드는 언어입니다.
- 텍스트, 이미지, 링크, 표 등을 배치
- 예: “여기는 제목”, “여기는 문단”, “여기 버튼 있음”
✅ 2. CSS란?
CSS(Cascading Style Sheets)는 HTML로 만든 구조에 디자인과 스타일을 입히는 언어입니다.
- 색상, 글자 크기, 배경, 여백, 정렬 등을 설정
- 예: “버튼은 파란색, 글씨는 16px, 가운데 정렬”
✅ 3. JavaScript란?
JavaScript는 웹페이지에 동작(기능)을 추가하는 언어입니다.
- 버튼 클릭, 슬라이드 배너, 팝업, 채팅창 등
- 예: “클릭하면 메뉴가 펼쳐지도록 하기”
✅ 4. 건축물 비유로 이해하기
| 요소 | 역할 | 건축물 비유 |
|---|---|---|
| HTML | 구조 | 건물의 골조, 뼈대 |
| CSS | 디자인 | 페인트, 인테리어, 조명 |
| JavaScript | 기능/동작 | 엘리베이터, 자동문, 조명 센서 |
✅ 5. 세 가지 차이점 비교표
| 항목 | HTML | CSS | JavaScript |
|---|---|---|---|
| 역할 | 페이지 구조 | 스타일, 외형 | 기능, 동작 |
| 파일 확장자 | .html | .css | .js |
| 브라우저 실행 | 기본 출력 | 스타일 적용 | 사용자 상호작용 |
✅ 6. 마무리 요약
✔ HTML: 뼈대 만들기
✔ CSS: 예쁘게 꾸미기
✔ JavaScript: 살아 움직이게 만들기
👉 세 가지가 합쳐져야 진짜 웹사이트가 완성됩니다!
💻 HTML / CSS / JavaScript 예시 코드
1. HTML 예시 (구조 만들기)
<!DOCTYPE html>
<html>
<head>
<title>나의 첫 웹페이지</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>처음 만든 HTML 페이지입니다.</p>
</body>
</html>
2. CSS 예시 (디자인 입히기)
h1 {
color: blue;
text-align: center;
}
p {
font-size: 18px;
line-height: 1.5;
}
3. JavaScript 예시 (기능 추가하기)
<button onclick="sayHello()">인사하기</button>
<script>
function sayHello() {
alert("안녕하세요! JavaScript입니다.");
}
</script>
위 세 가지가 함께 사용되면, 👉 구조 + 스타일 + 동작이 모두 어우러진 진짜 웹페이지가 만들어집니다!
반응형