HTML, CSS, 자바스크립트 소개

웹 개발의 기초를 이루는 세 가지 핵심 기술인 HTML, CSS, 자바스크립트는 각각 고유한 역할을 수행하며, 이들이 조화롭게 결합하여 현대적이고 동적인 웹 페이지를 만들어냅니다.

이 절에서는 각 기술의 기본 개념, 문법, 최신 동향, 그리고 이들이 어떻게 상호작용하는지 알아보겠습니다.

HTML (HyperText Markup Language)

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

기본 문법과 구조

HTML은 태그를 사용하여 문서의 구조를 정의합니다.

기본적인 HTML 문서 구조는 다음과 같습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>페이지 제목</title>
</head>
<body>
    <h1>안녕하세요, HTML!</h1>
    <p>이것은 단락입니다.</p>
</body>
</html>

HTML5의 주요 특징

시맨틱 태그 : <header>, <nav>, <article>, <section>, <aside>, <footer> 등
멀티미디어 지원 : <video>, <audio> 태그
그래픽 지원 : <canvas>, <svg> 태그
폼 개선 : 새로운 입력 타입 (date, email, url 등)
오프라인 웹 애플리케이션 지원

CSS (Cascading Style Sheets)

CSS는 HTML 문서의 표현을 담당하며, 레이아웃, 색상, 폰트 등 웹 페이지의 시각적 스타일을 정의합니다.

기본 문법

CSS는 선택자와 선언 블록으로 구성됩니다.

선택자 {
    속성: 값;
    속성: 값;
}

예시

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}
 
h1 {
    color: #333;
    font-size: 24px;
}

CSS3의 주요 특징

플렉서블 박스 레이아웃 (Flexbox)
그리드 레이아웃
트랜지션과 애니메이션
미디어 쿼리를 이용한 반응형 디자인
새로운 선택자 (예: nth-child, :not())
그라데이션, 그림자 효과

자바스크립트

자바스크립트는 웹 페이지에 동적인 기능을 추가하는 프로그래밍 언어입니다.

사용자 상호작용, 동적 콘텐츠 업데이트, 서버와의 통신 등을 담당합니다.

기본 문법

자바스크립트의 기본 문법 예시

// 변수 선언
let greeting = "안녕하세요";
 
// 함수 정의
function sayHello(name) {
    console.log(greeting + ", " + name + "님!");
}
 
// 함수 호출
sayHello("홍길동");
 
// 조건문
if (greeting === "안녕하세요") {
    console.log("한국어 인사입니다.");
} else {
    console.log("다른 언어 인사입니다.");
}
 
// 반복문
for (let i = 0; i < 5; i++) {
    console.log("반복 " + (i + 1) + "번째");
}

ECMAScript 최신 동향

ECMAScript는 자바스크립트의 표준화된 버전입니다.

최근 주요 특징들

let과 const를 이용한 블록 스코프 변수
화살표 함수
템플릿 리터럴
구조 분해 할당
클래스와 모듈 시스템
Promise와 async/await를 이용한 비동기 프로그래밍
스프레드 연산자와 나머지 매개변수

HTML, CSS, 자바스크립트의 상호작용

이 세 기술은 다음과 같이 상호작용하여 웹 페이지를 구성합니다.

HTML : 콘텐츠의 구조와 의미를 정의
CSS : HTML 요소의 스타일과 레이아웃을 지정
자바스크립트 : 동적 기능을 추가하고 사용자 상호작용을 처리

예를 들어, 간단한 대화형 버튼을 만드는 과정을 살펴보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>대화형 버튼 예제</title>
    <style>
        .button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <button id="myButton" class="button">클릭하세요</button>
 
    <script>
        document.getElementById("myButton").addEventListener("click", function() {
            alert("버튼이 클릭되었습니다!");
            this.textContent = "클릭됨";
        });
    </script>
</body>
</html>

이 예제에서,

HTML은 버튼 요소를 정의합니다.
CSS는 버튼의 스타일을 지정하고 호버 효과를 추가합니다.
자바스크립트는 버튼 클릭 이벤트를 처리하고 동적으로 텍스트를 변경합니다.

HTML, CSS, 자바스크립트 소개

HTML (HyperText Markup Language)

CSS (Cascading Style Sheets)

자바스크립트

HTML, CSS, 자바스크립트의 상호작용

최신 웹 개발 트렌드