티스토리 뷰
웹사이트를 만들고 싶지만 어디서부터 시작해야 할지 모르겠나요? 걱정하지 마세요!
HTML, CSS, JavaScript의 기본 개념을 쉽게 설명하고, 간단한 웹사이트를 만드는 방법을 알려드릴게요. 😊
1. HTML, CSS, JavaScript란?
웹 개발의 기본이 되는 세 가지 핵심 기술을 알아볼게요.
- 📌 HTML (HyperText Markup Language): 웹페이지의 구조를 만드는 언어예요.
- 🎨 CSS (Cascading Style Sheets): 웹페이지의 디자인(색상, 레이아웃, 글꼴 등)을 담당해요.
- ⚡ JavaScript: 웹페이지에 동적인 기능을 추가하는 프로그래밍 언어예요.
HTML이 웹사이트의 뼈대라면, CSS는 옷을 입히는 역할을 하고, JavaScript는 움직이게 만드는 역할을 한다고 보면 돼요!
2. HTML, CSS, JavaScript 기본 코드 예제
1) HTML 기본 구조
웹페이지를 만들려면 HTML 문서의 기본 구조를 알아야 해요. 다음은 가장 기본적인 HTML 코드예요.
<!DOCTYPE html>
<html>
<head>
<title>내 첫 번째 웹사이트</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 첫 번째 웹페이지입니다.</p>
</body>
</html>
위 코드에서 <h1> 태그는 제목을, <p> 태그는 문단을 나타내요.
2) CSS 기본 스타일
이제 HTML에 디자인을 추가해 볼까요? CSS를 사용하면 글자 크기, 색상, 배경 등을 꾸밀 수 있어요.
body {
background-color: lightblue;
text-align: center;
}
h1 {
color: darkblue;
font-size: 36px;
}
위 코드를 적용하면 배경이 파란색이 되고, 제목이 어두운 파란색으로 변경돼요.
3) JavaScript로 버튼 클릭 기능 추가
웹페이지에 동적인 기능을 추가하려면 JavaScript를 사용해야 해요. 버튼을 눌렀을 때 알림 창이 뜨는 기능을 만들어볼까요?
<button onclick="sayHello()">클릭하세요</button>
<script>
function sayHello() {
alert("안녕하세요! 웹 개발을 시작해 볼까요?");
}
</script>
위 코드에서 onclick 속성은 버튼을 클릭했을 때 sayHello() 함수를 실행하도록 해요.
3. 간단한 웹사이트 만들기
이제 HTML, CSS, JavaScript를 활용해서 정말 간단한 웹사이트를 만들어 볼게요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>내 웹사이트</title>
<style>
body { text-align: center; background-color: #f8f9fa; }
h1 { color: #007bff; }
button { padding: 10px 20px; background-color: #007bff; color: white; border: none; cursor: pointer; }
</style>
</head>
<body>
<h1>환영합니다!</h1>
<p>이곳은 나만의 첫 웹사이트입니다!</p>
<button onclick="showMessage()">클릭하세요</button>
<script>
function showMessage() {
alert("웹 개발이 재미있지 않나요? 😊");
}
</script>
</body>
</html>
위 코드를 실행하면 버튼을 눌렀을 때 팝업 메시지가 나타나는 간단한 웹사이트가 완성돼요!