웹 개발 기초: HTML, CSS, JavaScript 완벽 정리

2025. 2. 25. 15:00ㆍ카테고리 없음

웹 개발 기초: HTML, CSS, JavaScript 완벽 정리

웹사이트를 만들고 싶다면 반드시 알아야 할 세 가지 기술이 있습니다. 바로 HTML, CSS, JavaScript입니다.

이 글에서는 웹 개발을 처음 시작하는 분들을 위해 HTML, CSS, JavaScript의 개념과 역할을 쉽게 설명해 드리겠습니다.

1. 웹 개발이란?

웹 개발(Web Development)은 웹사이트나 웹 애플리케이션을 제작하는 과정을 의미합니다. 보통 프론트엔드(Frontend)와 백엔드(Backend)로 나뉘며, HTML, CSS, JavaScript는 프론트엔드 개발의 기본 기술입니다.

2. HTML: 웹 페이지의 구조

HTML(HyperText Markup Language)은 웹 문서를 만드는 기본적인 언어입니다. HTML은 웹사이트의 뼈대(구조)를 담당하며, 모든 웹 페이지는 HTML을 기반으로 작성됩니다.

✅ HTML 기본 구조

아래는 가장 기본적인 HTML 코드입니다.

<!DOCTYPE html>
<html>
<head>
    <title>나의 첫 번째 웹 페이지</title>
</head>
<body>
    <h1>안녕하세요!</h1>
    <p>이것은 HTML 기본 구조입니다.</p>
</body>
</html>

HTML 주요 태그

  • <h1> ~ <h6>: 제목(Heading) 태그
  • <p>: 문단(Paragraph) 태그
  • <a href="">: 링크 태그
  • <img src="">: 이미지 삽입 태그
  • <table>: 표(Table) 태그

3. CSS: 웹 페이지의 디자인

CSS(Cascading Style Sheets)는 웹사이트의 스타일(디자인)을 담당하는 언어입니다. HTML이 웹사이트의 뼈대라면, CSS는 디자인을 입히는 역할을 합니다.

✅ CSS 기본 예제

아래는 CSS를 사용하여 문서의 배경색과 글꼴을 변경하는 코드입니다.

body {
    background-color: lightblue;
    font-family: Arial, sans-serif;
}

h1 {
    color: darkblue;
}

CSS 주요 속성

  • color: 글자 색상
  • background-color: 배경 색상
  • font-size: 글자 크기
  • margin: 바깥쪽 여백
  • padding: 안쪽 여백

4. JavaScript: 웹 페이지의 동작

JavaScript(JS)는 웹 페이지에 동적인 기능을 추가하는 프로그래밍 언어입니다. HTML과 CSS가 정적인 웹사이트를 만든다면, JavaScript는 인터랙티브한 웹사이트를 만듭니다.

✅ JavaScript 기본 예제

아래 코드는 버튼을 클릭하면 "안녕하세요!"라는 경고창이 뜨는 간단한 JavaScript 예제입니다.

<button onclick="sayHello()">클릭하세요</button>

<script>
function sayHello() {
    alert("안녕하세요!");
}
</script>

JavaScript 주요 기능

  • 사용자 이벤트 처리 (클릭, 입력 등)
  • HTML 요소 변경 (텍스트 변경, 스타일 조작 등)
  • 폼 유효성 검사
  • AJAX를 이용한 서버 데이터 통신

5. HTML, CSS, JavaScript의 관계

이 세 가지 기술은 웹사이트를 만들 때 서로 긴밀하게 연결됩니다.

기술 역할 예제
HTML 웹 페이지의 구조 <h1>제목</h1>
CSS 웹 페이지의 디자인 color: blue;
JavaScript 웹 페이지의 동작 alert("Hello!")

6. 웹 개발을 배우는 방법

✅ 무료 웹 개발 학습 사이트

📢 마무리

이제 HTML, CSS, JavaScript의 기초 개념을 이해하셨나요? 웹 개발을 배우기 위해서는 기본 개념을 익힌 후 직접 코딩해 보는 것이 가장 중요합니다.

앞으로도 꾸준히 연습하면서 멋진 웹사이트를 만들어 보세요! 🚀

티스토리툴바