웹 개발 시작하기: HTML, CSS, JavaScript 기초

HTML, CSS, JavaScript 기초를 배우고 웹 개발을 시작해보세요. 초보자도 이해하기 쉽게 웹사이트 구조부터 스타일링, 동적인 기능 추가까지 실습과 함께 설명합니다.

1. 웹 개발이란?

웹 개발(Web Development)은 웹사이트를 제작하고 관리하는 과정입니다. 기본적으로 HTML, CSS, JavaScript라는 세 가지 핵심 기술을 사용합니다. HTML은 구조, CSS는 디자인, JavaScript는 동적인 기능을 담당합니다. 웹 개발을 배우면 개인 블로그, 포트폴리오 사이트, 쇼핑몰 등 다양한 웹사이트를 만들 수 있으며, 취업이나 프리랜서 작업에도 큰 도움이 됩니다.

2. HTML 기초

HTML이란?

HTML(HyperText Markup Language)은 웹 페이지의 구조를 만드는 마크업 언어입니다. 문서의 제목, 본문, 이미지, 링크 등을 정의하는 데 사용됩니다.

기본 HTML 문서 구조

<!DOCTYPE html>
<html>
<head>
    <title>내 첫 번째 웹페이지</title>
</head>
<body>
    <h1>안녕하세요! HTML을 배우고 있어요</h1>
    <p>이것은 문단 태그입니다.</p>
</body>
</html>

💡 주요 태그

<h1> ~ <h6>: 제목을 나타냅니다.
<p>: 문단을 작성할 때 사용합니다.
<a href="URL">: 하이퍼링크를 만듭니다.
<img src="이미지주소">: 이미지를 삽입합니다.
<ul>, <ol>, <li>: 목록을 작성할 때 사용합니다.

3. CSS 기초

CSS란?

CSS(Cascading Style Sheets)는 HTML 요소를 꾸미는 스타일 시트 언어입니다. 글자 크기, 색상, 배경, 여백 등을 지정할 수 있습니다.

기본 CSS 적용 방법

CSS를 HTML에 적용하는 방법은 세 가지가 있습니다.

인라인 스타일 (HTML 태그 내부에서 직접 스타일 지정)

<p style="color: red; font-size: 20px;">이 문장은 빨간색입니다.</p>

내부 스타일시트 (<style> 태그 사용)

<style>
    p {
        color: blue;
        font-size: 18px;
    }
</style>

외부 스타일시트 (.css 파일을 링크)

<link rel="stylesheet" href="styles.css">

예제: 기본적인 CSS 코드

body {
    background-color: #f4f4f4;
    font-family: Arial, sans-serif;
}
h1 {
    color: darkblue;
    text-align: center;
}

4. JavaScript 기초

JavaScript란?

JavaScript(JS)는 웹사이트에 동적인 기능을 추가하는 프로그래밍 언어입니다. HTML과 CSS만으로는 정적인 페이지를 만들지만, JavaScript를 사용하면 버튼 클릭, 애니메이션, 데이터 처리 등의 기능을 구현할 수 있습니다.

기본 JavaScript 문법

// 변수 선언
let message = "Hello, JavaScript!";
console.log(message);

// 함수 정의
function greet(name) {
    return "안녕하세요, " + name + "님!";
}
console.log(greet("홍길동"));

// 버튼 클릭 이벤트
document.getElementById("myButton").addEventListener("click", function() {
    alert("버튼이 클릭되었습니다!");
});

HTML에서 JavaScript 사용하기

<button onclick="alert('Hello, World!')">클릭하세요</button>

💡 주요 기능

이벤트 처리: 버튼 클릭 및 키 입력을 감지할 수 있습니다.
DOM 조작: HTML 요소 변경 및 조작이 가능합니다.
애니메이션 및 효과: 슬라이드, 팝업 창 등에 적용할 수 있습니다.

5. 실습: 간단한 웹 페이지 만들기

HTML + CSS + JavaScript 조합 예제

<!DOCTYPE html>
<html>
<head>
    <title>웹 개발 기초</title>
    <style>
        body { text-align: center; font-family: Arial; }
        button { padding: 10px; background-color: blue; color: white; border: none; cursor: pointer; }
    </style>
</head>
<body>
    <h1>내 첫 번째 웹 페이지</h1>
    <p>버튼을 클릭하면 메시지가 표시됩니다.</p>
    <button onclick="showMessage()">클릭하세요</button>
    <script>
        function showMessage() {
            alert("Hello, 웹 개발 세계!");
        }
    </script>
</body>
</html>

6. 웹 개발을 위한 추천 학습 사이트

웹 개발을 체계적으로 배우기 위해 다음과 같은 사이트들을 활용하면 많은 도움을 얻을 수 있습니다.

MDN Web Docs: https://developer.mozilla.org/
W3Schools: https://www.w3schools.com/
Codecademy: https://www.codecademy.com/
프로그래머스: https://programmers.co.kr/

7. 결론

웹 개발은 HTML, CSS, JavaScript를 배우면서 시작할 수 있습니다. 기본 문법을 익히고 직접 웹 페이지를 만들어보는 것이 가장 효과적인 학습 방법입니다. 꾸준한 학습과 연습을 통해 웹사이트를 개발해보세요!

4차 산업 혁명