반응형
1. 서론
웹 개발을 배우고 싶은 초보자라면 HTML, CSS, JavaScript를 익히는 것이 중요합니다. 이 세 가지 기술을 사용하면 기본적인 웹페이지를 만들고, 사용자와 상호작용할 수 있는 기능을 추가할 수 있습니다. 이번 글에서는 HTML, CSS, JavaScript를 활용하여 간단한 웹페이지를 만드는 방법을 소개하겠습니다.
2. 개발 환경 설정
2.1 필요한 도구
- 코드 편집기: VS Code, Sublime Text, Atom 등
- 웹 브라우저: Google Chrome, Firefox 등
- Live Server 플러그인: 실시간으로 웹페이지를 미리 보기 가능 (VS Code에서 설치 가능)
2.2 기본 파일 구조
웹사이트 개발을 위해 다음과 같은 파일 구조를 사용합니다.
project-folder/
├── index.html
├── styles.css
├── script.js3. HTML: 웹페이지 구조 만들기
HTML은 웹페이지의 구조를 정의하는 마크업 언어입니다. 기본적인 HTML 템플릿을 작성해 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>간단한 웹페이지</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>환영합니다!</h1>
<p>HTML, CSS, JavaScript로 만든 간단한 웹페이지입니다.</p>
</header>
<button id="clickButton">클릭하세요</button>
<script src="script.js"></script>
</body>
</html>4. CSS: 웹페이지 디자인 적용
CSS는 웹페이지의 스타일과 디자인을 설정하는 역할을 합니다. styles.css 파일을 생성하여 다음과 같이 스타일을 적용해 보겠습니다.
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
header {
background-color: #f4f4f4;
padding: 20px;
border-radius: 10px;
}
button {
background-color: #008CBA;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
margin-top: 20px;
}
button:hover {
background-color: #005f73;
}5. JavaScript: 동적인 기능 추가
JavaScript는 웹페이지에 동적인 기능을 추가하는 역할을 합니다. script.js 파일을 생성하고 다음과 같은 코드를 추가합니다.
document.getElementById("clickButton").addEventListener("click", function() {
alert("버튼이 클릭되었습니다!");
});이제 버튼을 클릭하면 경고창이 나타납니다.
6. 실행 및 테스트
- index.html 파일을 더블 클릭하여 웹 브라우저에서 실행합니다.
- 버튼을 클릭하여 JavaScript 기능이 정상적으로 동작하는지 확인합니다.
- Live Server를 활용하면 변경 사항을 즉시 확인할 수 있습니다.
7. 결론
HTML, CSS, JavaScript를 활용하여 간단한 웹페이지를 만들어보았습니다. 이를 기반으로 더 복잡한 웹 애플리케이션을 개발할 수 있으며, 추가적인 기능(예: 폼, 애니메이션, API 연동 등)을 학습하면서 웹 개발 실력을 향상할 수 있습니다.
이제 직접 실습해 보면서 자신만의 웹페이지를 만들어보세요!
반응형