프론트엔드 개발자로 성장하기: HTML, CSS, JavaScript
안녕하세요, 코딩 악어입니다! 🐊 오늘은 프론트엔드 개발자가 되기 위한 기초 지식인 HTML, CSS, 그리고 JavaScript에 대해 다루어 보겠습니다. 프론트엔드 개발은 웹 사이트와 애플리케이션의 사용자 인터페이스를 만드는 작업으로, 이 세 가지 기술은 기본 중의 기본입니다.
1. HTML: 웹의 구조 만들기
HTML (HyperText Markup Language)은 웹 페이지의 구조를 정의하는 언어입니다. HTML 태그를 사용하여 웹 페이지의 요소들을 구성할 수 있습니다. 다음은 간단한 HTML 예제입니다:
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph.</p>
<a href="https://www.example.com">Visit Example</a>
</body>
</html>
2. CSS: 스타일링 추가하기
CSS (Cascading Style Sheets)는 웹 페이지의 스타일을 정의하는 언어입니다. CSS를 사용하면 글꼴, 색상, 레이아웃 등을 쉽게 설정할 수 있습니다. 다음은 HTML 요소에 CSS 스타일을 적용하는 예제입니다:
<!DOCTYPE html>
<html>
<head>
<title>Styled Website</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
}
h1 {
color: #0073e6;
}
p {
font-size: 18px;
}
a {
color: #ff6600;
}
</style>
</head>
<body>
<h1>Welcome to My Stylish Website</h1>
<p>This is a styled paragraph.</p>
<a href="https://www.example.com">Visit Example</a>
</body>
</html>
3. JavaScript: 동적인 기능 추가하기
JavaScript는 웹 페이지에 동적인 기능을 추가하는 프로그래밍 언어입니다. JavaScript를 사용하면 사용자와 상호작용하는 다양한 기능을 구현할 수 있습니다. 다음은 버튼 클릭 시 경고 메시지를 출력하는 예제입니다:
<!DOCTYPE html>
<html>
<head>
<title>Interactive Website</title>
</head>
<body>
<h1>Welcome to My Interactive Website</h1>
<button id="myButton">Click Me</button>
<script>
document.getElementById("myButton").addEventListener("click", function() {
alert("Button clicked!");
});
</script>
</body>
</html>
4. 실습 프로젝트: 간단한 To-Do 리스트 만들기
기초를 익혔다면, 간단한 To-Do 리스트 웹 애플리케이션을 만들어 보면서 실력을 키워보세요. HTML, CSS, 그리고 JavaScript를 사용하여 구현할 수 있습니다:
<!DOCTYPE html>
<html>
<head>
<title>To-Do List</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
}
.container {
width: 300px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 10px;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<h1>To-Do List</h1>
<input type="text" id="taskInput" placeholder="Enter a new task">
<ul id="taskList"></ul>
</div>
<script>
document.getElementById("taskInput").addEventListener("keypress", function(event) {
if (event.key === "Enter") {
let task = this.value;
if (task) {
let li = document.createElement("li");
li.textContent = task;
document.getElementById("taskList").appendChild(li);
this.value = "";
}
}
});
</script>
</body>
</html>
결론
프론트엔드 개발은 웹 사이트와 애플리케이션의 사용자 경험을 좌우하는 중요한 작업입니다. HTML, CSS, 그리고 JavaScript의 기초를 잘 이해하고 실습을 통해 익히면 프론트엔드 개발자로서 성장할 수 있습니다. 꾸준히 연습하고 다양한 프로젝트를 경험하면서 여러분의 실력을 쌓아 나가세요!