Dev Thread

1.  <object> 태그 - 외부 파일 삽입하기

웹 브라우저에서 직접 재생할 수 없는 자바 애플릿이나 PDF 파일, 플래시 무비 같은 콘텐츠를 웹 문서 안에 포함시기키 위해 사용합니다.

<img> 태그에서 src 속성을 반드시 사용해야 하듯이 특정 외부 파일을 가져와 표시할 것인지 여부를 알려주기 위해 최소한 data나 type 속성 둘 중 하나를 반드시 사용해야 합니다.

2. <embed> 태그 - 외부 파일 삽입하기

<embed> 태그는 닫는 태그가 없고 주로 <object> 태그를 지원하지 않는 이전 브라우저에서 사용됩니다.

3. <audio> 태그 - 오디오 파일 삽입하기

HTML5에서 배경 음악이나 효과음 등 오디오를 삽입할 때는 <audio> 태그를 사용합니다. 일반적으로 대부분의 브라우저에서는 mp3 파일을 삽입합니다.

<audio> 태그에서 사용할 수 있는 속성은 다음과 같습니다.

4. <video> 태그 - 비디오 파일 삽입하기

<video> 태극에서 사용할 수 있는 속성은 <audio> 태그와 거의 일치한다.

5. <source> 태그 - 여러 미디어 파일 한꺼번에 지정하기

<source> 태그에는 미디어 파일의 경로를 지정하는 src 속성과 미디어 파일의 형식을 알려주는 type 속성을 사용합니다. 간단히 type 속성만 사용할 수도 있고 codecs 속성을 이용해 코덱까지 함께 표시할 수도 있습니다.

6. <track> 태그  - 자막 삽입하기

<출처> HTML5+CSS3 웹 표준의 정석

1. <header>태그 - 머리말 지정

사이트 전체의 헤더는 주로 페이지 맨 위쪽이나 왼쪽에 삽입하며 헤더의 내용으로는 주로 <form> 태그를 사용해 검색창을 넣거나 <nav> 태그를 사용해 사이트 메뉴를 넣습니다.

2. <nav> 태그 - 문서를 연결하는 내비게이션 링크

동일한 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크 모음을 나타냅니다. 푸터에 있는 사이트 링크 모음 부분에도 많이 사용됩니다.

3. <section> 태그 - 주제별 콘텐츠 영역

문맥 흐름 중에서 콘텐츠를 주제별로 묶을 때 사용하며 그 안에서 섹션 제목을 나타내는 <h1>~<h6> 제목 태그가 함께 사용됩니다.

4. <article> 태그 - 콘텐츠 내용

<section> 태그와 비슷해 혼동하기 쉬운 <article> 태그는 웹 상의 실제 내용을 넣습니다. 태그를 적용한 부분을 떼어 내 독립적으로 배포하거나 재사용하더라도 완전히 하나의 콘텐츠가 된다면 <article> 태그를 쓰면 됩니다.

5. <aside> 태그 - 본문 이외의 내용 표시

본문 내용 외에 주변에 표시되는 기타 내용들을 나타냅니다.

6. <iframe> 태그 - 외부 문서 삽입

일반적으로 웹 문서 안에 내용을 직접 입력하지만 다른 외부 문서를 삽입할 수도 있습니다. 이러한 인라인 프레임을 삽입하는 태그는 <iframe> 태그입니다.

<iframe> 태그에서는 여러 속성을 이용해 원하는 형태로 표시할 수 있습니다.

7. <footer> 태그 - 제작 정보와 저작권 정보 표시

사이트 제작자의 연락처 정보와 저작권 정보를 표시합니다.

8. <address> 태그 - 사이트 제작자 정보, 연락처 정보 표시

<address> 태그는 주로 <footer> 태그 안에 사용되는데 웹 페이지 제작자의 이름이나 제작자의 웹 페이지 또는 피드백을 위한 연락처 정보를 넣는 데 사용됩니다. 그리고 웹 사이트와 관련된 우편 주소도 <address> 태그 안에 포합시킵니다. 하지만 단순히 우편 주소를 표기할 용도라면 <p> 태그를 사용해 표시합니다.

<출처> HTML5+CSS3 웹 표준의 정석

일반 문서와 웹 문서는 큰 차이점이 있습니다. 일반 문서는 내용을 입력하는 프로그램과 그 내용을 확인하는 프로그램이 같지만 웹 문서는 문서를 작성하는 프로그램과 그 내용을 보는 프로그램이 서로 다릅니다. 웹 문서를 작성하는 프로그램을 '웹 편집기(Web Editor)'라고 하고 웹 문서를 보는 프로그램을 '웹 브라우저(Web Browser)'라고 합니다.

이 외에도 애플의 '사파리'나 오페라 재단의 '오페라' 브라우저도 있습니다.

웹 문서를 만들 때 HTML 태그를 입력하는 프로그램을 '웹 편집기'라고 합니다. 웹 편집기에 HTML 소스를 입력하면 그 내용을 웹 브라우저로 읽는데 이 웹 편집기는 메모장이든 전문 편집기 프로그램이든 텍스트를 입력할 수 있는 프로그램이면 모두 가능합니다.

<출처> Do it! HTML5+CSS3 웹 표준의 정석

컴퓨터에서 사용하는 모든 파일에는 각각 고유의 형식이 있습니다. 예를 들어 엑셀의 확장자는 ＊.xlsx이고 한글의 확장자는 ＊.hwp입니다. 웹의 경우도 마찬가지입니다. 웹 사이트에서 사용할 문서는 ＊.html(또는 ＊.htm) 확장자를 붙여 다른 문서와 구분합니다. 

HTML은 하이퍼텍스트 마크업 랭귀지(Hypertext Markup Language)의 줄임말로 그대로 해석하면 하이퍼텍스트를 마크업하는 언어입니다. '하이퍼텍스트'란 웹 사이트에서 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능을 말하고 '마크업'이란 태그(tag)를 사용해 문서에서 어느 부분이 제목이고 본문인지, 어느 부분이 사진이고 링크인지 표시하는 것을 말합니다. 즉, 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어가 HTML이라고 정리할 수 있습니다.

웹 편집기의 소스에서 꺾쇠 괄호(<, >)로 묶인 부분이 'HTML 태그(tag)'이고 이렇게 태그를 붙이는 것을 '마크업'이라고 합니다. 이 꺾쇠 괄호 안의 내용은 웹 브라우저 화면에 나타나지 않습니다.

<출처> Do it! HTML5+CSS3 웹 표준의 정석