웹

[웹] 웹 개발을 위한 HTML, CSS, JavaScript 기초 뽀개기!

alphabet 2023. 5. 27. 03:09

1. 웹 개발의 세 가지 기둥: HTML, CSS, JavaScript

웹 개발을 위해 필수적으로 알아야 하는 세 가지 기본 언어는 HTML, CSS, JavaScript입니다. HTML은 웹 페이지의 구조를 정의하는 데 사용되고, CSS는 웹 페이지의 스타일을 정의하는 데 사용됩니다. JavaScript는 웹 페이지에 동적 기능을 추가하는 데 사용됩니다.

2. HTML: 웹의 뼈대

HTML은 'Hyper Text Markup Language'의 약자로, 웹페이지의 뼈대를 이루는 언어입니다. 태그(tag)라고 불리는 코드 조각들을 사용해 웹페이지의 구조를 정의합니다. 기본적인 HTML 문서의 구조는 다음과 같습니다:

<!DOCTYPE html>
<html>
  <head>
    <title>페이지 제목</title>
  </head>
  <body>
    <h1>제목</h1>
    <p>단락.</p>
  </body>
</html>


이 HTML 코드는 웹페이지에 제목과 한 단락을 출력합니다.

3. CSS: 웹의 옷차림

CSS는 'Cascading Style Sheets'의 약자로, HTML로 작성된 웹페이지에 스타일을 적용하는데 사용됩니다. 색상, 레이아웃, 폰트 등 웹페이지의 디자인 요소를 조절할 수 있습니다. 기본적인 CSS는 다음과 같습니다: 

body {
  background-color: lightblue;
}

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

p {
  font-family: verdana;
  font-size: 20px;
}


이 CSS 코드는 body에 배경색을, h1 태그에는 텍스트 정렬과 색상을, p 태그에는 글꼴과 글자 크기를 적용합니다.

4. JavaScript: 웹의 생명력

JavaScript는 웹페이지에 동적인 기능을 추가하는데 사용되는 프로그래밍 언어입니다. 웹페이지에 사용자 상호작용을 추가하거나, API에서 데이터를 가져오는 등 다양한 동작을 구현할 수 있습니다. 기본적인 JavaScript 코드는 다음과 같습니다:

function greetUser(name) {
  alert("Hello, " + name);
}



greetUser("John Doe");
이 JavaScript 코드는 함수를 정의하고, 그 함수를 이용해 사용자에게 인사말을 보냅니다.

5. 마치며

HTML, CSS, JavaScript는 웹 개발의 기본적인 세 가지 요소입니다. 이 세 가지를 모두 이해하고 사용할 줄 알면, 웹페이지를 구성하고 동적 기능을 추가하는 데 필요한 대부분의 작업을 수행할 수 있습니다. 

다음 포스트에서는 이 세 가지 기술을 활용해 간단한 웹페이지를 만드는 방법에 대해 알아보겠습니다.