1. HTML이란?
HTML( HyperText Markup Language )은 웹 문서의 뼈대와 의미를 정의하는 마크업 언어로 텍스트, 이미지, 링크, 폼 등 페이지의 구조와 의미(시맨틱)를 태그로 표현한다.
1-1. HTML 기본 구조
가장 최소한의 문서 구조는 다음과 같음.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹페이지 제목</title>
</head>
<body>
<h1>안녕하세요</h1>
<p>이것은 HTML 예시입니다.</p>
</body>
</html>1-2. 구성 요소
<!DOCTYPE html>→ HTML5 문서임을 선언<html>→ HTML 문서의 루트(root) 요소<head>→ 문서 정보(메타데이터, CSS, JS, 제목 등)<body>→ 사용자에게 보이는 콘텐츠
1-3. 주요 태그 예시
<h1>제목</h1> <!-- 가장 큰 제목 -->
<p>문단</p> <!-- 텍스트 단락 -->
<a href="https://example.com">링크</a>
<img src="image.jpg" alt="이미지 설명">
<ul>
<li>리스트 항목 1</li>
<li>리스트 항목 2</li>
</ul>2. CSS (Cascading Style Sheets)
CSS는 HTML 요소의 디자인(Style)을 담당하며 색상, 크기, 레이아웃, 애니메이션 등 시각적인 표현을 정의한다.
2-1. 기본 구조
/* 선택자 { 속성: 값; } */
h1 {
color: blue;
font-size: 2em;
}
p {
color: gray;
line-height: 1.5;
}
2-2. 구성 요소
- 선택자(Selector) → 스타일을 적용할 HTML 요소 지정
- 속성(Property) → 어떤 스타일을 변경할지 결정
- 값(Value) → 속성에 적용할 구체적인 값
2-3. 예시
<head>
<style>
body { background-color: #f0f0f0; }
h1 { color: green; }
</style>
</head>
<body>
<h1>CSS 예시</h1>
<p>이 문장은 회색입니다.</p>
</body>
3. JavaScript (JS)
JavaScript는 웹페이지에 동작(Interaction)을 부여하는 프로그래밍 언어로 HTML이 구조, CSS가 디자인을 담당한다면, JavaScript는 버튼 클릭, 데이터 처리, 애니메이션 등 동적인 기능을 제공한다.
3-1. 기본 구조 및 문법
// 경고창 띄우기
alert("Hello, JavaScript!");
// HTML 요소 조작
document.getElementById("myText").innerHTML = "변경된 내용";
---
// 변수 선언
let name = "ohback";
const age = 25;
// 조건문
if (age > 20) {
console.log("성인입니다.");
}
// 함수 선언
function greet(name) {
return `안녕하세요, ${name}님!`;
}
// 객체 & 배열
const user = { name: "Soo", age: 25 };
const fruits = ["사과", "바나나", "포도"];
// 반복문
for (let fruit of fruits) {
console.log(fruit);
}3-2. 구성 요소
- 변수 → 데이터를 저장
- 함수 → 동작(로직)을 묶어 실행
- 이벤트 → 사용자 동작(클릭, 입력 등)에 반응
3-3. 예시
<body>
<h1 id="myText">원래 내용</h1>
<button onclick="changeText()">텍스트 변경</button>
<script>
function changeText() {
document.getElementById("myText").innerHTML = "변경 완료!";
}
</script>
</body>
4. HTML, CSS, JS의 관계
- HTML → 페이지의 구조를 만든다. (건물의 골격)
- CSS → 구조에 디자인을 입힌다. (건물의 인테리어)
- JavaScript → 구조와 디자인에 동작을 부여한다. (자동문, 전등 스위치 등)
한마디로: HTML은 내용, CSS는 스타일, JS는 동작이다!
5. HTML vs Markdown?
기록은 기억을 지배한다.