[1교시]
브라우저, 인라인 프레임 윈도우 부모자식 관계
-브라우저 윈도우와 그 속에 삽입된 인라인 프레임 윈도우 사이에는 '부모 자식 관계' 가 형성된다.
인라인 프레임이 다시 인라인 프레임을 포함하면 이들 사이 역시 부모 자식 관계가 형성된다.
-parent 윈도우 : 부모 윈도우
-child 윈도우 : 자식 윈도우
-top 윈도우 : 최상위 브라우저 윈도우
HTML5에서 웹 페이지에 미디어 삽입의 표준화
-<audio>, <video> 태그 : HTML5에서 오디오 비디오를 삽입하는 표준 태그
<오디오 태그1>
<오디오 태그2>
오디오 형식을 지원하지 않습니다.
"태그1"이 출력 되지 않을경우 "태그2"로 출력.
"태그2"으로도 출력되지 않을경우 "오디오 형식을 지원하지 않습니다" 출력.
-------------------------------------------------------------------
p102 요약02
HTML(HyperText Markup Language)은 어떤 언어인가?
-<태그>로 문서의 각 요소를 표현하여 웹 문서를 작성하는
언어이다.
<!DOCTYPE html>은 HTML5 문서에 반드시 있어야 하는가?
-이것은 HTML5 언어로 작성된 문서임을 브라우저에게 알리는 지시어로서 HTML 페이지의
첫 줄에 반드시 나와야 한다.
HTML 태그의 기본적은 특징들
-HTML 태그는 대소문자를 구분하지 않는다.
-HTML 페이지 제목은 <head> 태그 안에 <title> 태그로 작성한다.
-<p> 태그로 문단을 만들며, 문단의 가장 큰 제목은 <h1>, 가장 작은 제목은 <h6>을 사용한다.
-툴팁은 title 속성으로 작성하고, <hr> 태그는 수평선을 긋는데 사용된다.
-HTML 문서 내에 개발자가 삽입한 여러 개의 공백은 하나로 처리된다.
-<br> 태그는 새 줄로 넘어가고자 할 때 사용한다.
-개발자가 입력한 포맷 그대로 출력하고자 하는 경우는 <pre> 태그를 사용하면 된다.
-HTML5에서 웹 페이지 파일은 기본적으로 UTF-8 코드로 저장되어야 한다.
-<, > 등 예약어나 키보드로 입력할 수 없는 문자들은 &엔터티;이나 &#유니코드값; 으로
표현하면 된다.
<meta> 태그는 HTML 페이지의 저작자, 페이징즤 내용, 키워드 등을 표현하는데 꼭 사용해야 하는가?
-검색 엔진은 검색 키워드를 이 태그에서 확인하기 때문에, 웹 페이지가 잘 발견될 수 있도록 이 태그를 적절히 사용하는 것이 좋다.
웹 페이지에 이미지를 삽입할 수 있는가?
-<img> 태그를 이용하면 된다. 출력되는 이미지 영역의 크기 또한 조절할 수 있다.
리스트를 만드는데 사용되는 태그는 어떤 것들이 있는가?
-<ul>, <ol> 태그는 리스트를 표현하며 아이템은 <li> 태그를 사용한다. <dl>은 용어와 설명을 짝으로
아이템들의 리스트를 만드는데 사용되며, 용어는 <dt>, 설명은 <dd> 태그를 이용한다.
표를 만들면 문서를 정렬하여 출력하는데 도움이 된다. 어떤 태그를 사용하면 되는가?
-<table> 태그를 사용하면 된다. <tr> 태그를 이용하여 행 단위로 만들고, 행 안에는 <td>태그로
셀을 표현한다. 셀은 텍스트나 이미지 모두 가능하다.
다른 웹 페이지로 이동하는 하이퍼링크 혹은 링크는 어떻게 만드는가?
-<a href="..."> 태그의 href에 다른 웹 페이지나 이미지, 동영상 등의 웹 자원을 가리키는
하이퍼링크를 만들면 된다.
링크와 앵커는 비슷해 보이는데 서로 어떻게 다른가?
-문서 내의 링크에 연결될 수 있는 특정 지점을 앵커라고 부르며, 모든 태그와 앵커가 될 수 있고,
앵커의 이름은 id 속성으로 작성한다.
-------------------------------------------------------------------
[4교시]
HTML5 시맨틱 태그 구조
-<header>는 페이지나 섹션의 '머리말' 을 표현하는 태그이다. 보통 머리말에는 페이지 제목, 페이지를 소개하는 간단한 설명이 들어간다. 블로그의 경우, 블로그 이름과 블로그에 대한 간략한 설명을
<header>에 기재한다. <header>는 <section>이나 <article> 태그 내에도 사용된다.
<head> 태그와는 다른 것이므로 주의하기 바란다. *머리말*
-<nav>는 navigation의 줄임말로 '하이퍼링크' 들을 모아 놓은 특별한 세션이다. 페이지의 모든 하이퍼 링크가 이곳에 있을 필요는 없다. 페이지 내 목차를 만들기 위해 주로 사용된다. *하이퍼링크*
-<section>은 문서의 '장'(chapter, section) 혹은 '절' 을 구성하는 역할을 하며 섹션이라고 부른다.
책이나 보고서에 여러 장이 있는 것처럼, 웹 페이지에도 여러 <section>을 둘 수 있다.
<section>에는 헤딩 태그(<h1>~<h6>)로 섹션의 주제를 기재하는 것이 바람직하다. *장 혹은 절*
-<article>은 본문과 연관되어 있지만, 독립적인 콘텐츠를 담는 영역이다. <section>이 본문의
필수적인 내용을 담는다면, <article>은 웹 페이지의 본질을 훼손하지 않는 내용들을 담는데 주로
사용된다. '보조적인 기사', 블로그 포스트, 댓글이나 기타 독립적인 내용을 담는 영역으로 사용하면
된다. <article>에 담는 내용이 많은 경우 여러 <section>으로 나누어 담을 수 있다. *보조적인 기사*
-<aside>는 웹 페이지 본문 흐름에서 약간 벗어난 노트나 팁, 신문, 잡지에서 주요 기사 옆에 짤막하게
곁들이는 관련 기사, 삽입 어구로 표시된 논평이나 글 등을 담는 태그이다. <aside> 영역은 문서의
주요 부분에서 벗어난 내용을 담기 때문에, 페이지의 '오른쪽이나 왼쪽에 주로 배치' 된다.
*오른쪽이나 왼쪽에 주로 배치*
-<footer>는 꼬리말 영역을 표시하는 태그로서, 페이지나 <section> 내에 '꼬리말' 을 담는다.
이곳에는 '저자나 저작권 정보' 등을 주로 표시한다. <header>와 <footer>가 꼭 웹 페이지의 서두와
말미에 배치될 필요는 없다. *꼬리말, 저자나 저작권 정보*
[6교시]
웹 폼?
-웹 페이지에서 사용자 입력을 받는 폼
-로그인, 등록, 검색, 예약, 쇼핑 등
폼 요소?
-<input>, <textarea>, <select> 등 폼을 만들기 위한 다양한 태그들을 제공
<form> 태그
-<form action="웹 서버 응용 프로그램의 URL"
enctype="데이터의 인코딩 타입"
method="GET/POST"
name"폼 이름"
target="윈도우 이름">
...여러 개의 폼 요소 작성
</form>
---------------------------------------------------------------------------
폼 요소의 종류
<input type="text"> : 한 줄 텍스트 입력 창
<input type="password"> : 암호 입력을 위한 한 줄 텍스트 입력 창
<input type="button"> : 단순 버튼
<input type="submit"> : 웹 서버로 폼 데이터를 전송시키는 버튼
<input type="reset"> : 입력된 폼 데이터를 초기화 시키는 버튼
<input type="image"> : 이미지 버튼
<input type="checkbox|radio"> : 체크박스와 라디오버튼
<select> : 드롭다운 리스트를 가진 콤보박스
<input type="month|week|date|time|datetime-local"> 년, 월, 일, 시간 등의 시간 정보 입력 창
<input type="color"> : 색 입력을 쉽게 하는 컬러 다이얼로그
<input type="email|url|tel|search"> : 이메일, URL, 전화번호, 검색 키워드 등 형식 검사 기능을 가진
텍스트 입력 창
<input type="file"> : 로컬 컴퓨터의 파일을 선택하는 폼 요소
<button type="button|reset|submit"> : 단순 버튼, reset, submit 버튼
<textarea> : 여러 줄의 텍스트 입력 창
---------------------------------------------------------------------------
폼 요소는 <form> 태그 없이 사용할 수 있는가?
-폼 요소들은 <form> 태그 없이 사용할 수도 있다. 이런 경우는 주로 웹 서버에 전송하지 않고
자바스크립트 코드에서 사용자의 입력을 받는 목적으로 사용한다.
[7교시]
*<datalist>와 <select>의 차이점?*
-<datalist>를 사용하면 옵션 리스트에서 선택하거나 입력창에 직접 입력하여 항목을 선택할 수
있지만, <select>의 경우 옵션리스트에서만 선택할 수 있다.
태그 사용이 많아 코드 블럭 처리
갓 프로그래밍에 입문