웹사이트를 구성하는 HTML, CSS, 자바스크립트의 기초 설명

10월 16, 2024 dev.hifive@gmail.com

프레임워크, AI 웹사이트 빌더 등 손쉽게 웹사이트를 만들 수 있습니다.
하지만, 웹개발언어의 기초를 모르면 자세한 수정이나 자신이 표현하고 싶은 것에 제한이 생길 수 있습니다.
까페24 (Cafe24), 부트스트랩(Bootstrap) 등 많은 프레임워크와 플랫폼들은 모두 아래(HTML, CSS, Javascript)의 언어 기반 (+α)으로 만들어집니다.
아주 기본적으로 웹사이트가 어떻게 만들어지는지 알아보겠습니다.

1. 웹 개발의 기초: HTML, CSS, 자바스크립트

웹 개발을 시작할 때 가장 먼저 마주치는 세 가지 주요 언어는 HTML, CSS, 자바스크립트입니다. 이 세 언어는 각각 고유한 역할을 하며, 서로 결합되어 우리가 보는 웹사이트를 완성합니다. 웹페이지의 구조, 스타일, 그리고 동적인 기능을 모두 제공하는 이 언어들은 각각 다른 목적을 가지고 있지만, 함께 사용될 때 비로소 완벽한 웹 경험을 만들어냅니다. 이번 글에서는 각 언어의 역사와 역할을 이해하고, 이들이 웹사이트에서 어떻게 상호작용하는지 알아보겠습니다.

2. HTML: 웹페이지의 골격

2.1. HTML의 역사

Photo by Paul Clarke, CC BY-SA 4.0 https://creativecommons.org/licenses/by-sa/4.0, via Wikimedia Commons

**HTML(HyperText Markup Language)**는 1991년 팀 버너스 리(Tim Berners-Lee)가 처음 제안한 웹의 기초 언어입니다. 팀 버너스 리는 웹 브라우저와 하이퍼텍스트를 통해 정보를 연결하는 아이디어를 기반으로 HTML을 개발했습니다. 처음에는 문서 간의 링크와 간단한 문서 구조만을 지원했지만, 시간이 지나면서 점차 웹페이지를 구축하는 데 필수적인 요소로 자리 잡았습니다. 현재 사용되는 HTML5는 멀티미디어, 그래픽, 오프라인 지원, 성능 최적화 등 다양한 기능을 제공하며 웹페이지 제작의 기본 언어로 자리잡고 있습니다.

2.2. HTML의 역할과 특징

HTML은 웹페이지의 [골격]을 담당합니다. 웹페이지에 표시될 콘텐츠의 구조를 정의하고, 다양한 요소를 배치하며, 각 요소들이 어떻게 보여질지를 결정합니다. HTML은 태그(tag)를 사용하여 텍스트, 이미지, 링크 등 다양한 콘텐츠를 웹페이지에 삽입합니다. 예를 들어, 제목을 표시하는 <h1> 태그, 단락을 정의하는 <p> 태그 등이 있습니다. 이러한 태그는 브라우저가 해당 요소를 어떻게 렌더링할지 알려주는 중요한 역할을 합니다.

2.3. HTML 예시 코드

<!DOCTYPE html>
<html>
  <head>
    <title>나의 첫 웹페이지</title>
  </head>
  <body>
    <h1>환영합니다!</h1>
    <p>이것은 HTML로 작성된 첫 번째 웹페이지입니다.</p>
    <img src="image.jpg" alt="이미지 설명">
    <a href="https://www.example.com">이곳을 클릭하세요</a>
  </body>
</html>

이 예시는 HTML 문서의 기본 구조를 보여줍니다. <h1> 태그는 제목을 표시하고, <p> 태그는 단락을 나타내며, <img> 태그는 이미지를 삽입하고, <a> 태그는 하이퍼링크를 생성합니다.

3. CSS: 웹사이트의 스타일링

3.1. CSS의 역사

**CSS(Cascading Style Sheets)**는 1996년 W3C(World Wide Web Consortium)에 의해 처음 발표되었습니다. HTML은 웹페이지의 구조를 정의하지만, CSS는 그 구조에 스타일을 입히는 역할을 합니다. 이전에는 HTML 내에서 스타일을 직접 지정했으나, CSS의 도입으로 HTML과 스타일을 분리하여 더욱 효율적이고 일관된 디자인이 가능해졌습니다. CSS는 특히 대규모 웹사이트에서 일관된 스타일을 유지하는 데 중요한 역할을 합니다.

3.2. CSS의 역할과 특징

CSS는 웹페이지의 시각적 요소를 관리합니다. 색상, 폰트, 여백, 레이아웃 등 모든 디자인 요소는 CSS로 정의됩니다. 이를 통해 개발자는 HTML의 구조를 변경하지 않고도 전체 웹사이트의 스타일을 수정할 수 있습니다. 또한, CSS는 여러 기기와 화면 크기에 맞춘 반응형 디자인을 구현하는 데 매우 유용합니다. 이렇게 함으로써 사용자는 데스크탑, 태블릿, 스마트폰 등 다양한 환경에서 동일한 웹사이트를 최적화된 방식으로 경험할 수 있습니다.

3.3. CSS 예시 코드

body {
  background-color: lightblue;
}

h1 {
  color: hotpink;
  text-align: center;
}

p {
  font-family: Arial, sans-serif;
  font-size: 26px;
}

이 CSS 코드는 HTML 문서에 스타일을 적용합니다.

body 요소의 배경색은 lightblue로 설정되며, h1 요소의 텍스트는 중앙에 정렬되고 navy 색상을 가집니다.
p 태그는 Arial 폰트를 사용하며, 글씨 크기는 16px로 설정됩니다.

각 요소들의 스타일을 입히는 것이라고 간단히 이해를 시작하시면 좋습니다.

4. 자바스크립트: 동적 기능 구현

4.1. 자바스크립트의 역사

**자바스크립트(JavaScript)**는 1995년 넷스케이프(Netscape)에서 브렌던 아이크(Brendan Eich)가 개발한 언어입니다. 처음에는 간단한 스크립팅 언어로서 웹 브라우저에서 동작하는 상호작용을 제공했지만, 현재는 서버 측 프로그래밍, 모바일 애플리케이션, 게임 개발 등 다양한 분야에서 사용되고 있습니다. 자바스크립트는 웹페이지에 동적인 기능을 추가하는 데 필수적인 언어입니다.

4.2. 자바스크립트의 역할과 특징

자바스크립트는 웹페이지에 동적인 기능을 추가합니다. 예를 들어, 사용자가 버튼을 클릭했을 때 페이지의 일부를 즉시 변경하거나, 데이터를 입력하고 검증하는 작업을 수행할 수 있습니다. 자바스크립트는 브라우저 내에서 실행되며, HTML 및 CSS와 결합하여 사용자의 상호작용에 반응하는 웹사이트를 구축할 수 있습니다. 또한, AJAX(Asynchronous JavaScript and XML)를 통해 웹페이지를 새로고침하지 않고도 데이터를 서버와 주고받는 기능을 구현할 수 있습니다.

4.3. 자바스크립트 예시 코드

javascript코드 복사document.getElementById("myButton").onclick = function() {
  alert("버튼이 클릭되었습니다!");
};

이 자바스크립트 코드는 사용자가 버튼을 클릭할 때 경고 메시지를 띄우는 기능을 제공합니다. HTML 요소와 상호작용하여 동적 웹페이지를 만들 수 있습니다.

5. 세 언어의 결합: 웹사이트가 작동하는 원리

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

HTML, CSS, 자바스크립트는 각각 고유한 역할을 하지만, 이들이 결합될 때 비로소 완전한 웹사이트가 완성됩니다. HTML은 웹페이지의 뼈대를 만들고, CSS는 그 뼈대에 시각적 스타일을 입히며, 자바스크립트는 여기에 동적이고 상호작용 가능한 기능을 추가합니다.

5.2. 웹사이트 로딩 과정

웹페이지를 방문할 때, 브라우저는 먼저 HTML 파일을 로드하고, 이를 통해 문서의 구조를 파악합니다. 이후 CSS 파일을 적용하여 스타일을 지정하고, 마지막으로 자바스크립트를 로드하여 동적인 기능을 활성화합니다. 이렇게 HTML, CSS, 자바스크립트는 순차적으로 실행되며, 사용자에게 완성된 웹페이지를 보여줍니다.

5.3. 세 언어의 결합 예시

html코드 복사<!DOCTYPE html>
<html>
  <head>
    <title>나의 웹페이지</title>
    <style>
      body {
        background-color: lightyellow;
      }
      h1 {
        color: green;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>환영합니다!</h1>
    <p>이 버튼을 클릭해보세요.</p>
    <button id="myButton">클릭</button>

    <script>
      document.getElementById("myButton").onclick = function() {
        alert("버튼이 클릭되었습니다!");
      };
    </script>
  </body>
</html>

이 예시는 HTML, CSS, 자바스크립트를 함께 사용하여 웹페이지를 구성하는 기본적인 방식을 보여줍니다. 버튼을 클릭하면 자바스크립트가 동작하여 경고 메시지가 나타납니다.

6. 마무리: 웹 개발의 다음 단계

지금까지 HTML, CSS, 자바스크립트가 각각 어떻게 작동하며, 웹사이트를 구성하는 데 어떤 역할을 하는지 알아보았습니다. 이 세 가지 언어는 웹 개발의 기초를 이루며, 이를 잘 이해하는 것이 더 나은 웹사이트를 만드는 첫걸음입니다.

➡️ 다음 글에서는 이러한 기초를 바탕으로 반응형 웹 디자인과 프론트엔드 프레임워크를 사용하여 더욱 복잡하고 동적인 웹사이트를 만드는 방법을 소개할 예정입니다.👋

매직캣콘