가. JavaScript란?

• JavaScript는 오늘날 가장 많이 사용되는 프로그래밍 언어이다.

나. JavaScipt의 역할

• HTML: 요소들의 내용, 배치, 모양을 정하기 위해 사용하는 언어 / 색상이나 디자인 등의 수정은 불가능.
• CSS: 요소들의 색상, 크기 등의 스타일을 설정할 수 있음.
• JS: 웹 내부에서 발생하는 다양한 기능을 만들 수 있는 언어 / 웹을 움직이게 하는 웹의 근육이라고 표현할 수 있음.

  2. 변수와 상수

  가. 변수, 상수란?

  ▶ 값을 저장하는 박스

나. 변수 선언

// 1. 변수
let age = 27; // age 변수 선언, 초기화(초기값)
console.log(age);

age = 30;
console.log(age); // 변수 변경됨.

// let age;와 같이 초기값이 없이도 설정 가능
// let age = 40;과 같이 중복 선언 불가능

다. 상수 선언

// 2. 상수
const birth = "2002.10.03";
// birth = "123";으로 값 바꾸기 불가능
// const birth;와 같이 초기화 무조건 필요함 

▶ 가장 중요한 것은 변수와 다르게 상수는 무조건 초기화를 해야한다는 것

라. 변수 명명 규칙

1) 네이밍 규칙

// 3. 변수 명명규칙 (네이밍 규칙)
// 3-1. $, _를 제외한 기호는 사용할 수 없다.
let $_name

// 3-2. 숫자로 시작할 수 없다.
let name1;
// let 2name; (x)

// 3-3. 예약어를 사용할 수 없다.
// let let (x)
// let if (x)

2) 변수 명명 가이드

// 4. 변수 명명 가이드
let salesCount = 1;
let refundCount = 1;
let totalSalesCount = salesCount - refundCount;

▶ 협업을 위해 단순히 a, b로 쓰는 것이 아닌 이 변수가 어떤 것을 의미하는지 정확하게 표기하는 것이 원칙이다.

3. 자료형

가. 자료형이란?

▶ 자료형(Type) = '집합' 동일한 속성이나 특징을 가진 원소들을 묶은 것이다. ex) 고양이와 강아지는 '동물'이라는 집합으로 묶임.

나. 원시 타입

▶ 기본형 타입이라고도 불리며, 프로그래밍에 있어 가장 기본적인 값들의 타입을 의미한다.

1) Number Type

// 1. Number Type
let num1 = 27;
let num2 = 1.5;
let num3 = -20;
console.log(num1 + num2);
console.log(num1 - num2);
console.log(num1 * num2);
console.log(num1 / num2);
console.log(num1 % num2); // 모듈러 연산

이외에도 ▼

let inf = Infinity; // 양의 무한대
let minf = -Infinity; // 음의 무한대
let nan = NaN; // 수치 연산이 실패했을 때의 결과 값으로 보통 사용한다. (Not a Number)

2) String Type

// 2. String Type
let myName = "김유겸"; // 문자열은 무조건 작은 따옴표나 쌍 따옴표로 감싸야 함.
let myLocation = "인천";
let introduce = myName + myLocation; // js는 문자열 간 연산 가능

// 2-1. 템플릿 리터럴 문법
let introduceText = `${myName}은 ${myLocation}에 거주합니다.` 

▶ 백틱 안에서는 변수의 값을 동적으로 넣을 수 있다.

3) Boolean Type

// 3. Boolean Type
let isSwitchOn = true;
let isEmpty = false;

▶ 현재 상태를 나타내는데 주로 사용함.

4) Boolean Type

// 4. Null Type
let empty = null;

▶ 아무것도 없음을 나타냄.

5) Undefined Type

let none; // 아무것도 할당하지 않았으므로 'undefined' 출력

Null vs Undefined

• null은 명시적으로 할당해줘야하는 값.
• undefined는 변수를 선언하고 아무런 값을 할당하지 않았을 때 자동으로 들어가는 값.

다. 형 변환

▶ 어떤 값의 타입을 다른 타입으로 변경하는 것을 말함.

1) 묵시적 형 변환 (암묵적 형 변환)

▶ 개발자가 직접 설정하지 않아도 알아서 자바스크립트 엔진이 형 변환 하는 것을 말함.

// 1. 묵시적 형 변환
// -> 자바스크립트 엔진이 알아서 형 변환 하는 것

let num = 10;
let str = "20";

const result = num + str; // 덧셈 과정에서 str 타입으로 묵시적 변환 됨
console.log(result); // 10 + 20 = "1020"

2) 명시적 형 변환

▶ 개발자가 직접 함수 등을 이용해 형 변환을 일으킴. (내가 시켜야만 바뀜.)

// 2. 명시적 형 변환
// -> 프로그래머 내장 함수 등을 이용해서 직접 형 변환을 명시
// 2-1. 문자열 => 숫자
let str1 = "10";
let strToNum1 = Number(str1); // Number 내장 함수 사용
console.log(10 + strToNum1);

let str2 = "10개"
let strToNum2 = parseInt(str2); // parseInt 내장 함수 사용 -> 숫자가 앞쪽에 나와있어야 함
console.log(strToNum2);

// 2-2. 숫자 -> 문자열
let num1 = 20;
let numToStr1 = String(num1); // String 내장 함수 사용
console.log(numToStr1 + "입니다");

4. 연산자

가. 연산자(Operator)란?

▶ 프로그래밍에서의 다양한 연산을 위한 기호, 키워드를 말함. ex) 덧셈 연산자 (+), 곱셈 연산자 (*), 뺄셈 연산자 (-), 나눗셈 연산자 (/) 등

나. 연산자의 종류

1) 대입 연산자

▶ 변수의 값을 저장할 때 사용하는 가장 기초적인 연산자

// 1. 대입 연산자
let var1 = 1;

2) 산술 연산자

// 2. 산술 연산자
let num1 = 3 + 2;
let num2 = 3 - 2;

let num3 = 3 * 2;
let num4 = 3 / 2;
let num5 = 3 % 2;

let num6 = 1 + 2 * 10; // 곱셈, 나눗셈, 모듈러 연산이 우선순위가 높음, ()를 사용하면 우선순위 높아짐
console.log(num6);

3) 복합 대입 연산자

▶ 산술 연산자 + 대입 연산자

// 3. 복합 대입 연산자
let num7 = 10;
// num7 = num7 + 20;
num7 += 20; // or -= or *= or /= or %=
console.log(num7);

4) 증감 연산자

▶ 값을 1씩 늘리거나, 1씩 줄일때 사용하는 연산자

// 4. 증감 연산자
let num8 = 10;

console.log(++num8); // 전위 연산
console.log(num8++); // 후위 연산

5) 논리 연산자

▶ Boolean 타입의 값을 다룰때 사용하는 연산자

// 5. 논리 연산자
let or = true || false; // 하나만 참이면 참

let and = true && false; // 두개의 값이 참이어야 참

let not = !true; // 반전

console.log(or, and, not);

6) 비교 연산자

// 6. 비교 연산자
let comp1 = 1 === 2; // 동등 비교 연산자 (==일때는 자료형까지의 비교는 안됨.)
let comp2 = 1 !== 2; // 비동등 비교 연산자
console.log(comp1, comp2);

let comp3 = 2 > 1; // 대소 비교 연산자
let comp4 = 2 < 1;
console.log(comp3, comp4);

let comp5 = 2 >= 2;
let comp6 = 2 <= 2;
console.log(comp5, comp6);

7) null 병합 연산자

▶ 존재하는 값을 추려내는 기능을 하는 연산자로써, null이나 undefined가 아닌 값을 찾아낸다.

// 7. null 병합 연산자
let var1;
let var2 = 10; 
let var3 = 20;

let var4 = var1 ?? var2; // var1은 현재 undefined값, var2는 10
console.log(var4); // 따라서, var4에는 var2의 값인 10이 저장됨

let var5 = var1 ?? var3;
console.log(var5);

let var6 = var2 ?? var3; // 만약, 둘 다 undefined값이 아니라면?
console.log(var6); // 맨 처음에 적힌 값이 출력됨

//----example----
let userName =  "김유겸";
let userNickName = "6_yummy";
let displayName = userName ?? userNickName;
console.log(displayName);

8) typeof 연산자

▶ 값의 타입을 문자열로 반환하는 기능을 하는 연산자

// 8. typeof 연산자
let var7 = 1;
var7 = "hello";

let t1 = typeof var7;
console.log(t1); // string의 결과값 출력

9) 삼항 연산자

▶ 항을 3개 사용하는 연산자, 조건식을 이용하여 참 또는 거짓일 떄의 값을 다르게 반환한다.

// 9. 삼항 연산자
let var8 = 10;

// 요구사항: 변수 res에 var8의 값이 짝수 -> "짝", 홀수 -> "홀"
let res = var8 % 2 === 0 ? "짝수" : "홀수";
// ?를 기준으로 첫번째 항에는 조건식을 적기, :을 기준으로 왼쪽은 참일 때의 반환값, 오른쪽은 거짓일 때의 반환값
console.log(res);

→ 입력 양식이란? 사용자에게 정보를 입력받는 요소

1. 입력 양식 개요

• form 태그는 method 속성의 방식으로 action 속성 장소에 데이터를 전달한다.

<form action="전송 위치" method="전송 방식">
</form>

2. 입력 양식 종류

• 기본 입력 양식 태그

<!--<input type(속성)="text(속성 값)"-->
<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Basic</title>
</head>
<body>
    <form>
        <!-- 사용자가 입력하는 입력 양식-->
        <input type="text" name="text" value="text"><br>
        <input type="password" name="password" value="password"><br>
        <input type="file" name="file" value="file"><br>
        <input type="checkbox" name="checkbox" value="checkbox"><br>
        <input type="radio" name="radio" value="radio"><br>

        <!-- 보이지 않는 입력 양식-->
        <input type="hidden" name="hidden" value="hidden"><br>

        <!-- 버튼 -->
        <input type="button" name="button" value="button"><br>
        <input type="reset" name="reset" value="reset"><br>
        <input type="submit" name="submit" value="submit"><br>
        <input type="image" src="http://via.placeholder.com/100x100">
    </form>
</body>
</html>

→ input 태그에 type 속성을 지정해서 다양한 종류의 기본 입력 양식을 생성할 수 있다. • 간단한 입력 양식 생성

<body>
    <form>
        <table>
            <tr>
                <td><label for="username">이름</label></td>
                <td><input id="username" type="text" name="username"></td>
            </tr>
            <tr>
                <td>성별</td>
                <td>
                    <!-- radio 버튼은 name 속성을 같게 입력해야 여러 항목 중 하나만 선택됩니다.-->
                    <input id="man" type="radio" name="gender" value="m">
                    <label for="man">남자</label>
                    <input id="woman" type="radio" name="gender" value="w">
                    <label for="woman">여자</label>
                </td>
            </tr>
        </table>
        <input type="submit" value="가입">
    </form>
</body>

• 선택 가능한 입력 양식

<body>
    <!-- 한 항목만 선택하기 -->
    <select>
        <option>김밥</option>
        <option>떡볶이</option>
        <option>순대</option>
        <option>어묵</option>
    </select>
</body>

<body>
    <!-- 여러 항목 선택하기 -->
    <select multiple="multiple">
        <option>김밥</option>
        <option>떡볶이</option>
        <option>순대</option>
        <option>어묵</option>
    </select>
</body>

<body>
    <!-- 선택 옵션 묶기 -->
    <select>
        <optgroup label="HTML5">
            <option>Multimedia Tag</option>
            <option>Connectivity</option>
            <option>Device Access</option>
        </optgroup>
        <optgroup label="CSS3">
            <option>Animation</option>
            <option>3D Transform</option>
        </optgroup>
    </select>
</body>

<body>
    <fieldset>
        <legend>입력 양식</legend>
        <table>
            <tr>
                <td><label for="name">이름</label></td>
                <td><input id="name" type="text"></td>
            </tr>
            <tr>
                <td><label for="name">이메일</label></td>
                <td><input id="mail" type="email"></td>
            </tr>
        </table>
        <input type="submit">
    </fieldset>
</body>

※ textarea 주의 사항 → 글자를 여러 줄 입력할 때 사용하는 textarea 태그를 정렬하려고 다음과 같은 코드로 작성하는 경우가 많다.

<body>
    <textarea>
        Textarea 태그
        Textarea 태그
    </textarea>
</body>

그러나, 위의 코드처럼 입력하면 왼쪽의 들여쓰기가 입력 양식 내부에 출력된다. 따라서 다음과 같이 작성해야 한다.

<body>
    <textarea>Textarea 태그
Textarea 태그</textarea>
</body>

나. HTML5 문서 구조화

1. 공간 분할 태그

• 공간을 블록 형식으로 분할하기

<!-- 사용 플랫폼에 따라 행이 바뀌기 때문에 -->
<body>
    <div>div 태그 - block 형식</div>
    <div>div 태그 - block 형식</div>
    <div>div 태그 - block 형식</div>
    <div>div 태그 - block 형식</div>
    <div>div 태그 - block 형식</div>
</body>

• 공간을 인라인 형식으로 분할하기

<!-- 왼쪽에서 오른쪽으로 쌓임 -->
<body>
    <span>span 태그 - inline 형식</span>
    <span>span 태그 - inline 형식</span>
    <span>span 태그 - inline 형식</span>
    <span>span 태그 - inline 형식</span>
    <span>span 태그 - inline 형식</span>
</body>

2. 시맨틱 태그

→ 시맨틱 웹은 컴퓨터 프로그램이 코드를 읽고 의미를 인식할 수 있는 지능형 웹을 의미함.

<body>
    <div>
        <h1>HTML5 기본</h1>
    </div>
    <div>
        <ul>
            <li><a href="#">메뉴 - 1</a></li>
            <li><a href="#">메뉴 - 2</a></li>
            <li><a href="#">메뉴 - 3</a></li>
        </ul>
    </div>
    <div>
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div>
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    </div>
    <div>
        <span>서울특별시 강서구 내발산동</span>
    </div>
</body>

1. 제목과 본문 글자 태그

• 제목 표현

<!DOCTYPE html>
<html>
<head>
    <title>HTML TEXT Basic Page</title>
</head>
<body>
    <h1>별 헤는 밤</h1>
    <h2>별 하나에 추억과</h2>
    <h3>별 하나의 사랑과</h3>
    <h4>별 하나의 쓸쓸함과</h4>
    <h5>별 하나의 동경과</h5>
    <h6>별 하나에 시와</h6>
</body>
</html>

→ h1이 가장 큰 제목 태그, h6이 가장 작은 제목 태그

• 본문 단락 구분

<!DOCTYPE html>
<html>
<head>
    <title>HTML TEXT Basic Page</title>
</head>
<body>
    <h1>쉽게 씌여진 시</h1>
    <p>창 밖에 밤비가 속살거려 륙첩방은 남의 나라, 시인이란 슬픈 천명인줄 알면서도 한줄 시를 적어볼가,
        땀내와 사랑내 포근히 품긴 보내주신 학비봉투를 받아 대학 노-트를 끼고 늙은 교수의 강으 들으러 간다.   
        생각해보면 어린 때 동무를 하나, 둘, 죄다 잃어버리고 나는 무얼 바라 나는 다만, 홀로 침전하는 것일까?</p>
</body>
</html>

→ p태그로 단락 구분 가능

• 제목과 본문 태그의 활용

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 TEXT Basic Page</title>
</head>
<body>
    <h1>손흥민</h1>
    <hr>
    <h2>출생 : 1992년 7월 8일 (31세)</h2>
    <p>강원도 춘천시 후평동 (現 강원특별자치도 춘천시 후평동)</p>
    <br>
    <h2>특징</h2>
    <p> 국적은 대한민국이며, 축구선수이다. 키는 183cm이고, 체중은 78kg에 발사이즈는 255mm이다.</p>
    <p> 토트넘 홋스퍼 FC 소속 축구 선수. 주 포지션은 윙어. 토트넘 홋스퍼 FC와 대한민국 축구 국가대표팀의 주장을 맡고 있다.</p>
    <p>- 생애</p>
    <p>- 클럽 경력</p>
    <p>- 국가대표 경력</p>
</body>
</html>

→ br태그는 다른 글자 태그 내부에 삽입 가능하지만, hr 태그는 안된다.

2. 앵커 태그

→ HTML에서의 H(yper)T(ext), HTML 페이지가 조직화된 문서 형태가 될 수 있는 이유는 'a태그' 때문

• 하이퍼링크 설정

<!-- 특정 웹 페이지에 연결하기 -->
<!DOCTYPE html>
<html>
<head>
    <title>HTML TEXT Basic Page</title>
</head>
<body>
    <a href="https://www.naver.com/">네이버</a><br>
    <a href="https://www.youtube.com/?app=desktop&hl=ko&gl=KR">유튜브</a><br>
    <a href="https://www.musinsa.com/app/">무신사</a><br>
    <!--새창으로 열기-->
    <a href="https://www.daum.net/" target="_blank">다음</a>
</body>
</html>

<!-- 웹 페이지 내부에 연결하기 -->
<!DOCTYPE html>
<!--타이틀로 이동-->
<html>
<head>
    <title>HTML TEXT Basic Page</title>
</head>
<body>
    <a href="#alpha">애국가 부분</a>
    <a href="#beta">가요 부분</a>
    <a href="#gamma">시 부분</a>
    <hr>
    <h1 id="alpha">애국가</h1>
    <p>동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리나라만세</p>
    <h1 id="beta">가요 부분</h1>
    <p>서울시가 잠이 든 시간에 아무 말 없는 밤 하늘은 침착해</p>
    <h1 id="gamma">시 부분</h1>
    <p>창 밖에 밤비가 속살거려 륙첩방은 남의 나라, 시인이란 슬픈 천명인줄 알면서도 한줄 시를 적어볼가,</p>
</body>
</html>

3. 글자 모양 태그

<!DOCTYPE html>
<html>
<head>
    <title>HTML Basic Page</title>
</head>
<body>
    <h1><b>Lorem ipsum dolor sit amet</b></h1>
    <h1><i>Lorem ipsum dolor sit amet</i></h1>
    <h1><small>Lorem ipsum dolor sit amet</small></h1>
    <h1>Lorem ipsum dolor<sub>sit amet</sub></h1>
    <h1>Lorem ipsum dolor<sup>sit amet</sup></h1>
    <h1><ins>Lorem ipsum dolor sit amet</ins></h1>
    <h1><del>Lorem ipsum dolor sit amet</del></h1>
    <hr>
    <b>Lorem ipsum dolor sit amet</b><br>
    <i>Lorem ipsum dolor sit amet</i><br>
    <small>Lorem ipsum dolor sit amet</small><br>
    Lorem ipsum dolor<sub>sit amet</sub><br>
    Lorem ipsum dolor<sup>sit amet</sup><br>
    <ins>Lorem ipsum dolor sit amet</ins><br>
    <del>Lorem ipsum dolor sit amet</del>
</body>
</html>

나. 목록 태그

1. 순서가 없는 기본 목록 만들기

<body>
    <ul>
        <li>사과</li>
        <li>바나나</li>
        <li>오렌지</li>
    </ul>
</body>

2. 순서가 있는 목록 만들기

<body>
    <ol>
        <li>사과</li>
        <li>바나나</li>
        <li>오렌지</li>
    </ol>
</body>

3. 중첩 목록 만들기

<body>
    <ul>
        <!--첫 번째 목록-->
        <li>
            <b>과일</b>
            <ol>
                <li>사과</li>
                <li>바나나</li>
                <li>오렌지</li>
            </ol>
        </li>
        <!--두 번째 목록-->
        <li>
            <b>채소</b>
            <ol>
                <li>상추</li>
                <li>치커리</li>
                <li>양배추</li>
            </ol>
        </li>
    </ul>
</body>

다. 테이블 태그

1. 표 만들기

<body>
    <table>

    </table>
</body>

2. 표에 셀 추가하기

<body>
<!-- 표의 테두리를 지정하는 속성 -->
<table border="1">
    <thead>
        <th></th>
        <th>월</th>
        <th>화</th>
        <th>수</th>
        <th>목</th>
        <th>금</th>
    </thead>
    <tbody>
        <tr>
            <td>1교시</td>
            <td>영어</td>
            <td>국어</td>
            <td>과학</td>
            <td>미술</td>
            <td>기술</td>           
        </tr>
        <tr>
            <td>2교시</td>
            <td>도덕</td>
            <td>체육</td>
            <td>영어</td>
            <td>수학</td>
            <td>사회</td>
        </tr>
    </tbody>
</table>
</body>

※ 테이블 태그의 속성

<body>
    <table border="1">
        <tr>
            <th colspan="2">지역별 홍차</th>
        </tr>
        <tr>
            <th rowspan="3">중국</th>
            <td>정산소종</td>
        </tr>
        <tr><td>기문</td></tr>
        <tr><td>운남</td></tr>
        <tr>
            <th rowspan="4">인도 및 스리랑카</th>
            <td>아삼</td>
        </tr>
        <tr><td>실론</td></tr>
        <tr><td>다질링</td></tr>
        <tr><td>닐기리</td></tr>
    </table>
</body>

라. 미디어 태그

1. 이미지 삽입하기

<body>
    <img src="Penguins.jpg" alt="펭귄" width="300">
    <!-- 이미지가 없으면 alt속성에 지정한 글자가 표시됨 -->
    <img src="Nothing" alt="그림이 존재하지 않습니다." width="300">
</body>

2. 음악 삽입하기

<body>
    <audio src="Kalimba.mp3" controls="controls"></audio>
</body>

※ 웹 브라우저 제약이 없도록 음악 삽입하기

<body>
    <audio controls="controls">
        <source src="Kalimba.mp3" type="audio/mp3">
        <source src="Kalimba.ogg" type="audio/ogg">
    </audio>
</body>

3. 동영상 삽입하기

<body>
    <video controls="controls">
        <source src="Wildlife.mp4" type="vidoe/mp4">
        <source src="Wildlife.webm" type="video/webm">
    </video>
</body>

1. 태그와 요소

• 요소 : HTML 페이지를 구성하는 각 부품

• 태그 : 요소를 만들 때 사용하는 작성 방법

→ 요소와 태그는 구분하지 않고 사용한다.

내용은 텍스트가 될 수도 있고, 다른 요소가 될 수도 있다. 내용을 가질 수 있는 요소에 내용을 입력하지 않아도 된다.

2. 속성

→ 태그에 추가 정보를 부여할 때 사용하는 것

<!-- 웹 브라우저에 HTML5 문서라는 것을 알리기 위해 반드시 첫 행에 나와야 한다. -->
<!DOCTYPE html>
<html>
    <!-- body 태그에 필요한 스타일시트와 자바스크립트를 제공한다. -->
    <head>
        <!--title 태그(웹 브라우저에 표시하는 제목) -->
        <title>HTML5 Basic</title>
    </head>
    <!-- 사용자에게 실제로 보이는 부분을 작성하는 곳 -->
    <body>

    </body>
<!-- 모든 HTML 페이지의 기본 요소로, 모든 태그는 이 HTML 태그 내부에 작성한다. -->
</html>

나. HTML5 페이지의 작성과 실행

<!DOCTYPE html>
<html>
    <head>
        <!--title 태그-->
        <title>HTML5 Basic</title>
    </head>

        <body>
            <!--h1 태그-->
            <h1>Hello World..!</h1>
            <h2>HTML5 길라잡이</h2>
            <h3>20211806 김유겸</h3>
        </body>
</html>

다. 스타일시트 작성과 실행

• 내부 스타일시트 작성과 실행

<!DOCTYPE html>
<html>
    <!--head-->
    <head>
        <!--title 태그-->
        <title>HTML5 Bagic</title>
        <style>
            h1 {
            color: white;
            background: black;
            }
        </style>
    </head>
    <!--body-->
    <body>
            <!--h1 태그-->
            <h1>Hello World...!</h1>
    </body>
</html>

• 외부 스타일시트 작성과 실행

h1{
    color:white;
    background: black;
}

<!DOCTYPE html>
<html>
    <head>
        <title>HTML5 Basic</title>
        <Link rel="stylesheet" href="Style.css">
    </head>
    <body>
        <h1>Hello World...!</h1>
    </body>
</html>

라. 자바스크립트 작성과 실행

• 내부 자바스크립트 작성과 실행

<!DOCTYPE html>
<html>
    <head>
        <!--html 태그-->
    <title>HTML5 Basic</title>
    <script>
        // 경고 창을 출력합니다.
        alert('Hello JavaScript...!');
    </script>
    </head>
    <body>
        <!--h1 태그-->
        <h1>Hello World...!</h1>
    </body>
</html>

• 외부 자바스크립트 작성과 실행

alert('OuterScript')

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Basic</title>
    <script src="02-6_OuterJaveScript.js"></script>
</head>
<body>
    <h1>Hello World..!</h1>
</body>
</html>

※ 외부 스타일시트는 link 태그 사용, 외부 자바스크립트는 script 태그 사용

⦁ 인터넷 : 전 세계를 연결하는 국제 정보 통신망으로, 컴퓨터나 스마트폰 같은 디지털 기기로 연결되어 사람들이 정보를 공유할 수 있는 공간이다. ⦁ 웹 : 인터넷 공간에서 제공하는 서비스 ⦁ 웹 브라우저 : 웹에 공개된 정보를 탐색할 수 있게 하는 프로그램

→ 1989년 버너스 리는 인터넷에서 문서 사이를 쉽게 이동할 수 있는 기능인 '하이퍼링크'를 제안하였고, 이후 1994년 'W3C'를 창설한다. W3C는 HTML 표준을 비롯한 웹 표준안을 제작하거나 제안하는 일을 하는 국제 웹 표준화 단체이다.

나. 웹 브라우저 전쟁과 웹 표준

1. 브라우저 전쟁 ⦁ 모자이크 : 최초의 GUI 웹 브라우저, NCSA가 개발하였다. ⦁ 넷 스케이프(파이어폭스) vs 마이크로소프트(인터넷 익스플로러) ⦁ 위와 같은 웹 브라우저 전쟁을 치르는 동안 웹은 엄청난 속도로 발전, W3C는 웹 표준에 발 빠르게 대응하지 못함. → 플러그인 등장, 플러그인이란 PC에 프로그램을 추가로 설치하여 웹 브라우저의 기능을 확장하는 것. ex) 어도비 플래시, 마이크로소프트 액티브 X 등

2. 웹 2.0 시대 → 서로 다른 사용자가 함께 새로운 콘텐츠를 창조할 수 있는 시대 ex) YOUTUBE, WIKIPEDIA, GITHUB 등

3. 웹 표준 → 플러그인과 같은 기존 웹 브라우저의 불편함 증가, 자연스럽게 플러그인을 배제한 Chrome의 사용자수 증가

다. 웹 동작 ★

→ 웹은 요청과 응답이라는 간단한 형태로 동작한다.

⦁ URL : 웹에서 어떤 대상을 구분하는 주소 ⦁ 클라이언트와 서버 : 요청하는 쪽 = 클라이언트(사용자), 응답하는 쪽 = 서버(제공자), 웹은 HTML 페이지나 파일을 클라이언트에 제공하는 통로이다.

⦁ 서버 프로그램 : 서버에서 실행되는 프로그램 = 백엔드 프로그램(사용자와 먼 곳에 있음.) → 클라이언트 요청에 따라 파일 또는 데이터를 제공, JAVA, C#, PYTHON 등 프로그래밍 언어로 개발함.

⦁ 클라이언트 프로그램 : 클라이언트에서 실행되는 프로그램 = 프론트엔드 프로그램(사용자와 가까운 곳에 있음.) → HTML로 요소 생성, CSS로 디자인, JS로 프로그래밍 요소 부여.

라. 웹 표준 기술과 HTML5 주요 기능

1. 웹 표준 기술 ★

⦁ HTML : 큰 의미로 CSS3와 자바스크립트를 모두 포함하는 웹 표준 기술을 총칭함. 작은 의미로 웹 페이지를 구성하는 HTML 마크업 언어 그 자체를 의미함. ⦁ CSS : HTML 페이지에서 스타일을 지정하는 스타일시트를 작성할 때 사용하는 언어이다. ⦁ JS : HTML 페이지에서 사용자 반응 등을 처리하는 스크립트를 작성하는 언어이다.

2. HTML5 주요 기능 ⦁ 멀티미디어 : 플러그인없이 음악, 동영상 등을 재생할 수 있음 ⦁ 그래픽 : 하드웨어의 가속을 받아 2차원, 3차원 그래픽을 구현 ⦁ 장치 접근 : 배터리 잔량, 현재 위치 등을 가져오거나 알람 등 기능을 사용 ⦁ 오프라인 저장소: 인터넷이 연결되지 않은 상태에서 응용 프로그램을 동작 가능 ⦁ 시맨틱 : 시맨틱 웹은 검색 엔진 같은 프로그램이 분석하고, 자료를 검색 및 처리해서 제공하는 지능형 웹 ⦁ CSS3 스타일시트 : 3차원 변환은 물론 애니메이션 효과를 적용할 수 있음 ⦁ 웹의 성능 극대화 : 웹 워커를 이용하면 화면을 멈추지 않으면서 연산 처리 가능