기본 구조
<!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>디지털 포렌식 II</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('폼 제출 처리');
});
Comments
0 B
|0 👍
/0 👎
0 B
|0 👍
/0 👎
0 B
|0 👍
/0 👎