시멘틱 태그
- 웹 페이지의 레이아웃 구조를 만드는 태그로 직관적인 이름으로
개발자와 시각장애인들에게 구조를 더 정확하게 전달하는 역할을 한다.
시멘틱 태그는 모두 block속성을 가지며 뒤에 닫는 태그가 있는 일반태그이다.
[종류]
1. <header>
-------------------------------------
웹페이지 최상단에 위치한 영역을 지정할때 사용한다.
보통 로고, 메뉴를 포함한다.
2. <nav>
--------------------------------------
메뉴영역을 지정할때 사용하는 태그. nav태그는 html문서 안에 여러 번 사용이 가능하고
여러 개를 지정할때 id로 구분한다.
3. <main>
--------------------------------------
main태그는 section태그나 article태그 등 본문 영역을 묶어주는 태그이다.
주제별로 묶어진 큰 영역들을 감싸는 컨텐츠 영역을 말한다.
4. <section>
---------------------------------------
컨텐츠들을 포함하는 태그이다. 보통 컨텐츠들을 주제별로 묶을 때 사용하고
section태그에는 h1~h6 같은 제목태그가 포함된다.
5. <article>
----------------------------------------
article은 사전적인 의미로 신문이나 잡지의 '기사'를 뜻한다.
<article>태그는 웹 상의 실제 내용을 작성하는 영역으로 쓰인다.
예를 들면 이벤트 페이지나 블로그의 포스트같은 독립적인 웹 컨텐츠가 이에 해당된다.
여러 사용자에게 공유가 가능한 페이지를 작업할때 주로 사용된다.
또한 article태그 안에는 section태그가 들어갈 수 있고, section태그 안에도 article태그가
들어갈 수 있다. 서로 포함하여 쓸 수 있다.
6. <aside>
----------------------------------------
웹 문서에서 왼쪽이나 오른쪽 혹은 하단에 사이드바가 표시되는 영역이 있다.
이런 사이드 영역을 만드는 태그가 aside태그이다.
aside태그에는 광고나 링크 모음같은 것들이 들어가며 문서의 메인내용에
영향을 미치지 않는 내용들이 들어간다.
필스 태그가 아니며 생략 가능한다.
7. <footer>
---------------------------------------------
웹 문서의 하단에 저작권 표시와 같은 내용과 연락처 정보 등을 포함하는 영역이다.
보통 로그인이 가능한 사이트라면 개인정보처리방침, 이용약관 등의 내용이 포함 될 수 있고
만약 사이트에서 구매가 가능하다면 사업자 등록번호, 대표자의 이름, 개인정보 처리자,
통신판매업 신고번호와 고객센터 전화번호 등이 포함되어야 한다.
또한 사이트에서 사용자의 위치 정보를 수집한다면 위치정보 이용약관도 포함된다.
footer에는 사이트맵과 같은 전체 메뉴를 표시하기도 한다.멀티미디어 태그
- 인터넷 초기에는 웹 사이트에서 영상이나 음원파일을 재생하기 위해 ActiveX라는 프로그램을 설치해야만 확인이 가능했습니다.
하지만 악성프로그램의 위험이 크다는 단점 때문에 멀티미디어를 재생할 수 있는 다양한 태그가 생겼습니다.
1. <audio>
- 소리 파일을 재생하기 위해 사용합니다. 웹표준에 따라 음원파일이 지원되지 않는 환경을 고려하여 '이 음원 파일은 해당 브라우저에서 지원되지 않습니다.'라는 문구를 태그 사이에 넣어주어야 합니다.
[기본형] - <audio src="연결경로" 속성="값"> > <source src="연결경로" type="audio/wav"> <source src="연결경로" type="audio/wma"> <source src="연결경로" type="audio/aac"> </audio> : 호환되지 않는 음원파일을 다양한 환경에서 지원할때 사용한다.
[속성]
- autoplay : 오디오를 자동 재생하낟.
- controls : 웹 화면에 오디오 재생바를 출력한다.
- muted : 음소거
- preload : 재생버튼을 누르기 전에 오디오 파일을 다운로드하여 준비한다.
속성값으로는 none / metadata / auto 값이 있고 none은 사용자가 오디오를 틀지 않거나 서버가 최소한의 트래픽을 유지해야할때 사용한다.
즉, 미리 다운로드하여 준비하지 않는다.
metadata는 사용자의 의도에 따라 해당 음월을 재생할수도 있고 재생하지 않을수도
있을때 metadata(예를들어 길이나 소량의 내용)을 미리 다운로드 받아 준비해주는 것을 말한다.
auto는 사용자의 의도와는 관계 없이 모든 데이터를 미리 다운받아 준비하는 것을
말한다. 용량이 큰 경우 브라우저의 성능과 데이터를 낭비할 수도 있음.
- loop : 반복재생
2. <video>
- 동영상을 출력할때 사용한다. 동영상은 박스의 형태이므로 width와 height속성을 넣을 수 있다. 이외의 다른 속성은 audio랑 동일하다. 단, 동영상을 자동재생하기 위해서는 muted속성을 함께 포함해야만 자동재생이 되도록 w3c에서 제한했다.
audio와 마찬가지로 동영상 파일이 지원되지 않는 환경을 고려하여 '이 동영상은 해당 브라우저에서 지원되지 않습니다.'와 같은 문구를 반드시 포함해야 한다.
[기본형]
<video src="연결경로" 속성></video>
<video src="연결경로" 속성>
<video src="연결경로" 속성>
<source src="연결경로" type="video/mp4">
<source src="연결경로" type="video/wav">
<source src="연결경로" type="video/webm">
</video>
[속성]
- 위에 있는 audio속성들은 모두 사용가능하다.
- width : 동영상의 넖이를 지정한다.
- height : 동영상의 높이를 지정한다.
- poster : 동영상이 지원되지 않는 환경에서 보여줄 대체 이미지.
대체 이미지가 있다면 대체 텍스트는 생략한다.
