웹스토리보이

HTML(Hyper Text Markup Language)은 웹 문서를 표현하기 위한 하이퍼텍스트 마크업 언어입니다.

하이퍼텍스트란 문서에서 다른 문서로 이동하는 것을 말하며, 마크업이 한 태그를 사용하여 콘텐츠의 의미를 부여하는 것을 말합니다.

태그는 HTML에서 정보를 전달하는 방식을 의미합니다.

태그는 열린태그와 닫는태그가 있습니다.
닫힌 태그에는 "/"있어야 합니다.
닫는 태그가 필요 없는 것도 있습니다.
HTML5 에서는 "/"가 생략이 가능합니다.

속성은 요소(태그)에 정보를 추가하거나 다양한 기능을 설정합니다.

속성은 여러가지 태그에 공통적으로 사용할 수 있는 속성도 있으며, 특정한 태그에만 사용하는 속성도 있습니다.

요소는 HTML을 구성하는 가장 기본 단위입니다.

태그의 시작태그와 끝나는 태그 사이의 범위를 요소라고 합니다.

주석 표시는 프로그램에 영향을 미치지 않으며, 설명이나 메모를 목적으로 사용합니다.

블럭요소는 박스, 인라인 요소 텍스트를 의미합니다.

블록 엘리먼트(Block Element)
- 독립된 박스 영역으로 한 줄에 하나의 블록 요소만 표현할 수 있습니다.
- 블록 요소에는 블록 요소와 인라인 요소를 포함 할 수 있습니다.
- <div>, <p>, <ul>, <li>, <hr>, <address>

인라인 엘리먼트(Inline Element)
- 독립된 텍스트 영역으로 한 줄에 여러 개의 인라인 요소를 표현할 수 있습니다.
- 인라인 요소에는 블록요소가 포함될 수 없지만, 인라인 요소는 포함할 수 있습니다.
- <span>, <img>, <a>, <input>, <button>, <br> 등

웹 문서를 제작하기 위해서는 웹 문서 유형을 설정해야 합니다.

독타입을 설정하지 않거나 잘못 설정하면 브라우저에 따라 화면이 다르게 나오거나 렌더링이 달라지기 때문에 독타입을 설정해야 합니다.

<!-- HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  

<!-- HTML 4.01 Transitional  -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<!-- HTML 4.01 Frameset -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 

<!-- XHTML 1.0 Strict -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<!-- XHTML 1.0 Transitional -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!-- XHTML 1.0 Frameset -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 

<!-- XHTML 1.1 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!-- html5 -->
<!DOCTYPE html>

콘텐츠의 언어를 인식하고 언어 정보를 추출하는데 사용합니다.

미리 언어를 설정하면 효율성이 더 좋아집니다.

<!-- HTML5 -->
<html lang="ko">

<!-- HTML4 -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

HTML 구조는 html 요소 안에 head와 body로 이루어져 있습니다.

HTML 구조는 독타입 선언을 해주어야 하나의 웹 문서가 완성됩니다.
HTML 문서는 상하 관계가 존재하는 계층적인 구조로 되어 있습니다. 상위에 있는 요소와 하위에 있는 요소는 부모 자식 관계로 표현하며, 이러한 구조를 DOM구조(Document Object Model)라고 합니다.
head 요소에는 제목, 사이트 정보, 스크립트, 스타일 시트, 메타 정보 등을 제공합니다.
body 요소에는 문서 본문에 해당하는 콘텐츠 영역입니다.

<!DOCTYPE html>
<html lang="ko">
<head>

</head>
<body>
    
</body>
</html>

웹사이트에서 제공하는 정보를 차별 및 제한없이 동등하게 이용할 수 있도록 보장합니다.

웹 표준은 월드 와이드 웹의 측면을 서술하고 정의하는 공식 표준이나 다른 기술 규격을 가리키는 일반적인 용어입니다. 최근에 이 용어는 웹 사이트를 작성하는 데 중요도가 높아지고 있으며 웹 디자인, 개발과 관계가 있습니다. 수많은 상호 의존성이 있는 표준들과 규격들 가운데 일부는 단지 월드 와이드 웹으로만 끝나는 것이 아니라, 인터넷의 관리 측면이기도 하며 이러한 표준들은 직간접적으로 웹 사이트, 웹 서비스 개발과 관리에 영향을 주고 있습니다. 이러한 것들 모두 "웹 표준"이라고 부르지만 웹 표준으로 이동하는 것을 찬성하는 사람들은 사용성과 접근성에 직접 영향을 미치는 더 높은 수준의 표준에 초점을 두는 경향이 있습니다.

정보와 사용자 인터페이스 요소는 그들이 인지할 수 있도록 사용자에게 표시될 수 있어야 한다.
사용자 인터페이스 요소와 탐색은 운용 가능해야 한다.
정보와 사용자 인터페이스 운용은 이해할 수 있어야 한다.
콘텐츠는 보조 기술을 포함한 넓고 다양한 사용자 에이전트에 의존하여 해석될 수 있도록 충분히 내구성을 가져야 한다.

웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장합니다.

비장애인이 웹상에서 제공되는 텍스트와 이미지, 영상 등을 접했을 경우, 한눈에 재빨리 내용 파악이 가능하지만, 장애인은 그렇지 않습니다. 그림이나 사진들을 제공할 때 눈으로 볼 수 없는 경우를 대비하여 그림이나 사진을 대신 할 수 있는 설명을 텍스트로 제공해야 하며, 동영상이나 오디오의 경우 청각장애인을 위한 음성정보를 문자로 제공해야 합니다. 또한, 마우스를 사용할 수 없는 사용자를 위하여 키보드만으로도 모든 콘텐츠에 접근하여 이용할 수 있도록 해야 하며, 움직임이 느린 사용자를 위해 시간조절기능을 제공해야 합니다.

웹 접근성 필요성

누구에게나 동등한 기회 제공을 위해 웹 접근성 준수 필요
웹 접근성 보장은 법률에 명시된 의무사항

정보통신 환경의 이해

장애유형		특징	보완대책
시각장애	전맹	모니터를 볼 수 없음	스크린리더
	저시력	모니터 사용이 일부 가능함	화면확대/고대비
	색맹	색을 구별할 수 없음	색상에만 의존하지 않기/고대비
청각장애		사운드, 오디오 등을 창취할 수 없음	수화, 시각정보 제공
지체장애	상지장애	손을 사용할 수 없음	마우스 대체 방법, 키보드만 사용
지체장애	기타	움직임이 어려움	충분한 시간제공
언어장애		복잡한 용어, 어려운 용어의 이해 불가능	쉬운 용어 사용

HTML5shiv 기능은 HTML5의 새로운 요소를 지원해주지 못하는 브라우저나 구 버전의 익스플로러가 HTML5 요소를 지원해주는 기능입니다.
Internet Explorer 6-9, Safari 4.x (및 iPhone 3.x) 및 Firefox 3.x에 대한 기본 HTML5 스타일을 제공합니다.

html5shiv.js

간단히 다운로드 받은 파일을 설명한다. 기본적인 createElement() 기술과 IE6~8에서 기술 적용을 위해 document.createElement와 document.createDocumentFragment를 monkeypatches와 함께 포함하고 있다. 또한 IE6-9, Safari 4.x and FF 3.x에 대한 기본적인 스타일링을 제공한다.

html5shiv-printshiv.js

html5shiv.js 파일의 모든 것과 IE6~8에서 인쇄될때, HTML5의 새로운 요소들에 대하여 스타일 및 자식을 가질 수 있도록하는 매커니즘을 포함한다.

html5shiv 사용법

다운로드한 파일의 dist 폴더에서 사용할 파일을 선택한 후 부분에 아래와 같이 적용한다. 이 코드를 사용 한 경우 CSS에서 해당 블럭요소들을 display:block 해주어야 한다.

<head>
<!--[if lt IE 9]> <script src="경로명/html5shiv.js"> </script> <![endif]-->
</head>

조건부 주석은 IE10 미만에서만 작동하는 조건문으로, 이를 이용하여 IE 브라우저별로 어떤 기능이나 파일, 디자인등을 삽입하는 용도로 자주 사용됩니다.

조건부 주석 기본 문법

아래와 같이 기본형에 알맞은 조건을 기입하고 이를 만족할 경우, HTML 코드를 렌더링하게 된다. 구문 처음의 <!-- 부분과 마지막 > 이 적용된 부분은 타브라우저에서 무시됩니다.

<!--[if condition]> 
    HTML 코드 
    <![endif]-->

조건부 기호

! : 아니다(not) - 예) [if !ie] ie가 아니라면
lt : 작다(less than) - 예) [if lt ie 9] ie9 보다 작다면
lte : 작거나 같다(less than equal) - 예) [if lte ie 8] ie8 보다 작거나 같다면
gt : 크다(greater than) - 예) [if gt ie 6] ie6 보다 크다면
gte : 크거나 같다(greater than equal) - 예) [if gte ie 7] ie7 보다 크거나 같다
() : 우선처리
& : 그리고(and) - 예) [if (gte ie 7)&(lt ie 9)] ie7 이상이고 ie9 미만이라면
| : 또는(or) - 예) [if (ie 7)|(ie 8)] ie7 이거나 ie8 이라면

div 태그는 문서의 섹션을 만들거나 영역을 만들 때 사용합니다.

태그는 문단을 쓸 때 사용합니다.

p태그와 p태그 사이는 한 줄의 행간이 표현됩니다.

ul 태그는 순서가 없는 목록을 정의합니다.

li 태그는 목록의 항목을 정의합니다.

li 태그는 ul 태그, ol 태그, menu 태그와 같이 사용합니다.
li 태그 안에는 다른 목록을 중첩으로 사용할 수 있습니다.

a 태그는 하이퍼링크를 정의합니다.

하이퍼링크란? 현재 페이지에서 다른 페이지로 이동하는 것을 말합니다.
방문하지 않은 링크는 밑줄과 파란색으로 표시됩니다.
방문한 링크는 밑줄과 보라색으로 표시됩니다.
활성화된 링크는 밑줄과 빨간색으로 표시됩니다.
HTMl5에서는 a 태그는 블록 요소를 표현할 수 있습니다.

img 태그는 이미지를 정의합니다.

img 태그는 src 속성과 alt 속성은 필수적으로 설정합니다.
img 태그는 인라인 구조이며, border, border-radius, padding, margin, width, height 속성 값을 설정할 수 있습니다.

pre 태그는 입력한 문장 형태 그대로 브라우저에 표현합니다.

pre 태그는 긴 문장등을 쓸 때 사용합니다.
pre 태그는 공백, 개행이 그대로 출력되고, HTML 태그는 해석되서 표현되어집니다.

code 태그는 컴퓨터 코드를 정의합니다.

code 태그는 HTML에서 컴퓨터에 사용되는 코드의 조각을 나타낼 때 사용합니다. (변수 및 속성, XML 이름, 파일 이름 등)
code 태그는 코드를 모니터에 출력하는 경우 사용합니다.

br 태그는 줄을 바꿀 때 사용합니다.

br 태그는 Line Break를 의미하며 강제 줄바꿈을 할 때 사용합니다.
br 태그는 다른 태그와 다르게 종료 </>태그를 가지지 않습니다.

hr 태그는 단락 수준의 주제별 구분을 정의합니다.

<hr> 태그는 HTML5에서 주제 휴식을 정의합니다.
<hr> 태그는 끝 태그가 없습니다.

meta 태그는 웹 문서에 대한 여러가지 정보를 제공합니다.

메타 데이터	설명
charset	웹 페이지 언어 설정
author	웹 페이지 만든 사람
description	웹 페이지에 대한 설명
keywords	웹 페이지에 대한 키워드
apllication name	웹 페이지에 관련된 웹 응용프로그램 이름
generator	웹 페이지에 만든 소프트웨어의 이름
referrer	문서에서 전송된 요청에 첨부된 HTTP 헤더의 참조자(Referer)를 제어
robots	인덱싱 제어
format-detection	모바일 자동 전화걸기 방지

<!--HTML5 언어 설정 -->
<meta charset="UTF-8">

<!--HTML4 언어 설정 -->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<!--웹 문서에 대한 제작자 설정 -->
<meta name="author" content="sooool">

<!--웹 문서에 대한 설명 -->
<meta name="description" content="이 사이트는 무슨무슨 사이트입니다.">

<!--웹 문서에 대한 키워드 -->
<meta name="keyword" content="키워드, 키워드, 키워드">

<!--웹 문서에 대한 웹 응용 프로그램 이름 -->
<meta name="application-name" content="응용 프로그램 이름">

<!--웹 문서에 대한 소프트웨어 이름 -->
<meta name="generator" content="소프트웨어 이름">

table 태그는 표를 제작할 때 사용합니다. 태그는 각각 셀로 만드는데 header cell과 standard cell로 나누어집니다.

table 태그와 함께 사용할 수 있는 속성

colspan(column span) : 셀(가로줄)을 합치는 개수를 지정
rowspan : 셀(세로줄)을 합치는 개수를 지정

태그이름	설명
<th>	- th 태그는 표의 제목을 쓰는 역할을 합니다. - th 태그의 기본값은 굵은 글씨체, 중앙 정렬을 해줍니다.
<tr>	- tr 태그는 가로줄을 만드는 역할을 합니다. - tr 태그의 기본값은 보통 글씨체, 왼쪽 정렬을 해줍니다.
<td>	- td 태그는 셀을 만드는 역할을 합니다. - td 태그의 기본값은 보통 글씨체, 왼쪽 정렬을 해줍니다.

strong 태그는 중요성을 강조하는 역할을 합니다.

글자를 굵게 표시하여, 텍스트를 중요하게 보이고자 할 때 사용합니다.
strong 태그는 단순히 보여지는 강조가 아닌 실제로 페이지 내의 중요한 부분으로 브라우저에게 알려주는 역할을 합니다. 이는 브라우저에게 지원되는 웹 접근성에 큰 기여를 합니다.

em 태그는 텍스트를 강조하는 역할을 합니다.

이탤릭체로 기울여져 표시됩니다.

h 태그는 제목들을 크기별로 나타내줍니다.

헤드라인은 h1부터 시작해서 h6까지 쓸 수 있으며, 숫자의 크기가 클수록 헤드라인 사이즈는 작아 집니다.
헤드라인 요소들은 다 블록(block) 요소입니다.

colgroup 태그는 테이블에서 서식 지정을 위해 하나 이상의 열을 그룹으로 묶을 때 사용합니다.

각 행(row)이나 셀(cell)의 스타일을 반복하지 않고, 열(column) 전체에 다른 스타일을 적용하고 싶을 때 유용하게 사용할 수 있습니다.
colgroup 요소 내부에 <col> 요소를 포함하여 열마다 각각 다른 스타일을 적용할 수도 있습니다.
colgroup 태그는 <table> 요소의 자식 요소로, 모든 <caption> 요소보다 뒤에 위치해야 하며 모든 <thead>, <tbody>, <tfoot>, <tr> 요소보다는 앞에 위치해야 합니다.

span 태그는 문서의 그룹 인라인 요소로 사용됩니다.

span 태그는 줄단위로 영역이 설정됩니다.
텍스트나 이미지가 <span>요소로 감싸지면, CSS 스타일이나 Javascript로 그 부분을 조작할 수 있습니다.
span 태그는 인라인 요소로 넓이와 높이 값을 설정할 권한이 없는 태그입니다. 하지만 디자인을 위해 부득이 span 태그에 넓이, 높이 값이 필요하다면 span 요소 본연이 가지고 있던 디스플레이 속성(display)인 인라인 레벨 요소를 블록 레벨 요소로 속성 변환을 해주면 가능해집니다.

div 태그는 문서의 그룹 블록 요소로 사용됩니다.

div 태그는 Division의 약자로 웹사이트의 레이아웃(전체적인 틀)을 만들때 주로 사용합니다.
div 태그안에 있는 줄은 속성과 크기등을 바꿀 수 있습니다.
태그가 끝나면 자동줄바꿈이 됩니다.

form 태그는 웹 페이지에서의 입력 양식을 의미합니다. (로그인, 회원가입 등)

name :폼을 식별하기 위한 이름을 지정합니다.
action :폼을 전송할 서버 쪽 스크립트 파일을 지정합니다.
accept-charset :폼 전송에 사용할 문자 인코딩을 지정합니다.
target :action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정합니다.
method :폼을 서버에 전송할 http 메소드를 정합니다. (GET 또는 POST)

form 태그는 전체 양식을 의미하며, 화면에 보이지 않는 추상적인 태그입니다.
그래서 실제로 사용자가 양식을 입력하기 위한 태그는 input태그 등이 사용됩니다.
type 속성을 통해 종류를 나타내며, name을 통해 데이터의 이름, value를 통해 기본 값을 지정합니다.

text :일반 문자
password :비밀번호
button :버튼
submit :양식 제출용 버튼
reset :양식 초기화용 버튼
radio :한개만 선택할 수 있는 컴포넌트
checkbox :다수를 선택할 수 있는 컴포넌트
file :파일 업로드
hidden :사용자에게 보이지 않는 숨은 요소

fieldset 태그는 form 양식에서 관계된 요소들끼리 묶어주며, 관계 요소 주위에 박스를 그립니다.

주로 form 내부에 사용합니다.

legend 태그는 fieldset 태그로 묶은 요소들에 대한 제목이나 설명을 붙일 때 사용합니다.

fieldset요소를 이용하여 그룹화한 범위의 캡션을 지정할 수 있습니다.

caption 태그는 테이블의 캡션(caption, 테이블이나 사진, 삽화 등에 붙는 설명)을 정의할 때 사용합니다.

table 요소는 단 하나의 caption 요소만을 명시할 수 있으며, caption 요소는 언제나 table 요소 바로 다음에 위치해야 합니다.
caption 요소의 콘텐츠는 테이블 바로 위쪽에 가운데 정렬되어 표시되지만, CSS의 text-align이나 caption-side 속성을 사용하여 캡션의 위치나 정렬 방법 등을 변경할 수 있습니다.

label 태그는 폼의 양식에 이름 붙이는 태그입니다.

주요 속성은 for입니다.(label의 for의 값과 양식의 id의 값이 같으면 연결됩니다.)
label을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나 체크를 하거나 체크를 해제합니다.

button 태그는 클릭 버튼을 정의합니다.

button :클릭 가능한 버튼
submit :폼 안의 데이터를 전송하는 버튼
reset :폼 안의 데이터를 초기화 시키는 버튼

placeholder 태그는 입력란 안에 사람들에게 어떠한 형태로 입력할지 '힌트'를 주는 속성입니다.

placeholder는 ::placeholder 선택자로 선택하여 꾸밀 수 있습니다.

address 태그는 입력란 안에 사문서 또는 문서의 저자 / 소유자의 연락처 정보를 정의합니다.

요소의 <body>요소 안에있는 경우에는 문서에 대한 연락처 정보를 나타냅니다.
요소의 <article>요소 내부에있는 경우, 그 기사에 대한 연락처 정보를 나타냅니다.
요소에 텍스트는 일반적으로 이탤릭체로 렌더링합니다. 대부분의 브라우저는 주소 요소 이전과 이후 줄 바꿈을 추가합니다.

일반적으로 문서의 콘텐츠 영역을 의미합니다.

콘텐츠와 관련된 한 가지 주제 영역을 의미합니다.
section 요소는 문장이나 스타일링 요소기 때문에 편리나 영역을 위함이면 div 태그가 좋습니다.
section 요소는 제목이 없는 경우 섹션이라고 할 수 없기 때문에 제목을 제공해야 합니다.
section 요소는 일반적인 주제가 아니라면 구체적인 요소(article, aside, nav)를 대신 사용하는 것이 더 적적합니다.

웹 페이지 내에세 이동 할 수 있는 네비게이션 링크 그룹입니다.

nav는 문서의 핵심적인 페이지의 메뉴 및 서브 메뉴를 사용합니다.
nav는 문서에서 주로 한 번만 사용합니다.
문서 안에 링크가 포함된 콘텐츠는 nav를 사용하지 않습니다.
nav는 핵심적인 네비게이션에 사용해야 하므로 푸터 내에 링크 그룹의 사용은 적절하지 않습니다.

웹 문서의 주요 콘텐츠 영역을 나타낼 떄 사용합니다.

main 태그는 웹 페이지에서 한 번만 사용할 수 있으며, 접근성과 검색 영역 노출을 향상시킵니다.
article, aside, footer, header, nav의 하위 요소로 사용할 수 없습니다.

웹 문서의 메인 콘텐츠와 관련된 사이드 콘텐츠 영역을 나타냅니다.

aside는 메인 콘텐츠와 관련된 사이트의 정보, 광고 등 부분적인 정보를 그룹화할 때 사용합니다.

웹 문서의 헤더 영역을 나타냅니다.

header 태그는 웹 페이지에 대한 소개, 네비게이션 영역, 테이블 영역, 검색 영역, 로고 영역을 포함하는 영역입니다.
header 태그에는 제목 태그가 포함될 수 있으며, 필수 조건은 아닙니다.
header는 섹션 콘텐츠가 아닌 그룹화하기 위한 요소이므로 section 요소를 포함할 수 없습니다.

웹 문서의 푸터 영역을 나타냅니다.

footer는 섹션 콘텐츠가 아닌 그룹을 나타내는 요소이며, section, article, aside들을 포함할 수 있습니다.

웹 문서의 독립적인 항목을 나타내는 콘텐츠를 의미합니다.

article은 포럼, 전문기사, 잡지, 블로그 항목, 게시판 글 등의 독립적인 항목을 나타냅니다.
section은 하나의 주제를 나타낸다면, article은 주제를 묶은 독립적인 콘텐츠입니다.
section 요소 안에는 article 요소를 쓸 수 있으며, article요소 안에도 section 요소를 쓸 수 있습니다.

script 태그는 두가지 방향으로 사용할 수 있습니다.
src속성을 넣어 외부에 있는 js를 불러와 사용할 수 있습니다.
src속성을 사용하지 않고 script 태그 사이에 javascript 코드를 넣어 사용할 수 있습니다.

i 태그는 특별한 이유로 평범한 글자와 구분하기 위해 사용됩니다.

i 태그는 기술적인 구문이나, 언어, 사상, 생각 등에서 다른 텍스트와 구분하기 위해 사용합니다.
i 태그는 다음 비교 태그에 적합한 의미가 없을 때 사용합니다.
HTML4에서 i태그는 이탤릭체로 표현하기 위해 사용하였지만, HTML5에서 i태그는 기술적인 구문, 언어, 사상, 생각 등에서 다른 텍스트와 구분하기 위해 사용합니다.

figure 태그는 HTML5에서 본문 내용 안에 첨부자료(사진, 그래프 등)를 삽입하기 위한 태그입니다.

사진, 도표, 삽화, 오디오, 비디오, 코드 등을 담는 컨테이너 역할을 합니다.
figure 태그 안에는 여러가지의 자식 요소(img, code 등)을 포함할 수 있습니다.

figcaption 태그는 figure 태그에 대해 설명하는 문구를 담는 태그입니다.

figcaption 요소는 선택적이며, figure 요소 안에 사용합니다.(내용 앞 뒤로 올 수 있음)
figcaption 요소는 figure 요소에서 한 번만 사용할 수 있습니다.

iframe 태그는 inline frame의 약자이며, 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입할 수 있으며 동영상도 삽입할 수 있습니다.

iframe 요소는 frame 요소와는 달리 종료 태그가 존재합니다.
iframe 요소는 명시된 크기로 삽입되는 창의 크기가 고정됩니다.
주의할 점은 DOCTYPE에서 Transitinal, Frameset 선언에서는 iframe이 정상 작동하지만 Strict 문서에서는 작동하지 않습니다.
문법 : <iframe src="삽입할 페이지 주소">대체 내용</iframe>
a태그를 이용하면 iframe 요소의 최초 페이지를 중간에 변경할 수 있습니다. a태그의 target 속성과 iframe 요소의 name 속성을 연결하면, a태그를 통해 iframe 요소의 페이지를 변경할 수 있게 됩니다.

속성

src : 프레임 내에 삽입할 파일의 이름 또는 주소를 표시한다.
name : 프레임 내에 이름을 지정 (링크 시 target 지정할 때)
align : left, center, right 정렬을 한다.
border : 테두리의 두께가 숫자만큼 두꺼워진다.
bordercolor : 테두리의 색상을 바꾼다.
frameborder : 창의 경계선(두께)의 지정시 1이면 경계선이 나타나고 0이면 경계선이 없어진다
framespacing : 인접한 창들의 간격
height : iframe 의 창의 높이를 조절한다.
width : iframe 의 창의 너비를 조절한다.
marginheight : iframe 내부의 창의 상하 여백
marginwidth : iframe 내부의 좌우 여백
topmargin : 상단의 공백
scolling : 스크롤바의 유무를 나타낸다.
noresize : 창의 크기를 고정시킨다.
투명 iframe 만들기 : ALLOWTRANSPARENCY="true" 그리고 ifrmae 태그의 src에 할당된 html 파일 내부의 BODY 태그에 style="background-color:transparent" 삽입(IE 5.5 이상 및 넷스케이프 6 이상가능)

picture 태그는 매체에 따라 그림의 방향, 크기, 이미지 형식 따위에 변화를 주고자 할 때 주로 사용합니다.

뷰포트(viewport)의 너비에 따라 커지거나 작아지는 하나의 이미지를 사용하는 대신 서로 다른 디스플레이나 기기에서 해당 뷰포트에 알맞게 채워질 수 있도록 여러 개의 이미지 중에서 적절한 이미지를 사용할 수 있도록 해줍니다.
picture 태그는 웹 개발자가 이미지의 리소스를 보다 유연하게 지정할 수 있도록 해주므로, 반응형 디자인(responsive design)에서 주로 사용합니다.
<picture> 요소는 0개 이상의 <source> 요소와 하나의 <img> 요소로 구성되며, 브라우저는 <source> 요소 중에서 해당 뷰포트와 가장 잘 어울리는 <source> 요소를 다음과 같은 방법을 사용하여 선택합니다.
브라우저는 <source> 요소들의 속성값을 각각 확인해 나가며 조건을 만족하는 첫 번째 <source> 요소를 사용하고, 나머지 <source> 요소들은 무시합니다. 이 때 <img> 요소는 <picture> 요소의 자식 요소 중에서 가장 마지막에 위치해야 합니다. 이러한 <img> 요소는 <picture> 요소를 지원하지 않는 브라우저를 위한 하위 호환성(backward compatibility)을 위해 사용되거나 명시된 <source> 요소가 모두 조건을 만족하지 못 할 경우 사용됩니다.

viewport-fit=cov 속성을 추가하면 전체화면을 보실 수 있습니다.

IOS X의 Safari가 자동으로 패딩을 적용하기 때문에 생긴 속성입니다.
viewport-fit이라는 요소를 추가하여 자동 적용된 패딩을 제외하고 전체화면으로 사용할 수 있습니다.

time 태그는 사람이 읽을 수있는 날짜 / 시간을 정의합니다.

날짜와 시간을 기계가 읽을 수있는 방식으로 인코딩하여 사용자 에이전트가 생일 알림 또는 예약 된 이벤트를 사용자의 캘린더에 추가하도록 제안 할 수 있습니다.
time태그는 시간을 표시할 때 사용하는 태그입니다. datetime속성을 사용하며 datetime속성 값으로 날짜와 시간값을 입력합니다.

HTML Reference v1.0 </doc>

HTML

태그(tag)

속성(Attrubute)

요소(Element)

주석

블럭요소와 인라인 요소

DTD(Document Type Declaration) 선언

언어 속성 설정

문서 구조

웹 표준

웹 접근성

웹 접근성 필요성

정보통신 환경의 이해

HTML5shiv 기능

html5shiv.js

html5shiv-printshiv.js

html5shiv 사용법

IE 조건부 주석 (Conditional Comment)

조건부 주석 기본 문법

조건부 기호

TAG

<div>

<p>

<ul>

<li>

<a>

<img>

<pre>

<code>

<br>

<hr>

<meta>

<table>

table 태그와 함께 사용할 수 있는 속성

<strong>

<em>

<h1>~<h6>

colgroup

span

div

form

input

fieldset

legend

caption

label

button

placeholder

address

section

nav

main

aside

header

footer

article

script

i

figure

figcaption

iframe

속성

picture

viewport-fit=cover

time