[chap.9] Semantic html (마지막)
임시저장의 중요성을 정말 뼈져리게 느꼈다..
거의 다 작성했는데 나의 실수로 날아가버렸다
허탈하다..
보이스피싱으로 몇백 날리는 것보다는 낫다 그래도
Semantic tag는 특정 태그에 의미를 부여하여 각종 기능을 부여할 수 있고, 또한 프로그램밍 코드를 읽고 의미를 인식할 수 있도록 하는 지능형 웹을 구현하기 위한 태그이다.
1. Header and nav
A <header> is a container usually for either navigational links or introductory content containing <h1> to <h6> headings.
둘의 차이를 보자.
<header>을 쓰면 document 전반적으로 코드를 읽기 쉬워지며, 어떤 내용이 있을지 쉽게 식별가능하다
하지만 <div>를 쓰면 한눈에 디테일을 알 수 없다.
A <nav> is used to define a block of navigation links such as menus and tables of contents. It is important to note that <nav> can be used inside of the <header> element but can also be used on its own.
2. Main and Footer
1.describes the main and unique content of the document
사이드바, 네비게이션 링크, 저작권 정보, 사이트로고, 좋아요버튼, 검색 창 등
여러 페이지에 걸쳐 나타나는 내용이 오면 안 됨.
2.cannot exist more than once per document
즉, 한 document에 2개이상의 <main>이 올 수 없다.
3.cannot go inside <article><section><aside><header><footer>and<nav>
<main>은 자식요소가 될 수 없다.
보시다시피 <main>은 그 페이지에서 제일 중요한 정보를 품는 <article>, <header> 와 다른 자식요소들을 품고있다.
<footer>은 아래의 이미지를 보면 이해가 빠르다
홈페이지 하단에 보이는
- Contact information
- Copyright information
- Terms of use
- Site Map
- Reference to top of page links
등이 보통 footer에 들어간다. <main>과는 따로 쓰인다.
3. Section and Article
나를 확실히 이해시켜준 글을 가져와봤다! 출처는~~ 홈짱
<section>
※ box 역할하는 block 요소임. 내용 없으면 아무 것도 안 보임.
1. <section> 태그 안에 <main> 태그 사용 금지.
<main> 태그 안에서 <section> 태그 사용 가능.
2. 연관된 문서의 단락이 아닌, 일반 컨테이너로 사용 금지.
특히, 단순 스타일 줄 목적이면, <div> 태그 사용할 것.
3. <section> 태그 안에는 아래 태그들 사용 가능.
・<header> : 1개만 가능.
・<article> : 여러 개 가능.
・<footer> : 1개만 가능.
4. <h1> ~ <h6> 제목 태그를 사용해 <section> 구분.
<article>
1.<article> 태그 안의 내용은 반드시 웹문서의 다른 부분들과 독립적이여야 하며,
자체로 의미를 이루어야 함.
2. <article> 태그 안에 올 수 있는 것들 :
포럼 포스팅, 블로그 포스팅, 뉴스거리, 댓글
3.블럭요소 : 한줄 전체 차지.
예시를 보면 이해가 쉽죠?
4. The aside element
주변의 메인콘텐츠와 관련된 내용을 별도로 표시.
주변 메인 콘텐츠 내용과 반드시 관련이 있을 때만 사용.
이 태그가 제일 감을 잡기 어려웠다.
역시 제일 좋은 건 많은 예시를 보는 것!
5. Figure and Figcaption
<figure> is an element used to encapsulate media such as an image, illustration, diagram, code snippet, etc, which is referenced in the main flow of the document.
내용 상 웹문서의 일부이나 위치상 독립적이며,
없더라도 웹문서 흐름에 영향 안 미치는 콘텐츠.
Usually, <figcaption> will go inside <figure>. This is different than using a <p> element to describe the content; if we decide to change the location of <figure>, the paragraph tag may get displaced from the figure while a <figcaption> will move with the figure. This is useful for grouping an image with a caption.
6. Audio
codecademy 커리큘럼대로는 하고 있지만 이게 왜 지금 나오는지는 잘 모르겠다..
여튼! 사진과 동영상처럼 오디오파일도 넣을 수 있다!
1. <audio></audio> 태그 만들어주고 동영상처럼 controls도 입력!
2. <source src="" type="audio/mp3">
여기서!
- MP3 : IE9+, 최신 주요 브라우저 모두 지원 (※ IE8 이하 지원 X) type="audio/mp3"
- OGG : 크롬, 파이어폭스,오페라 지원. (※ IE, Safari : 지원 X) type="audio/ogg"
- WAV : 주요 최신 브라우저 모두 지원. (※ IE : 지원 X) type="audio/wav"
3. <audio></audio>사이의 텍스트는 오디오 태그가 지원 안 되는 브라우저에만 보여진다
여기서 다시 짚고 넘어가면, video tag는 아래와 같았다.
오디오는 소스태그를 따로 넣어주는군!
7. Embed
말 그대로 웹페이지에 외부의 무언가를 끌어올 때 사용한다.
지금까지는 <video><img>등의 태그를 썼지만 <Embed>는 소스에 상관없이 쓸 수 있는 태그이다.
그렇기 때문에 src와 type는 반드시 입력해주어야 한다.
참고로
<embed> 태그는 다양한 형태의 외부 자원을 삽입하기 위해 HTML5에서 새로 추가된 태그입니다.
그런데 현재 대부분의 브라우저에서는 필요한 기능은 브라우저 내에서 자체적으로 제공하고, 외부 플러그인 지원을 중단하고 있습니다. 구글에서는 대표적인 플러그인인 어도비 플래시를 올해까지만 지원하고 이후로는 지원 중단한다고 밝혔지요. 따라서 처음 생겼을 때에 비해 <embed> 태그의 효용성이 많이 떨어집니다.
이미지를 끌어올 때는 <img> 태그, 오디오를 끌어올 때는 <audio> 태그, 비디오를 끌어올 때는 <video> 태글 사용하면 되니까요. W3C에서도 <embed> 태그보다는 이런 태그를 사용하도록 권고하고 있습니다.
즉, <embed> 태그는 이런 것이 있다 정도로 알아두면 좋을 것 같습니다.
이렇게 html 완전 생기초는 끝이 났다! 아직 모르는 tag, attribute도 많고 디테일도 많이 떨어지지만 처음부터 목표는 html을 이해하고 모르는 게 나오면 구글링해서 해결할 수 있을 정도의 수준을 만드는 것이었다.
이제는 css와 javascript를 배우면서 html도 같이 보완해나갈 예정이다
앞으로가 너무 기대된다 잘할 수 있다!!