자기 개발과 IT 프로그래밍을 위한 여행

물처럼 흐르는 시간, 그 속에서의 여행

잡담실/G

HTML, CSS, JS의 이해와 예시

창조의 새싹 2023. 2. 7. 16:06

HTML(Hypertext Markup Language)은 웹 페이지를 만드는 데 사용되는 표준 마크업 언어입니다. HTML은 웹 페이지의 구조와 내용을 제공하고 요소와 속성을 정의하는 데 사용됩니다.

CSS(Cascading Style Sheets)는 웹 페이지의 모양과 느낌을 제어하는 데 사용되는 스타일시트 언어입니다. CSS는 글꼴 크기, 색상 및 레이아웃과 같이 HTML에 정의된 요소의 스타일을 정의하는 데 사용됩니다.

JavaScript는 대화형 동적 웹 페이지를 만드는 데 주로 사용되는 고급 동적 해석 프로그래밍 언어입니다. JavaScript를 사용하여 애니메이션, 양식 유효성 검사 및 AJAX 요청 만들기와 같은 웹 페이지에 상호 작용을 추가할 수 있습니다.

HTML의 예:

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <h1>Welcome to my website!</h1>
    <p>This is a paragraph of text.</p>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </body>
</html>

CSS의 예:

body {
  background-color: lightgray;
  font-family: Arial, sans-serif;
}

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

p {
  font-size: 16px;
  padding: 10px;
}

JavaScript의 예 : 

// Display an alert message
alert("Hello, world!");

// Get the value of an input field
var name = document.getElementById("name").value;

// Change the color of an element on a button click
document.getElementById("button").addEventListener("click", function() {
  document.getElementById("element").style.color = "red";
});

HTML, CSS 및 JavaScript는 함께 최신 웹 개발의 기초를 형성하며 동적 및 대화형 웹 사이트를 만드는 데 사용됩니다.