웹 프로그래밍을 시작하기 위해서는 HTML, CSS, 그리고 JavaScript라는 세 가지를 이해해야 합니다.
이 글에서는 각 기술의 역사, 특징, 기본 사용법 및 간단한 예제를 공유하겠습니다.
HTML (HyperText Markup Language) 소개 및 역사
HTML은 웹 페이지의 구조를 설계하고 표현하는 데 사용되는 마크업 언어입니다.
HTML은 "HyperText Markup Language"의 약자이며, 웹 페이지의 텍스트, 이미지, 표, 링크 등의 콘텐츠를 구조화합니다.
HTML의 역사는 1990년대 초 약 30년 전, Tim Berners-Lee가 웹의 기반이 되는 시스템을 구축하면서 시작되었습니다.
오늘 날, HTML은 웹 상에서 정보를 구조화하는 데 사용되며 최신 버전인 HTML5는 추가 시멘틱 엘리먼트와 기능을 제공합니다.
HTML 간단한 예제
<!DOCTYPE html>
<html>
<head>
<title>HTML 소개 페이지</title>
</head>
<body>
<h1>웹 프로그래밍 기초: HTML</h1>
<p>HTML은 웹 페이지의 구조를 만드는 마크업 언어입니다.</p>
<p>자세한 내용은 <a href="https://www.w3schools.com/html/">W3Schools HTML 페이지</a>를 참조하세요.</p>
</body>
</html>CSS (Cascading Style Sheets) 소개 및 역사
CSS는 웹 페이지의 스타일 및 레이아웃을 디자인하는 데 사용되는 언어입니다.
CSS는 "Cascading Style Sheets"의 약자로, 웹 페이지의 화려한 비주얼 및 사용자 경험을 제공하는 데 필수적입니다.
CSS의 역사는 1996년 Håkon Wium Lie 및 Bert가 초안을 제안한 것으로 시작되었습니다. 웹 발전 초기에는 시각적 요소를 처리하는 데 어려움이 있었지만, CSS는 웹 페이지 스타일 관리를 혁신적으로 진화시켰습니다.
CSS 간단한 예제
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
text-align: center;
}
p {
font-size: 16px;
color: #777;
}
a {
color: #ff9900;
text-decoration: none;
}
a:hover {
color: #ff6600;
text-decoration: underline;
}JavaScript 소개 및 역사
JavaScript는 웹 페이지의 동적 상호 작용을 제어하는 다목적 프로그래밍 언어입니다.
원래 1995년에 Netscape의 Brendan Eich에 의해 개발되었습니다. 이 언어는 웹 페이지에서 이벤트 처리, 애니메이션, 폼 유효성 검사, DOM 조작 등 다양한 기능을 제공합니다.
JavaScript 간단한 예제
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 소개 페이지</title>
<style>
button {
display: block;
margin: 10px 0;
}
</style>
</head>
<body>
<h1>웹 프로그래밍 기초: JavaScript</h1>
<p id="click-result">버튼을 클릭해보세요.</p>
<button id="click-button">클릭</button>
<script>
var button = document.getElementById("click-button");
var result = document.getElementById("click-result");
button.addEventListener("click", function() {
result.innerHTML = "버튼을 성공적으로 클릭했습니다!";
});
</script>
</body>
</html>이로써 HTML, CSS, JavaScript의 기본 개념, 소개, 역사를 다루었습니다.
감사합니다.
'Developer > Web Frontend' 카테고리의 다른 글
| <JavaScript> 기본 문법 정리 (0) | 2023.08.19 |
|---|---|
| <JavaScript> 변수, 상수, 데이터 타입 및 타입 변환 (0) | 2023.08.19 |
| API 기본 사용 가이드 (0) | 2023.07.08 |
| Firebase 는 무엇일까요 (0) | 2023.07.08 |
| 안드로이드(dp, sp), iOS(pt), 픽셀 (0) | 2023.07.06 |