HTML, CSS, JavaScript란

by

웹 개발을 시작하면 가장 먼저 배우게 되는 기술이 바로 HTML, CSS, 그리고 JavaScript입니다. 이 세 가지는 웹사이트의 기본적인 구성 요소로, 각각의 역할이 뚜렷해 상호 보완적입니다. 이 글에서는 HTML, CSS, JavaScript가 무엇인지, 그리고 어떻게 사용되는지 쉽게 설명해드리겠습니다.

1. HTML: 웹의 뼈대

HTML(HyperText Markup Language)는 웹사이트의 구조를 만드는 언어입니다. 마치 집을 짓는 데 필요한 벽돌처럼, HTML은 웹 페이지의 제목, 문단, 이미지 등을 배치하는 역할을 합니다.

실제 예시: 간단한 HTML 구조

<!DOCTYPE html>
<html>
<head>
  <title>내 첫 웹페이지</title>
</head>
<body>
  <h1>환영합니다!</h1>
  <p>이것은 HTML로 만든 첫 번째 웹페이지입니다.</p>
</body>
</html>

위 코드에서는 <h1> 태그가 큰 제목을, <p> 태그가 문단을 만드는 역할을 합니다. 이렇게 HTML은 웹사이트의 기본 틀을 만드는 언어입니다.

2. CSS: 웹의 디자인

CSS(Cascading Style Sheets)는 HTML로 만든 구조에 디자인을 입히는 역할을 합니다. 글자의 색깔을 바꾸고, 크기를 조정하며, 배경을 꾸미는 등 시각적인 요소를 담당합니다.

실제 예시: CSS로 웹 꾸미기

<!DOCTYPE html>
<html>
<head>
  <title>내 첫 웹페이지</title>
  <style>
    body {
      background-color: #f0f8ff;
    }
    h1 {
      color: #2e8b57;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>환영합니다!</h1>
</body>
</html>

이 예시에서 CSS는 배경 색상을 바꾸고, 제목의 색상을 설정하며, 가운데 정렬하는 역할을 합니다. CSS를 통해 웹 페이지는 훨씬 더 시각적으로 매력적이게 됩니다.

3. JavaScript: 웹의 동작

JavaScript(JS)는 웹사이트에 기능을 추가하여 사용자와 상호작용할 수 있게 만듭니다. HTML과 CSS가 정적인 구조와 디자인을 제공한다면, JavaScript는 웹사이트에 생동감을 불어넣어 줍니다.

실제 예시: 버튼 클릭 시 텍스트 변경

<!DOCTYPE html>
<html>
<head>
  <title>내 첫 웹페이지</title>
  <style>
    h1 {
      color: #2e8b57;
    }
  </style>
</head>
<body>
  <h1 id="message">안녕하세요!</h1>
  <button onclick="changeText()">텍스트 변경</button>

  <script>
    function changeText() {
      document.getElementById('message').innerText = '반갑습니다!';
    }
  </script>
</body>
</html>

여기서 JavaScript는 버튼을 클릭했을 때 텍스트가 바뀌도록 하는 기능을 제공합니다. 이런 식으로 JavaScript는 웹사이트를 더 동적으로 만들어주며, 사용자와의 상호작용을 가능하게 합니다.

4. 세 가지 기술의 조합

HTML, CSS, JavaScript는 각각의 역할이 다르지만, 세 가지가 조합되었을 때 웹사이트는 완성됩니다. HTML로 기본 구조를 만들고, CSS로 꾸미며, JavaScript로 동작을 추가하는 것입니다. 이 조합 덕분에 우리가 일상적으로 사용하는 모든 웹사이트가 만들어집니다.

5. 마무리

HTML, CSS, JavaScript는 웹 개발의 기본이자 필수 요소입니다. 이 세 가지를 이해하고 활용할 수 있다면 누구나 자신만의 멋진 웹사이트를 만들 수 있습니다. 웹 개발의 첫걸음을 시작하고 싶다면, 이 세 가지 언어를 차근차근 배우는 것이 가장 좋은 방법입니다.

같이 보면 좋은 글

html, css, js 연습사이트 추천

Leave a Comment