IT개발

HTML, CSS, JavaScript 기초 정리

wb2875 2025. 3. 9. 00:36

 

웹 개발을 시작하기 위해서는 HTML, CSS, JavaScript의 기초를 이해하는 것이 중요합니다.

이 글에서는 각각의 개념과 기본적인 사용법을 정리하고, 실전에서 활용할 수 있도록 예제를 함께 제공하겠습니다.

1. HTML (HyperText Markup Language)

HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다.

문서의 제목, 본문, 이미지, 링크 등을 구성할 수 있으며, 웹 브라우저가 이를 해석하여 화면에 표시합니다.

 

1.1 기본 구조

HTML 문서는 <html>, <head>, <body> 등의 주요 태그로 구성됩니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>안녕하세요!</h1>
    <p>이것은 HTML의 기본 구조입니다.</p>
</body>
</html>

 

1.2 주요 태그

  • <h1> ~ <h6> : 제목 태그 (제목 크기 조절)
  • <p> : 단락을 나타내는 태그
  • <a href="URL"> : 하이퍼링크 태그
  • <img src="URL" alt="설명"> : 이미지를 삽입하는 태그
  • <ul>, <ol>, <li> : 리스트 요소
  • <table> : 표 생성
  • <form> : 사용자 입력을 받는 폼
<a href="https://www.google.com">구글로 이동</a>
<img src="image.jpg" alt="샘플 이미지">

2. CSS (Cascading Style Sheets)

CSS는 HTML 요소의 스타일(색상, 크기, 배치 등)을 정의하는 스타일 시트 언어입니다.

이를 통해 웹 사이트의 디자인을 더욱 미려하게 만들 수 있습니다.

 

2.1 기본 문법

CSS는 선택자와 속성으로 구성됩니다.

body {
    background-color: #f4f4f4;
    font-family: Arial, sans-serif;
}
h1 {
    color: blue;
    text-align: center;
}
p {
    font-size: 16px;
    line-height: 1.5;
}

 

2.2 적용 방법

  1. 인라인 스타일 (HTML 태그 내부에 직접 적용)
  2. <p style="color: red;">이 문장은 빨간색입니다.</p>
  3. 내부 스타일 시트 (<style> 태그 내부에 작성)
  4. <style> p { color: red; } </style>
  5. 외부 스타일 시트 (.css 파일로 관리, 가장 권장되는 방식)
  6. <link rel="stylesheet" href="styles.css">

 

2.3 주요 속성

  • color : 글자 색상
  • background-color : 배경 색상
  • font-size : 글자 크기
  • margin : 외부 여백
  • padding : 내부 여백
  • border : 테두리 설정
  • display : 요소의 표시 방식 (block, inline, flex, grid 등)
  • position : 요소의 위치 (relative, absolute, fixed, sticky)

 

3. JavaScript

JavaScript는 웹 페이지에 동적인 기능을 추가하는 프로그래밍 언어입니다.

 

3.1 기본 문법

console.log("Hello, JavaScript!");

let message = "안녕하세요!";
alert(message);

 

3.2 변수 선언

  • var : 함수 범위 변수 (과거 방식, 권장하지 않음)
  • let : 블록 범위 변수 (재할당 가능)
  • const : 블록 범위 상수 (재할당 불가능)
let name = "홍길동";
const age = 25;

 

3.3 함수 정의

function greet(name) {
    return "안녕하세요, " + name + "님!";
}
console.log(greet("철수"));

 

3.4 이벤트 처리

<button onclick="sayHello()">클릭하세요</button>
<script>
    function sayHello() {
        alert("안녕하세요!");
    }
</script>

 

3.5 DOM 조작

document.getElementById("title").innerText = "변경된 제목";

4. HTML, CSS, JavaScript 활용 예제

4.1 간단한 웹 페이지 만들기

<!DOCTYPE html>
<html>
<head>
    <title>웹 개발 연습</title>
    <style>
        body { text-align: center; }
        .highlight { color: red; }
    </style>
</head>
<body>
    <h1 id="title">웹 개발을 시작해보세요!</h1>
    <p class="highlight">이 문장은 강조되어 있습니다.</p>
    <button onclick="changeText()">변경</button>

    <script>
        function changeText() {
            document.getElementById("title").innerText = "텍스트가 변경되었습니다!";
        }
    </script>
</body>
</html>

5. 마무리

HTML, CSS, JavaScript는 웹 개발의 핵심 요소입니다. HTML로 구조를 만들고, CSS로 디자인을 적용하며, JavaScript로 동적인 기능을 추가하는 것이 기본적인 웹 개발의 흐름입니다. 이를 익히고 연습하면 더 나은 웹 개발자로 성장할 수 있습니다!

HTML, CSS, JavaScript 기초 정리
HTML, CSS, JavaScript 기초 정리