HTML,CSS,Javascript에 대해서

Gunju Kim·2025년 3월 20일

CSS JavaScript html

필수시청 영상

목록 보기

22/32

📌 HTML, CSS, JavaScript란? 그리고 어떻게 함께 작동하는가?

웹 개발을 할 때 HTML, CSS, JavaScript는 필수적인 3가지 기술입니다.
이들은 각각 다른 역할을 하며, 웹사이트를 구성하는 기본 요소가 됩니다.

📌 1. HTML (HyperText Markup Language) - 웹페이지의 뼈대

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

✅ 예제

<!DOCTYPE html>
<html>
<head>
    <title>웹페이지 제목</title>
</head>
<body>
    <h1>안녕하세요!</h1>
    <p>이것은 웹사이트의 기본 구조입니다.</p>
</body>
</html>

🔹 HTML의 주요 요소

h1>~<h6 : 제목 (Heading)
p : 문단 (Paragraph)
a : 링크 (Anchor)
img : 이미지 삽입
table, ul, ol : 표 & 목록
form : 사용자 입력 폼

📌 2. CSS (Cascading Style Sheets) - 스타일 적용

CSS는 HTML을 꾸미는 역할(색상, 크기, 배치 등)을 합니다.

✅ 예제

h1 {
    color: blue;
    font-size: 24px;
}
p {
    background-color: lightgray;
    padding: 10px;
}

위의 CSS를 적용하면 h1 태그는 파란색, p 태그는 회색 배경이 됩니다.

🔹 CSS의 주요 기능

색상 지정 (color, background-color)
글꼴 스타일 (font-size, font-family)
배치 조정 (margin, padding)
레이아웃 구성 (flexbox, grid)
애니메이션 효과 (transition, animation)

📌 3. JavaScript - 동적 기능 추가

JavaScript는 웹페이지에 동적인 기능을 추가하는 언어입니다.
사용자의 이벤트(클릭, 입력, 스크롤 등)에 반응하거나, HTML 요소를 변경할 수 있습니다.

✅ 예제

<button onclick="showMessage()">클릭하세요</button>
<p id="message"></p>

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

🔹 JavaScript의 주요 기능

이벤트 처리 (버튼 클릭, 키보드 입력 등)
DOM 조작 (HTML 요소 변경)
AJAX 요청 (백엔드 API와 데이터 교환)
애니메이션 (CSS와 함께 활용)
로컬 저장 (쿠키, localStorage)

📌 HTML, CSS, JavaScript는 어떻게 한 세트로 동작할까?

이 세 가지 기술은 함께 웹사이트를 구성하는 기본 요소가 됩니다.

🎯 역할 분담

HTML → 기본적인 콘텐츠를 배치
CSS → HTML을 보기 좋게 꾸밈
JavaScript → 웹페이지에 동적인 기능 추가

✅ 예제 (HTML + CSS + JavaScript 함께 사용)

<!DOCTYPE html>
<html>
<head>
    <title>HTML + CSS + JavaScript</title>
    <style>
        h1 {
            color: green;
        }
        .highlight {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>

    <h1 id="title">Hello, World!</h1>
    <button onclick="changeText()">텍스트 변경</button>

    <script>
        function changeText() {
            let title = document.getElementById("title");
            title.innerText = "JavaScript로 변경됨!";
            title.classList.add("highlight");
        }
    </script>

</body>
</html>