[HTML5의 기본문서] 1.시맨틱(semantic)태그의 의미 시맨틱(semantic)의 단어 뜻은 의미를 부여 했다는 뜻이다. HTML5에서는 태그만 보고도 문서를 쉽게 이해 할 수 있도록 의미를 가지는 태그를 도입 이것을 시맨틱 태그라한다. [종류] <header>, <hgroup>, <nav>, <article>, <section>, <aside>, <footer> 등 2. <header> 사이트 전체의 머리부분이 된다. <head>태그와의 차이점 <head>태그는 문서에서 단 한 번만 사용할수 있고 <header> 태그는 여러 번 사용할 수 있다. <head>태그는 <html>태그 다음에 입력하나, <header> 태그는 본문 즉 <body>태그 안에서 사용가능하다.
3. <hgroup> <hgroup>태그는 제목과 그와 관련된 부제목을 묶어주는 역할을 담당. <header>와의 차이점 <header>태그는 페이지를 구성하기 위한 구분단위이고, 즉 내용에 따른 페이지 구성분류단위이고, <hgroup>은 페이지 전체 구조에 대한 개념으로 쉽게 눈에 들어오게 하는 역할을 담당.
4. <nav> <nav>태그는 네비게이션 표현을 위한 태그이다. <nav>는 본문 위치에 영향을 받지 않는다. <header><footer><aside>중 어느 위치도 상관없다. 즉, <body>태그 안에는 어디든 사용할 수가 있습니다. 5. <article> <article>태그는 웹페이지 상에서의 실제 내용을 의미한다. <article>태그를 사용한 웹컨텐츠는 다른 곳에 배포하거나 재사용할 수 있다. 검색엔진의 검색로봇에서는 <article>태그가 사용된 컨텐츠를 배포할 수 있는 컨텐츠로 인식한다.
6. <section> <section>태그는 웹컨텐츠들을 그룹으로 묶어주는 역할을 담당한다. 앞에서 배운 <article>태그와는 달리 <section>태그로 묶은 컨텐츠는 재배포 할 수 없다. 단, <section>태그로 내용을 묶은 후 그 안에서 <article>태그를 사용할 수 는 있다. <section>태그로 내용을 묶은 후 그 안에서 또 다른 <section>태그를 사용할 수 있다.
7. <aside> 웹컨텐츠 제작시 주 내용이 아닌 왼쪽이나 오른쪽에 부수적인 내용이 들어가는 부분을 <aside>태그로 표현한다.
8. <footer> <footer>태그는 웹사이트의 저작권 정보나 저작권표기와 같은 내용이 들어가는 부분이다. 다음은 KBS 사이트의 저작권정보의 예이다.
[글과 관련된 태그] 1. <Hn> ~ </Hn> 태그 제목을 나타내는 태그 <H1>에서 <H6>까지 있으며 <H1>태그가 가장 크고 <H6>태그가 가장 작다. HTML4.0에서는 <font>태그와 비교하면서 많이 설명이 되어졌지만 HTML5.0 에서는 <font>태그 자체를 사용하지 않으므로 비교설명은 않하고 <Hn>태그만 설명되어진다 2. <p> ~ </p> 태그 단락을 만들어주는 태그 영어 paragraph을 의미한다. 흔히 <br>태그와 많이 비교해서 설명한다. <p>태그는 두 번 엔터키를 친 효과가 나타나고 <br>태그는 한 번 엔터한 효과만 나타난다.
3. <br> 태그 콘텐츠의 줄을 분리하는 역할을 한다. 흔히 개행태그라고 불리는 태그이다. <p>태그는 두 번 엔터키를 친 효과가 나타나는데 반해 <br>태그는 한 번 엔터한 효과만 나타난다.
4. <a> 태그 하이퍼텍스트를 만들어주는 태그이다. 하이퍼텍스트란 누르면 다은 페이지로 이동하는 개념을 의미한다. Href 속성을 이용해서 하이퍼링크가 될 페이지를 지정한다. 5. 글자의 스타일 <b> ~ </b> : bold체를 만든다. <i> ~ </i> : 이탤릭체를 만든다. <sub> ~ </sub> : 아래첨자를 만든다. <sup> ~ </sup> : 위첨자를 만든다. <ins> ~ </ins> : 밑줄그은 문자를 만든다 <del> ~ </del> : 취소선을 만든다.(가운데 선)
6. 루비문자 일본어에서 자주 사용되는 글자형식 <ruby >~ </ruby>, <rt> ~ </rt> 태그 루비 지원 웹브라우저 -인터넷 익스플로러 8에서의 한글 루비(<big> 태그 사용)루비를 지원하는 브라우저 -인터넷 익스플로러(Internet Explorer v6.0.2900.5512 이상) -구글 크롬 -사파리 루비를 지원하지 않는 브라우저 -모질라 파이어폭스(Firefox v2.0.0.9)[2] -오페라(Opera v9.24)[3] -넷스케이프 내비게이터(Netscape Navigator v9.0.0.3) <rt> … </rt> 태그를 지원하지 않는 브라우저에서는 <rp>…</rp> 태그를 이용해서 정상적인 출력을 유도한다. [목록태그] 1. <LI>태그 <LI>~</LI> : 항목을 추가할 때 쓰며 종료 태그 </LI>는 생략할 수 있다. 리스트에 독립적인 번호를 부여할 때 사용한다. (순서 없는 목록)TYPE=disc,circle,square(소문자로 사용) DISC: ● CIRCLE:○ SQUARE:■ 2. 순서 있는 목록 만들기 Ordered List의 단어를 줄여서 만든 태그. <OL>~</OL>태그를 이용해서 작성한다. 순서 있는 목록 즉, 목록 앞에 숫자를 붙여서 순서를 가지는 목록을 만들 때 사용합니다.(기본값은 숫자) TYPE 속성 TYPE=A, a, I, i, 1 의 값을 가질 수 있다. A: 대문자 알파벳 a: 소문자 알파벳 I: 대문자 로마숫자 i: 소문자 로마숫자 1: 숫자 START=n 리스트의 시작 번호를 임의로 바꿀 수 있다. 3. 순서 없는 목록 만들기 Unordered List의 단어를 줄여서 만든 태그. <UL>~</UL>태그를 이용해서 작성한다. 목록 앞에 기호를 붙여서 순서 없는 목록을 만들 때 사용합니다.(기본값은 DISC) TYPE=disc, circle, square DISC: ● CIRCLE:○ SQUARE:■ [이미지 태그] 1. <img> 태그 Image의 줄임말 이미지를 삽입해주는 태그 반드시 src라는 속성을 동반한다. </img>태그는 기록하지 않아도 된다. -사용법- <img src=“경로/이미지화일 이름”> 경로 : 상대경로만 사용한다. 이미지를 삽입하려는 웹페이지와 같은 폴더에 있을 때 : 이미지 화일명만 기록한다.(나머지의 경우는 경로를 써주어야한다.) 2. <img> 태그의 속성 -Src속성- <img src=“경로/이미지 화일명”> 형식으로 쓰인다. 경로 웹문서와 이미지가 같은 폴더에 있는 경우 Src=“이미지 화일명” 이미지가 웹문서의 바로 하위 폴더에 있는 경우 Src=“폴더명/이미지 화일명” 이미지가 웹문서의 바로 상위 폴더에 있는 경우 Src=“../이미지 화일명” -Alt- 이미지가 제대로 로드 되지 않았을 경우 대체 문구를 나타낸다. Alternative의 약어 -title- 이미지 위에 마우스 포인터를 가져다 대었을 때 나타나는 풍선도움말의 문구를 나타낸다 -Align- Align =Left, right 의 경우 정렬과 관련된 속성으로, 텍스트와 이미지가 함께 있을 경우 텍스트에 대한 이미지의 위치를 지정할 수 있다. Align = top, middle, bottom 의 경우 역시 정렬과 관계되는 속성이며, 이미지와 텍스트가 함께 있을 경우 이미지에 대한 텍스트의 수직 정렬에 관한 내용이다. Border <img src=“이미지화일명”border=숫자>형식으로 사용된다. 이미지 테두리를 만들어 준다. 이미지에 하이퍼링크가 만들어졌을 경우는 border= 0을 입력해 테두리를 없애주어야한다. 숫자는 픽셀을 의미한다 Height, Width 이미지의 너비와 높이를 설정해 주는 속성이다. <img src=“이미지화일명” Height=숫자 Width=숫자 >형식으로 사용된다. 이미지의 크기를 HTML안에서 재설정하는 기능으로 너무 크게 하거나 너무 작게 하면 이미지가 깨지므로 작은 숫자값 안에서 조정해야 한다. [오디오 태그] 1.<audio> ~ </audio> 웹브라우저에서 플러그인의 도움없이도 음악멀티미디어를 재생할 수 있게 해주는 태그이다. 아직까지는 브라우저마다 재생할 수 있는 음악파일이 동일하지 않기 때문에 종류마다 하나씩 여러 줄의 src의 url을 적어주어야한다. 많은 속성을 동반하지만 중요한 속성 몇가지만 알아보겠다. 익스플로러 - 지원안함 파이어폭스 - Ogg, wav 오페라 - Wav,ogg 사파리 - Mp3, wav 크롬 - Ogg, mp3, wav 2. 속성 -Src 음악화일의 경로 즉, URL을 써주는 속성이다. <audio src=“화일명” 또는 주소>
-Controls 소리화일을 조절할 수 있는 조절기를 보이게 할 것인지 아닌지를 결정할 수 있다. <audio src=“화일명” controls> -Autoplay 음악을 자동으로 재생할 것인지를 결정하는 속성 <audio src=“화일명” autoplay> -Loop 소리화일을 반복할지 안할지를 설정할 수 있다. <audio src=“화일명” loop> -Preload 음악을 재생하기 전에 모두 불러올지를 결정하는 속성이다. <audio src=“화일명” preload>
[비디오 태그]
1. <video> ~ </video> 태그 동영상을 삽입해주는 태그이다. 즉, 태그를 이용하여 동영상을 삽입할 수 있다. HTML5를 이용하여 삽입한 동영상은 자동재생 안되므로 컨트롤도구가 삽입되어야 한다. 2. 속성 -src 동영상 화일의 경로 즉, URL을 써주는 속성이다. <video src=“화일명” 또는 주소> -controls 동영상 화일을 조절할 수 있는 조절기를 보이게 할 것인지 아닌지를 결정할 수 있다. 컨트롤 막대가 화면에 표시되며 재생/일시정지 단추, 트랙바, 볼륨 조절기 등이 있다. <video src=“화일명” controls> -autoplay 동영상을 자동으로 재생할 것인지를 결정하는 속성 <video src=“화일명” autoplay> -Loop 동영상화일을 반복할지 안 할지를 설정할 수 있다. <video src=“화일명” loop> -Width,height Width: 동영상이 재생될 너비를 설정 Height: 동영상이 재생될 높이를 설정 <video src=“화일명”width= height= >
-preload 동영상 파일을 다운로드하여 재생하게하는 방식 auto: 자동으로 다운로드 none: 사용자가 컨트롤을 조작하기 전까지 다운로드 금지 Matadata : 메타데이터를 가져오며 사용자가 컨트롤을 조작하면 실제 비디오부분을 다운한다. |