웹 개발의 기초: HTML, CSS, JavaScript

서론

현대 사회에서 웹 개발은 필수적인 기술 중 하나로 자리 잡고 있습니다. 개인 블로그부터 대규모 기업 웹사이트까지, 웹은 정보 전달과 소통의 중요한 매체입니다. 웹 개발을 시작하기 위해서는 HTML, CSS, JavaScript의 기초를 이해하는 것이 매우 중요합니다. 이 글에서는 각 기술의 역할과 특징, 예제 등을 통해 웹 개발의 기초를 살펴보겠습니다.

1. HTML(하이퍼텍스트 마크업 언어)

HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다. HTML을 사용하여 웹 페이지의 요소(텍스트, 이미지, 링크 등)를 배치하고, 이들이 어떻게 상호작용하는지를 설정할 수 있습니다.

1.1. HTML의 기본 구조

HTML 문서는 <html> 태그로 시작하여 <head>와 <body>로 나뉩니다. <head>에는 메타데이터, 제목, 스타일 시트 링크 등이 포함되고, <body>에는 실제 콘텐츠가 들어갑니다.

html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>웹 개발의 기초</title>
</head>
<body>
    <h1>웹 개발의 기초: HTML, CSS, JavaScript</h1>
    <p>웹 개발을 배우는 것은 매우 흥미로운 여정입니다.</p>
</body>
</html>

1.2. 주요 HTML 태그

헤딩 태그: <h1>부터 <h6>까지의 태그로, 제목의 중요도를 나타냅니다.
단락 태그: <p> 태그로 텍스트 단락을 정의합니다.
링크 태그: <a> 태그로 다른 웹 페이지나 리소스에 링크를 만듭니다.
이미지 태그: <img> 태그로 이미지를 삽입합니다.
리스트 태그: <ul>(순서 없는 리스트)과 <ol>(순서 있는 리스트) 태그로 리스트를 생성합니다.

1.3. HTML의 접근성과 SEO

웹 페이지는 다양한 사용자가 접근할 수 있어야 하며, 검색 엔진 최적화(SEO)도 중요합니다. HTML을 사용할 때는 다음과 같은 점에 유의해야 합니다:

시맨틱 태그: <header>, <footer>, <article>, <section> 등 시맨틱 태그를 사용하여 페이지 구조를 명확히 합니다.
대체 텍스트: 이미지에 대한 설명을 제공하는 alt 속성을 사용하여 시각 장애인을 위한 접근성을 높입니다.

2. CSS(캐스케이딩 스타일 시트)

CSS는 웹 페이지의 스타일을 정의하는 언어로, HTML로 구성된 웹 페이지의 시각적 요소를 조정하는 데 사용됩니다. 색상, 폰트, 레이아웃 등을 설정할 수 있습니다.

2.1. CSS의 기본 문법

CSS는 선택자(selector)와 선언(block)으로 구성됩니다. 선택자는 스타일을 적용할 HTML 요소를 지정하고, 선언은 속성과 값을 포함합니다.

css

h1 {
    color: blue;
    font-size: 24px;
}

p {
    line-height: 1.5;
    margin-bottom: 20px;
}

2.2. CSS 적용 방법

CSS는 HTML 문서에 여러 방법으로 적용할 수 있습니다:

인라인 스타일: HTML 태그 내에 style 속성을 사용하여 직접 스타일을 정의합니다.

html

<h1 style="color: red;">인라인 스타일 예제</h1>

내부 스타일 시트: <head> 내에 <style> 태그를 사용하여 스타일을 정의합니다.

html

<style>
    body {
        background-color: lightgrey;
    }
</style>

외부 스타일 시트: CSS 파일을 별도로 작성하고, HTML 문서에서 링크합니다.

html

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

2.3. CSS 레이아웃 기술

CSS를 사용하여 웹 페이지의 레이아웃을 구성하는 여러 방법이 있습니다:

플렉스박스(Flexbox): 1차원 레이아웃을 쉽게 만들 수 있는 방법입니다.
그리드 레이아웃(Grid Layout): 2차원 레이아웃을 구성할 수 있는 강력한 도구입니다.
포지셔닝(Positioning): 요소를 고정 위치에 배치하거나 흐름에서 분리할 수 있습니다.

2.4. 반응형 웹 디자인

CSS는 다양한 화면 크기에 맞춰 웹 페이지를 최적화하는 데 중요한 역할을 합니다. 미디어 쿼리를 사용하여 특정 조건에 따라 스타일을 변경할 수 있습니다.

css

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

3. JavaScript

JavaScript는 웹 페이지에 동적인 기능을 추가하는 프로그래밍 언어입니다. 사용자 상호작용에 반응하고, 데이터를 처리하며, HTML 요소를 조작할 수 있습니다.

3.1. JavaScript의 기본 문법

JavaScript는 변수를 선언하고, 함수와 조건문을 사용하는 등 프로그래밍의 기본 개념을 따릅니다.

javascript

let greeting = "안녕하세요!";
function sayHello() {
    alert(greeting);
}

3.2. JavaScript의 DOM 조작

JavaScript는 Document Object Model(DOM)을 통해 HTML 요소를 조작할 수 있습니다. 예를 들어, 버튼 클릭 시 텍스트를 변경하는 코드는 다음과 같습니다.

html

<button id="myButton">클릭하세요!</button>
<p id="myText">여기에 텍스트가 표시됩니다.</p>

<script>
    document.getElementById("myButton").onclick = function() {
        document.getElementById("myText").innerText = "버튼이 클릭되었습니다!";
    };
</script>

3.3. 이벤트 처리

JavaScript는 사용자 상호작용을 처리하기 위해 이벤트 리스너를 사용할 수 있습니다. 클릭, 키보드 입력, 마우스 이동 등의 이벤트를 감지하고 반응할 수 있습니다.

javascript

document.addEventListener("click", function() {
    console.log("페이지가 클릭되었습니다!");
});

3.4. AJAX와 비동기 프로그래밍

JavaScript는 AJAX(Asynchronous JavaScript and XML)를 사용하여 서버와 비동기적으로 통신할 수 있습니다. 이를 통해 페이지를 새로 고침하지 않고도 데이터를 가져오거나 보낼 수 있습니다.

javascript

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data));

4. 웹 개발의 통합

HTML, CSS, JavaScript를 함께 사용하여 현대적인 웹 애플리케이션을 구축할 수 있습니다. 각 기술은 서로 보완적인 역할을 하며, 다음과 같은 구조로 통합됩니다:

HTML: 웹 페이지의 구조를 정의합니다.
CSS: 웹 페이지의 스타일을 지정합니다.
JavaScript: 웹 페이지에 동적인 기능을 추가합니다.

4.1. 실습 예제

이제 HTML, CSS, JavaScript를 통합하여 간단한 웹 페이지를 만들어 보겠습니다.

html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>간단한 웹 페이지</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }
        h1 {
            color: #333;
        }
        button {
            padding: 10px 15px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>나의 첫 번째 웹 페이지</h1>
    <button id="myButton">클릭하세요!</button>
    <p id="myText">여기에 텍스트가 표시됩니다.</p>

    <script>
        document.getElementById("myButton").onclick = function() {
            document.getElementById("myText").innerText = "버튼이 클릭되었습니다!";
        };
    </script>
</body>
</html>

위의 예제는 간단한 웹 페이지로, 버튼을 클릭하면 텍스트가 변경됩니다.

insight633 님의 블로그

웹 개발의 기초: HTML, CSS, JavaScript

서론

1. HTML(하이퍼텍스트 마크업 언어)

1.1. HTML의 기본 구조

1.2. 주요 HTML 태그

1.3. HTML의 접근성과 SEO

2. CSS(캐스케이딩 스타일 시트)

2.1. CSS의 기본 문법

2.2. CSS 적용 방법

2.3. CSS 레이아웃 기술

2.4. 반응형 웹 디자인

3. JavaScript

3.1. JavaScript의 기본 문법

3.2. JavaScript의 DOM 조작

3.3. 이벤트 처리

3.4. AJAX와 비동기 프로그래밍

4. 웹 개발의 통합

4.1. 실습 예제

티스토리툴바