HTML 기본 정리2

<Blockquotes>

blockquotes 의 섹션(문단, 단락, 리스트등) 인용된 경우, 이를 나타내는 blockqutoe 요소로 감싸야 합니다. cite속성에 출처를 표기합니다.

exampe

테스트 입니다. HTML < blockqutoe > Element (or Html Block Quotation Elements ) indicates that the enclosed text is an extended qutotiaion.

브라우저의 기본 스타일은 인용구를 표현할 때 , 들여쓰기 된 단락으로 나타냅니다. MDN은 추가적인 스타일리과 함께 이를 나타냅니다.

 

<Inline quotations>은 안에 인용구는 ""로 동일하게 작용 합니다

The quote element — <q> — is

intended for short quotations that don't require paragraph breaks.

Citations cite요소의 컨텐츠는 유용하게 보이지만

According to the MDN blockquote page:

cite요소 안에 있는 출처에 대한 링크를 연결 할수 있습니다.

---

약어

웹을 둘러볼때 <abbr>요소를 꽤 많이 사용하여, title 속성을 통해 원래의 용어를 나타낼떄 사용 하게 됩니다.

 

Nasa

는 대단하다

---

연락처 세부 현황 표기

 <address>요소는 HTML 문서를 작성한 사람의 연락처 정보를 표기하기 위해서 사용되어야 합니다.

page writehn by chris .

---

 

  위첨자와 아래첨자

my birthday is on th 25^th of May 2001.

Caffein's chemical formula is C ₈ H ₁₀...

---

컴퓨터코드를 나타내기

• <code> 일반적인 컴퓨터 코드를 표시
• <pre> 공백 유지
• <var> 변수이름 특별히 표시
• <kbd> 컴퓨터에 입력된 키보드 입력
• <samp>출력 표시

시간과 날짜 표시

HTML은 기계가 읽을 수 있는 형식으로 시간과 날짜를 표시하기 위한 <time > 요소를 제공합니다

테스트입니다time <time> datetime="2016-01-02" 20 january 2016 </time>

---

문서의 기본 섹션

<header>

일반적으로 큰 제목과 로고 등이 있는 띠

<navigation bar>

홈페이지의 메인 섹션 연결, 대부분 메뉴버튼이나 링크, 탭등으로 표현 됩니다.

<main content>

웹페이지의 가장 독특한 컨텐츠를 포함하고 있는 중심의 큰 부분

<sidebar>

주변의 정보, 링크, 인용 부호, 광고 등입니다

<footer>

페이지 바닥의 줄로 일반적으로 작은 정보, 저작권 정보, 또는 연락처를 포함

컨텐츠 구조화를 위한 HTML

• header <header>
• navigation bar <nav>
• main <main> <article> <section> <div>
• sidebar <aside>
• footer <footer>

---

HTML 레이아웃 요소의 세부사항

main 그 페이지의 독자적인 콘텐츠

---

span과 div 차이

span과 div의 차이는 가로폭을 차지하는 역활입니다. span은 글자의 생성된 부분만 차지하지만 div는 전체를 차지고 하고 있습니다

div는 폭과 넓이를 지정이 가능합니다. span은 불가능 합니다. div는 필연적으로 줄 바꿈을 동반하지만 span은 줄바꿈 없고, 문장 중간에 들어 갈수 있습니다.

div 태그와 span을 사용하면, table 태그를 대신 할 수 있고, 파일의 크기를 더 줄일수 있으며, 웹의 속도를 올려줄수가 있습니다.

---

br은 문단 한칸 내려쓰기, hr은 문단의 섹션이 달라진때 구분선을 해줍니다.

---

작성시 페이지에 공통적으로 적용 할 것을 적어 놓으세요. navigation이나 menu, footer 컨텐츠 처럼 공통적으로 포함하고 싶은 내용을 적어봅니다

웹페이지에 대해서 스케치를 해봅니다. 메인에 대해서 각 블럭의 기능도 적어 봅니다

웹사이트에 포함시키길 원하는 다른 모든 컨텐츠를 brainstoming 하세요

모든 컨텐츠를 그룹화 해 다른페이지에서 어떤 부분들이 함께 할수 있는지 생각해 봅니다. card sorting 기술과 매우 유사 합니다

대략적인 사이트맵을 그려봅니다. 사이틔 각 페이지를 동그라미로 지정하고, 각 페이지간의 동작 흐름을 보여주기 위한 선을 그려보세요.

이러한 내용은 문서로 저장해두세요

---

문법오류<Syntext error>와 논리 에러<Login error>

문법오류는 실제 프로그램이 실행되지 않는 코드의 맞춤법 오류이며 논리 에러는 언어 문법이 올바르게 작성된 오류입니다. 동작은 하지만 코드가 의도한 것돠 다르게 동작하므로, 프로그램이 잘못 실행이 됩니다.

---

예를 들어, 당신의 이미지 파일 이름이 dinosaur.jpg 이고, 아래와 같이 이미지를 삽입 할수가 있습니다

<img src="dinosaur.jpg"> 

html페이지의 같은 디렉토리 하의 images라는 하위 디렉토리에 있다면 (방식 구글이 SEO/색인을 위해 추천함)

절대 경로를 상ㅇ해서 이미지를 삽입도 가능 하다

<img src="https://test.example.com/dinosaur.jpg"> 

절대경로는 쓰지 말아야 합니다. 이미지에대한 소유권이 없다면, 저작권에 대해 문제가 있습니다.

alt

alt is supposed to be a textual description of the image

example:

<img src="dinosaur.jpg" alt="this image is dinosure skeleton">  

 

title

to provide further supporting information

---

<vedio> & <audio>

the vedio element allows you to embed a vedio very easily

<vedio src="rabbit320.webm controls> <p> your broswer doesn't suppoert HTML vedio. Here is a <a href="rabbit320.webm"> link to the vedio <a> <video>  

 

src

src attribute contains a path to the video you want to embed

controls

users must be able to control video and audio playback. you must either use the conrols attribute to include the browser's own control interface or build your interface using the approprioate javascript api

Contents of a media file

WebM file containing a movie which has a main video track and one alternate angle track plus audio for both english an spaninsh in addtion to audio for an english commentary track can be concepturalized as shown in the diagram below

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>

src attribue out of th actual <video> tag, and instead included separate <source> elements that point to their own sources

<video controls 
  autoplay loop muted
  poster = "poster.png">
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>

width & hegint

video size

autoplay

makes the audio or video start palying riht away

loop

makes the audio or video start palying again whenever it finishes

---

Displaying video text tracks

to do so we use the WebVTT file format and the <track> element

WebVTT is a format for writing text files containing multiple strings of text along with metadata such as the time in the video at which each text string should be displayed

WEBVTT
1
00:00:22.230 --> 00:00:24.606
This is the first subtitle.

2
00:00:30.739 --> 00:00:34.074
This is the second.

  ...

<video controls 
  autoplay loop muted
  poster = "poster.png">
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>  
   <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>