05/19 HTML5_Additional BasicElements

1. iframe 태그

웹페이지 안에서 다른 웹페이지를 표현할 때 사용한다.

특히 광고를 할 때 활용된다.

f12를 누르면 html 소스 코드를 볼 수있는데

이때 각 html 태그를 클릭하면 어떤 영역을 표시하고 있는지 알 수있다.

광고를 표시할 때 유용한 이유는 한 사이트에는 각기 다른 카테고리가 있는데

광고는 실시간으로 변하게 되므로 어떤 서버에만 광고 page를 교체시킬 수 있게

다른 부서에서 편집하기 쉽게 독립시킬 수 있기 때문이다.

srdoc 속성을 넣으면 불러오는 소스의 특성을 무시하고 정의할 수 있다.

많이 쓰지는 않느 기능이다.

html 혹은 웹브라우저 혹은 파일들을 불러올 수 있다.

iframe을 태그를 달면 계층적인 윈도우가 만들어진다.

브라우저 윈도우와 프레임 윈도우는 부모 자식관계이다.

parent window / child window / top window

이러한 관계를 잘 파악해야 하는 이유는 javascript로 웹페이지를 구성하는 객체들(태그들)

Dom 객체들을 찾거나 변화시키거나 할 때 javascript 코드로 제어를 하는데 이러한 용어를 많이 쓴다. 

2. target attribute

<base>, <a>, <area>, <form> 태그들

HTML 페이지을 표시하니는 윈도우를 명시하기 위해 쓰인다.

속성의 값(value) : _blank, _self, _parent, _top

이러한 특정 속상으로 정할 수 있고

iframe의 name 속성으로도 사용자 정의로 정할 수 있다.

이전에는 iframe의 다양한 속성이 지원되었는데 HTML5에서는 더이상 지원하지 않는다고 한다.

하지만 브라우저는 이전의 만들어진 페이지를 알아서 적당해서 표현해주니 활용가능하다고 한다.

새롭게 추가된 속성은 seamless 속성으로

경계가 없이 보여지고 자연스럽게 parent window에 스며들 수 있다.

<iframe src="inner.html" width="300" height="200" seamless></iframe>

3. block 태그와 inline 태그

block 태그는 <p>, <h1>, <div>, <ul> 등이 있으며 일반적으로 쌍으로 이룬 경우가 있다.

inline 태그는 <strong>, <a>, <img>, <span>이 있으며 블록 안의 컨텐츠들을 표현하기 위해 쓰인다.

블록 태그는 항상 새 라인에서 차지하여 다른 태그와 서로 위치를 공유하지 않는다.

가장 많이 쓰는 태그가 <div> 태그이다.

인라인 태그는 블록안에 들어가며 블록의 일부분으로서 출력됩니다.

가장 많이 쓰는 태그는 <span> 태그이다.

div와 span 태그는 웹사이트를 구축할 때 꼭 필요한 태그이다.

div로 묶으면 하나의 블록이 되는데 특정영역을 지정하여 공통된 스타일을 적용하고 싶을 때 쓰인다.

4. multimedia

과거의 html은 <embed>나 <object>태그를 통해 플래시나 미디어플레이어를 불러와 멀티미디어를 재생하였다. 

웹 브라우저가 플래시나 액티브x를 설치해야만 했다.

현재의 HTML5는 <audio>와 <video> tag를 지원한다. flash는 지원하지 않는다.

<audio src="old_pop.mp3" autoplay controls>

오디오의 다양한 속성들

autoplay : 준비되는 대로 자동재생

controls : 컨트롤 인터페이스가 화면에 보인다.

loop : 무한 루프

muted : 음소거한다.

preload : 페이지가 로드 될 때 오디오 파일이 같이 로드되어야 하느지 여부를 결정한다.

(단, autoplay 속성이 설정되어 있다면, preload 속성은 무시됩니다.)

src : 음악의 소스를 정한다.

mp3, ogg, wav만 지원한다.

웹브라우저마다 지원하지 않는 경우가 있다.

mp3는 전부 지원한다.

호환성을 위해 두 가지 형식의 파일을 소스로 넣을 수 있다.

비디오는 아래와 같다

<video src="movid.mp4" autoplay controls>

비디오의 다양한 속성들

autoplay : 준비 되는대로 자동재생

controls : 컨트롤 인터페이스를 보여준다.

height : 비디오 플레이어의 세로 길이

loop : 반복재생

muted : 음소거

poster : 비디오가 로딩되는 중이거나 유저가 플레이를 누르기 전 보여지는 이미지

preload : 페이지가 로드 될 때 비디오 파일이 같이 로드되어야 하느지 여부를 결정한다.

(단, autoplay 속성이 설정되어 있다면, preload 속성은 무시됩니다.)

src : 소스 파일

width : 비디오 플레이어의 가로 길이

mp4, webm, ogg를 지원한다.,

브라우저마다 지원범위가 다르며 mp4는 전부 지원한다.

5. Typical Document

Page num.

Chapter Title.

subtitle

Body text.

Paragraph

Explanation Section

Firgure & Table

각각들이 태그라는 것을 통해 표현한다.

기존의 HTML은 한계가 있는데

- 웹 문서의 구조를 표현하기 위한 태그가 없었다.

- 대부분 문서를 <div>와 <table>로 표현했다.

- 그래서 HTML 소스 코드를 보면 문서의 구조를 이해하기 힘들다.

따라서 문서를 구조화할 필요가 있는데

- 웹 검색 엔진이 좋아하는 웹을 만들기 위해

- 검색이 잘되게 하는 정보를 가지고 있는 공간을 만들기 위해

- IT 디바이스가 웹의 정보를 추출하는 경우가 많아졌다.

- 유저가 만든 웹페이지의 가치를 높이기 위해선 찾기 쉬워야 하기 때문에

그렇게 나온 웹이 'Semantic Web'입니다.

의미있는 컨텐츠를 찾는 것을 편하게 한 웹 문서를 말한다.

이전의 <p>, <div>, <h1>, <h2>와 같은 태그들은 찾기가 힘들다.

6. Semantic tag

Semantic tag가 HTML5에 추가되었다.

문서의 의미와 구조를 잘 보여주는 태그들이다,.

<header>, <section>, <article>, <main>, <summary>, <mark>, <time>등이 있다.

구글의 검색 엔진은 이러한 semantic tag를 바탕으로 검색한다.

그렇게 리뷰, 인물, 제품, 사업, 이벤트 등의 결과를 보여준다.

<header>, <nav>, <section>, <article>, <asdie>, <footer>

문서의 표현은 구조와는 독립적이다.

개발자들은 CSS3로 태그의 위치, 색, 모양을 반드시 명시해야 한다.

HTML5으로 웹 문서를 구성할 때 추천할 사항

- semantic tag로 웹 페이지를 나눈다.

- 타이틀과 소개는 header tag에 넣는 것이 좋다.

- body는 섹션으로 덮는 것이 좋다

- 각 섹션은 article로 쪼개면 좋는다

- 링크과 메뉴는 nav로 쓰면 좋다

- <header>, <section>, <article> 그리고 <aside>는 heading tags(<h1>~<h6>)로 쓸 수 있다.

- 오디오 태그는 백그라운드에 넣고 싶다면 header에 넣는 것이 좋다

- 웹 문서를 꾸미고 쉽으면 css3를 쓰는 것이 좋다.

Other Semantic block tags

<figure>태그는 사진이나, 차트, 소스코드를 바디에 넣는데 그림으로 표시된다.

<details> 태그는 자세한 정보를 표현하는 블록 태그이다.

<summary>태그는 detail 블록의 제목을 나타낼 때 쓰는 태그이다.

Other Semantic block tags

<mark>는 중요한 텍스트를 보여준다.

<time>은 텍스트 콘텐츠가 시간임을 나타낸다.

<meter>는 주어진 범위나 %안의 데이터의 양을 나타낸다

<progress>는 작업을 보여준다.

HTML5에서 사라진 태그들

- 다음의 태그들은 HTML5에서 사라졌다

- 문서의 Semantic 구조를 방해하는 태그들이라 삭제되었다.

- 사용하지 말것, 하지만 웹브라우저에서 지원한다.

<big>, <center>, <dir>, <font>, <tt>, <u>, <xmp>

<acronym>, <applet>, <basefont>, <frame>, <frameset>, <noframes>, <strike>