krsypark/1학기기말_HTML최종정리
## 1) HTML 기본 뼈대 (시험용 최소 템플릿)
아래는 **기능별로 따로** 정리한 “시험용 대표 코드”들임. (교수님 빈칸도 여기서 많이 나옴)
### 1-1) alert (버튼 클릭 → 알림창)
```html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>alert</title></head>
<body>
<button onclick="hello()">클릭</button>
<script>
// 버튼 클릭 시 hello() 실행
function hello() {
alert("안녕하세요!"); // 알림창
}
</script>
</body>
</html>
```
### 1-2) confirm (확인/취소 → true/false)
```html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>confirm</title></head>
<body>
<button onclick="check()">확인창</button>
<script>
function check() {
let result = confirm("삭제하시겠습니까?"); // 확인=true, 취소=false
if (result) {
alert("삭제 완료");
} else {
alert("취소");
}
}
</script>
</body>
</html>
```
### 1-3) prompt (문자 입력 받기)
```html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>prompt</title></head>
<body>
<button onclick="inputName()">이름 입력</button>
<script>
function inputName() {
let name = prompt("이름을 입력하세요"); // 입력값(문자열) / 취소(null)
if (name) {
alert(name + "님 안녕하세요");
}
}
</script>
</body>
</html>
```
### 1-4) 현재 시간 출력 (Date + innerHTML)
```html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>time</title></head>
<body>
<button onclick="showTime()">시간 보기</button>
<h2 id="time"></h2> <!-- JS가 getElementById("time")로 찾아서 innerHTML로 출력 -->
<script>
function showTime() {
let now = new Date();
document.getElementById("time").innerHTML = now.toLocaleTimeString();
}
</script>
</body>
</html>
```
### 1-5) 시간에 따른 인사말 (조건문 if / else if / else)
```html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>greeting</title></head>
<body>
<button onclick="greet()">인사말</button>
<h2 id="msg"></h2> <!-- JS가 innerHTML로 출력 -->
<script>
function greet() {
let hour = new Date().getHours(); // 0~23 (getHours() 괄호 필수)
if (hour < 12) {
document.getElementById("msg").innerHTML = "좋은 아침입니다";
} else if (hour < 18) {
document.getElementById("msg").innerHTML = "좋은 오후입니다";
} else {
document.getElementById("msg").innerHTML = "좋은 저녁입니다";
}
}
</script>
</body>
</html>
```
### 1-6) 입력값 출력 (input.value)
```html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>input</title></head>
<body>
<input type="text" id="name">
<button onclick="show()">확인</button>
<h2 id="result"></h2>
<script>
function show() {
let name = document.getElementById("name").value; // 입력값 읽기
document.getElementById("result").innerHTML = name + "님 환영합니다."; // 출력
}
</script>
</body>
</html>
```
### 1-7) 숫자 계산기 (Number로 형변환)
```html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>calc</title></head>
<body>
<input type="number" id="num1"> + <input type="number" id="num2">
<button onclick="calc()">계산</button>
<h2 id="answer"></h2>
<script>
function calc() {
// value는 기본이 '문자열'이라 Number()로 숫자 변환해야 계산이 됨
let n1 = Number(document.getElementById("num1").value);
let n2 = Number(document.getElementById("num2").value);
document.getElementById("answer").innerHTML = n1 + n2;
}
</script>
</body>
</html>
```
### 1-8) 클릭 횟수 (전역변수)
```html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>count</title></head>
<body>
<button onclick="count()">클릭</button>
<h2 id="cnt">0</h2>
<script>
let num = 0; // 전역변수: 함수 밖에 있어야 누적됨
function count() {
num++;
document.getElementById("cnt").innerHTML = num;
}
</script>
</body>
</html>
```
### 1-9) 배경색 변경 (document.body.style)
```html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>bg</title></head>
<body>
<button onclick="changeColor()">색 변경</button>
<script>
function changeColor() {
document.body.style.backgroundColor = "skyblue";
}
</script>
</body>
</html>
```
### 1-10) 이미지 변경 (img.src)
```html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>img</title></head>
<body>
<img id="pic" src="https://via.placeholder.com/200">
<button onclick="changeImg()">이미지 변경</button>
<script>
function changeImg() {
document.getElementById("pic").src = "https://via.placeholder.com/200/ff0000";
}
</script>
</body>
</html>
```
---
## 2) CSS 선택자/적용 정리 (초압축)
- `h3 { ... }` : **태그 선택자** (페이지의 모든 h3에 적용)
- `#position { ... }` : **id 선택자** (id는 한 페이지에서 보통 1개)
- HTML에서: `<span id="position"> ... </span>`
- `.strong { ... }` : **class 선택자** (여러 곳에 반복 적용 가능)
- HTML에서: `<span class="strong"> ... </span>`