HTML, JavaScript, CSS: 웹 개발의 3요소와 HTML5의 진화
안녕하세요! 웹 개발의 세계에 오신 여러분을 환영합니다.
이번 글에서는 웹의 핵심 3요소인 HTML, CSS, JavaScript에 대해 살펴보고, HTML5의 진화와 실습 코드를 통해 쉽게 따라할 수 있는 예제를 제공해드립니다.
1. HTML: 웹 페이지의 뼈대
HTML은 웹 페이지를 구성하는 기본 언어입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>나의 첫 웹 페이지</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것이 나의 첫 번째 HTML입니다.</p>
</body>
</html>
TIP: 위 코드를 복사해서 메모장에 붙여넣고
index.html로 저장 후 브라우저에서 실행해보세요!
2. CSS: 웹 페이지의 스타일
CSS는 글꼴, 색상, 레이아웃 등을 지정해 HTML을 아름답게 꾸며줍니다.
<style>
body {
background-color: #f5f5f5;
color: #333;
font-family: Arial, sans-serif;
}
h1 {
color: #3498db;
}
</style>
3. JavaScript: 웹 페이지에 생명을
JavaScript는 동적인 기능을 추가합니다. 예를 들어 버튼 클릭 시 메시지를 출력하게 만들 수 있습니다.
<button onclick="alert('안녕하세요!')">눌러보세요</button>
TIP: 실습을 위해 위 코드를 HTML 문서의
<body> 안에 추가해보세요.
4. HTML5의 핵심 진화 요소
<header>, <nav>, <footer>와 같은 시맨틱 태그로 구조 명확화<video>,<audio>를 이용한 멀티미디어 지원- localStorage를 통한 클라이언트 데이터 저장
- Geolocation API로 위치 추적 가능
<video controls width="300">
<source src="sample.mp4" type="video/mp4">
브라우저가 video 태그를 지원하지 않습니다.
</video>
5. 로컬 스토리지 예제
<button onclick="localStorage.setItem('name', '홍길동')">이름 저장</button>
<button onclick="alert(localStorage.getItem('name'))">이름 보기</button>
6. 웹 개발 도구 추천
HTML5 문서를 작성하려면 아래 도구를 사용해보세요.
- 메모장: 간단한 연습에 적합
- Visual Studio Code: 자동완성, 미리보기, 확장 기능 지원
마무리하며
HTML, CSS, JavaScript는 웹 개발의 필수 3요소이며, HTML5는 이 세 가지를 더욱 강력하게 만들어 웹의 진화를 주도하고 있습니다. 오늘 소개한 예제들을 직접 따라 해보면서 웹 개발의 기초를 탄탄히 다져보세요!
다음 글에서는 각각의 기술에 대해 더 깊이 파고들 예정입니다. 감사합니다 😊
'HTML' 카테고리의 다른 글
| HTML.자바스크립트 기초 (0) | 2025.05.24 |
|---|---|
| HTML.고급 CSS (0) | 2025.05.24 |
| HTML.CSS로 웹 페이지 꾸미기 (0) | 2025.05.24 |
| HTML.문서 구조화와 웹 폼 (0) | 2025.05.24 |
| HTML.웹 프로그래밍(Web Programming) (0) | 2025.05.24 |