웹 보안 - HTML & JavaScript 기초

기본 구조
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>페이지 제목</title>
</head>
<body>
    <!-- 페이지 내용 -->
    <h1>안녕하세요</h1>
    <p>이것은 단락입니다.</p>
</body>
</html>

주요 HTML 태그
1. 제목 태그
<h1>가장 큰 제목</h1>
<h2>두 번째 제목</h2>
<h3>세 번째 제목</h3>
<h4>네 번째 제목</h4>
<h5>다섯 번째 제목</h5>
<h6>가장 작은 제목</h6>

2. 텍스트 관련 태그
<p>단락(Paragraph)</p>
<br> <!-- 줄바꿈 -->
<strong>굵은 텍스트</strong>
<em>강조된 텍스트</em>
<span>인라인 컨테이너</span>

3. 링크와 이미지
<a href="https://www.example.com">링크 텍스트</a>
<img src="image.jpg" alt="이미지 설명">

3. HTML 실습
실습 1: 간단한 프로필 페이지
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>내 프로필</title>
</head>
<body>
    <h1>홍길동의 프로필</h1>

    <h2>자기소개</h2>
    <p>안녕하세요. 한세대학교 학생 홍길동입니다.</p>

    <h2>관심 분야</h2>
    <ul>
        <li>웹 보안</li>
        <li>인공지능 프로그래밍</li>
        <li>리눅스 시스템</li>
        <li>디지털 포렌식 고급</li>
    </ul>

    <h2>연락처</h2>
    <p>이메일: <a href="mailto:[email protected]">[email protected]</a></p>
</body>
</html>

실습 2: 폼(Form) 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>로그인 폼</title>
</head>
<body>
    <h1>로그인</h1>

    <form action="/login" method="POST">
        <label for="username">아이디:</label>
        <input type="text" id="username" name="username" required>
        <br><br>

        <label for="password">비밀번호:</label>
        <input type="password" id="password" name="password" required>
        <br><br>

        <button type="submit">로그인</button>
    </form>
</body>
</html>

[ 폼 요소 설명 ]
<form>: 폼의 시작과 끝
action: 데이터를 전송할 URL
method: HTTP 메서드 (GET, POST)
<input>: 입력 필드
type: 입력 타입 (text, password, email, number 등)
<label>: 입력 필드 레이블

[ JavaScript 사용 방법 ]

1. 인라인 스크립트
<button onclick="alert('클릭!')">버튼</button>

2. 내부 스크립트
<script>
    console.log('Hello, JavaScript!');
</script>

3. 외부 스크립트
<script src="script.js"></script>

변수 선언
// var (구식 - 사용 비권장)
var name = '홍길동';

// let (변경 가능한 변수)
let age = 20;
age = 21; // 변경 가능

// const (상수 - 변경 불가)
const PI = 3.14159;
// PI = 3.14; // 에러 발생!

데이터 타입
// 숫자
let number = 42;
let decimal = 3.14;

// 문자열
let text = "안녕하세요";
let quote = '작은따옴표도 가능';

// 불리언
let isStudent = true;
let hasGraduated = false;

// null과 undefined
let empty = null;
let notDefined;

// 배열
let fruits = ['사과', '바나나', '오렌지'];

// 객체
let person = {
    name: '홍길동',
    age: 20,
    major: '융합보안전공'
};

[ JavaScript 실습 ]

연산자
// 산술 연산자
let a = 10;
let b = 3;

console.log(a + b);  // 13
console.log(a - b);  // 7
console.log(a * b);  // 30
console.log(a / b);  // 3.333...
console.log(a % b);  // 1 (나머지)

// 비교 연산자
console.log(5 == '5');   // true (값만 비교)
console.log(5 === '5');  // false (타입도 비교) - 권장!
console.log(10 > 5);     // true
console.log(10 <= 10);   // true

// 논리 연산자
console.log(true && false);  // false (AND)
console.log(true || false);  // true (OR)
console.log(!true);          // false (NOT)

조건문
let score = 85;

if (score >= 90) {
    console.log('A학점');
} else if (score >= 80) {
    console.log('B학점');
} else if (score >= 70) {
    console.log('C학점');
} else {
    console.log('재수강');
}

반복문
// for 문
for (let i = 0; i < 5; i++) {
    console.log('반복 ' + i);
}

// while 문
let count = 0;
while (count < 3) {
    console.log('카운트: ' + count);
    count++;
}

// 배열 반복
let colors = ['빨강', '파랑', '초록'];
for (let color of colors) {
    console.log(color);
}

함수
// 함수 선언
function greet(name) {
    return '안녕하세요, ' + name + '님!';
}

console.log(greet('홍길동')); // 안녕하세요, 홍길동님!

// 화살표 함수 (ES6)
const add = (a, b) => {
    return a + b;
};

// 간단한 형태
const multiply = (a, b) => a * b;

console.log(add(5, 3));      // 8
console.log(multiply(4, 2)); // 8

[ 이벤트 처리 ]
이벤트 리스너 등록
// HTML에서 직접 (비권장)
<button onclick="alert('클릭!')">버튼</button>

// JavaScript에서 등록 (권장)
let button = document.getElementById('myButton');

button.addEventListener('click', function() {
    alert('버튼이 클릭되었습니다!');
});

// 화살표 함수 사용
button.addEventListener('click', () => {
    console.log('클릭 이벤트 발생');
});

주요 이벤트 타입
// 마우스 이벤트
element.addEventListener('click', handleClick);
element.addEventListener('dblclick', handleDoubleClick);
element.addEventListener('mouseenter', handleMouseEnter);
element.addEventListener('mouseleave', handleMouseLeave);

// 키보드 이벤트
input.addEventListener('keydown', handleKeyDown);
input.addEventListener('keyup', handleKeyUp);
input.addEventListener('keypress', handleKeyPress);

// 폼 이벤트
form.addEventListener('submit', handleSubmit);
input.addEventListener('change', handleChange);
input.addEventListener('focus', handleFocus);
input.addEventListener('blur', handleBlur);

// 페이지 이벤트
window.addEventListener('load', handlePageLoad);
document.addEventListener('DOMContentLoaded', handleDOMReady);

이벤트 객체
button.addEventListener('click', function(event) {
    console.log('이벤트 타입:', event.type);
    console.log('타겟 요소:', event.target);
    console.log('마우스 X 좌표:', event.clientX);
    console.log('마우스 Y 좌표:', event.clientY);

    // 기본 동작 막기
    event.preventDefault();
});

// 폼 제출 막기 예시
form.addEventListener('submit', function(event) {
    event.preventDefault(); // 페이지 새로고침 방지
    console.log('폼 제출 처리');
});