웹의 3요소(HTML, CSS, JavaScript) 완벽 가이드
## 목차
1. [웹의 3요소 개요](#웹의-3요소-개요)
2. [HTML: 웹의 구조](#HTML-웹의-구조)
3. [CSS: 웹의 표현](#CSS-웹의-표현)
4. [JavaScript: 웹의 동작](#JavaScript-웹의-동작)
5. [세 요소의 상호작용](#세-요소의-상호작용)
## 웹의 3요소 개요
웹 페이지는 크게 세 가지 핵심 요소로 구성됩니다:
- HTML: 구조
- CSS: 디자인
- JavaScript: 동작
이는 마치 인체의 뼈대, 피부, 근육과 같은 역할을 합니다.
## HTML: 웹의 구조
HTML(HyperText Markup Language)은 웹 페이지의 기본 구조를 정의합니다.
### 기본 예제
```html
<!DOCTYPE html>
<html>
<head>
<title>웹 페이지 제목</title>
</head>
<body>
<h1>안녕하세요</h1>
<p>이것은 단락입니다.</p>
<ul>
<li>목록 항목 1</li>
<li>목록 항목 2</li>
</ul>
</body>
</html>
```
### HTML의 주요 역할
- 웹 페이지의 구조적 의미 정의
- 콘텐츠의 계층 구조 표현
- 문서의 기본 레이아웃 제공
## CSS: 웹의 표현
CSS(Cascading Style Sheets)는 웹 페이지의 시각적 표현을 담당합니다.
### 기본 예제
```css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
h1 {
color: navy;
font-size: 24px;
}
p {
line-height: 1.6;
color: #333;
}
```
### CSS의 주요 역할
- 색상, 크기, 여백 등 스타일 정의
- 레이아웃 배치
- 반응형 디자인 구현
- 애니메이션 효과 적용
## JavaScript: 웹의 동작
JavaScript는 웹 페이지에 동적인 기능을 추가합니다.
### 기본 예제
```javascript
// 버튼 클릭 이벤트 처리
document.getElementById('myButton').addEventListener('click', function() {
alert('버튼이 클릭되었습니다!');
});
// 동적으로 내용 변경
function updateContent() {
document.getElementById('content').innerHTML = '새로운 내용';
}
```
### JavaScript의 주요 역할
- 사용자 상호작용 처리
- 동적 콘텐츠 업데이트
- 데이터 처리 및 검증
- API 통신
## 세 요소의 상호작용
### 통합 예제
```html
<!-- HTML -->
<div id="container">
<h1>인터랙티브 박스</h1>
<div id="colorBox" class="box"></div>
<button onclick="changeColor()">색상 변경</button>
</div>
<style>
/* CSS */
.box {
width: 100px;
height: 100px;
background-color: blue;
transition: all 0.3s;
}
</style>
<script>
// JavaScript
function changeColor() {
const box = document.getElementById('colorBox');
const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
box.style.backgroundColor = randomColor;
}
</script>
```
### 각 요소의 역할 분담
1. **HTML**
- 구조적 마크업 제공
- 콘텐츠의 의미론적 구조화
- 기본 레이아웃 정의
2. **CSS**
- 시각적 스타일링
- 반응형 디자인
- 애니메이션 효과
3. **JavaScript**
- 이벤트 처리
- 동적 기능 구현
- 사용자 상호작용
## 모범 사례
### 1. 관심사의 분리
```html
<!-- HTML 파일 -->
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
```
### 2. 시맨틱 마크업
```html
<header>
<nav>
<ul>
<li><a href="#home">홈</a></li>
<li><a href="#about">소개</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>주요 내용</h1>
<p>본문...</p>
</article>
</main>
<footer>
<p>© 2024 웹사이트</p>
</footer>
```
### 3. 반응형 디자인
```css
/* 반응형 CSS */
@media (max-width: 768px) {
.container {
width: 100%;
padding: 10px;
}
.nav-menu {
flex-direction: column;
}
}
```
## 마치며
웹의 3요소는 각각 독립적이면서도 상호 보완적인 역할을 수행합니다:
- HTML은 견고한 구조를 제공
- CSS는 아름다운 디자인을 구현
- JavaScript는 풍부한 상호작용을 가능하게 함
이 세 가지 요소의 조화로운 활용이 현대 웹 개발의 핵심입니다.