반응형
웹 개발의 기본은 HTML, CSS, JavaScript입니다. 이 세 가지 기술은 각각 구조, 스타일, 동작을 담당하며, 함께 작동해 웹 페이지를 구성합니다.
1. HTML: 웹 문서의 구조
HTML(HyperText Markup Language)은 웹 페이지의 기본 뼈대를 만드는 언어입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>My Web Page</title>
</head>
<body>
<h1>안녕하세요</h1>
<p>이것은 HTML 문서입니다.</p>
</body>
</html>
2. CSS: 스타일 지정
CSS(Cascading Style Sheets)는 글꼴, 색상, 간격 등 디자인 요소를 설정합니다.
<style>
body {
background-color: #fff;
color: #333;
font-family: Arial, sans-serif;
}
h1 {
color: #0073e6;
}
</style>
3. JavaScript: 동적인 기능
JavaScript는 버튼 클릭, 입력 이벤트 처리 등 사용자와의 상호작용을 구현하는 데 사용됩니다.
<script>
function sayHello() {
alert("안녕하세요!");
}
</script>
<button onclick="sayHello()">인사하기</button>
4. 기본 통합 예제
HTML, CSS, JavaScript를 하나의 파일에 함께 작성하면 다음과 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>기초 예제</title>
<style>
body { font-family: sans-serif; }
h1 { color: green; }
</style>
</head>
<body>
<h1>웹 기초 구조</h1>
<button onclick="greet()">클릭하세요</button>
<script>
function greet() {
alert("HTML + CSS + JS = 완성된 웹페이지!");
}
</script>
</body>
</html>
마무리
HTML, CSS, JavaScript는 웹 개발의 기초입니다. 이 세 가지를 이해하면 웹사이트 제작의 기초를 튼튼히 다질 수 있습니다.
반응형