okdream99

우리는 지난 21th 블로그에서 웹페이지에 표시되는 글꼴에 사용되는 다양한 태그들중 2번쨰로 <b> 태그와 <strong>에 대하여 공부하였습니다.

이번 22th 블로그에서는 웹페이지에 표시되는 글꼴에 사용되는 아래의 다양한 태그들중 3번쨰로 텍스트에 밑줄을 그어주는 <ins> 태그와 <u>태그에 대하여 소개하고자 합니다.

01) <i>태그와 <em> 태그

02) <b> 태그와 <strong> 태그

03) <ins> 태그와 <u> 태그

04) <del> 태그와 <s>태그

05) <sup> 태그와 <sub>태그

06) <small>태그와 <big> 태그 

----------

----------

1. <ins> 태그와 <u> 태그란 무엇인가?

<u>태그는 단순히 밑줄을 긋고 싶을 때 사용하고 <ins>x태그는 새로 추가된 내용을 의미할 때 사용하는 태그입니다.

1) <ins> 태그

html에서 사용되는 <ins> 태그는 insert라는 영어단어의 앞글자 3개에서 따온 태그로, 웹페이지의 새로 추가된 텍스트에 밑줄을 표시하는 경우에 사용하는 태그입니다.

2) <u>태그

html에서 사용되는 <u> 태그는 underline이라는 영어단어의 앞글자 1개에서 따온 태그로, 웹페이지의 텍스트에 단순히 밑줄을 표시하는 경우에 사용하는 태그입니다.

2. <ins> 태그와 <u> 태그 구문

<ins>태그와 <u> 태그 둘다 텍스트에 밑줄을 표시하는 태그로, <opening> 태그와 <closing> 태그로 구성됩니다. <opening> 태그와 <closing> 태그 사이에 Text를 넣으면 텍스트에 밑줄이 표시됩니다.

1) <ins> : <ins>Text </<ins>

2) <u> 태그 : <u>Text </<u>

3. <ins> 태그와 <u> 태그 의 차이

웹브라우저로 보면 둘다 밑줄이 그어져 있기 때문에 같아 보이지만, <ins>태그는 datetime 속성값을 이용하여 내용의 추가와 삭제가 언제 이루어졌는지를 의미적으로 지정할 수 있는 반면에 <u>태그는 단순히 밑줄만을 표시한 경우입니다.

<ins> 태그로 감싼 부분은 밑줄이 표시됩니다. datetime 속성값은 눈에 보이지 않지만 의미적으로 그 시점에서 내용의 추가와 삭제가 이루어졌음을 나타내게 됩니다.

참고로 datetime 속성에 들어갈 값은 <time> 태그와 같은 형식입니다. 다만 특정 기간이 아닌 ‘특정 시점’으로 지정해야 한다는 차이가 있습니다

4. <ins> and <u> tags coding example

01) 코딩

02) 웹페이지 

우리는 지난 20th 블로그에서 웹페이지에 표시되는 글꼴에 사용되는 다양한 태그들중  그 첫번째로 <i> 태그와 <em>태그에 대하여 공부하였습니다.

이번 21th 동영상에서는 웹페이지에 표시되는 글꼴에 사용되는 아래의 다양한 태그들중 2번쨰로 <b> 태그와 <strong>에 대하여 소개하고자 합니다.

01) <i>태그와 <em> 태그

02) <b> 태그와 <strong> 태그

03) <ins>태그와 <u> 태그

04) <sup>태그와 <sub>태그

05) <del>태그와 <s>태그

06) <small>태그와 <big> 태그  

----------

----------

1. <b> 태그와 <strong>태그란 무엇인가?

1) <b>태그

html에서 사용되는 <b>태그는 bold라는 단어의 앞글자 1개를 따온 태그로, 웹페이지의 가독성을 높이기 위해 표시되는 텍스트로 주변텍스트와 미교하여 강조하는 태그입니다. 일반적으로 굵게 텍스트를 표시합니다. 

2) <strong>태그

html에서 사용되는 <strong>태그는 웹페이지의 접근성을 높이기 위해 위해 주변 텍스트와 다른 의미를 지닌 텍스트의 범위를 지정하는 경우에 사용되는 태그입니다. 일반적으로 굵게 텍스트를 표시합니다.

2. <b> 태그와 <strong>태그 구문

<b> 태그와 <strong>태그 둘다 글씨를 굵게 표시하는 태그로 <opening> 태그와 <closing> 태그로 구성됩니다. <opening> 태그와 <closing> 태그 사이에 Text를 넣으면 텍스트가 굵게 표시됩니다.

1) <b> 태그 : <b>Text </b>

2) strong 태그 : <strong> Text </strong>

3. <b> 태그와 <strong>태그의 차이

<b>태그와 <strong> 태그 모두 굵게 텍스트를 표시하는 데 사용되지만, <b>태그는 주변 텍스트와 구별하는 데 사용되는 반면에. <strong> 태그는 주변 텍스트보다 강조해야하는 텍스트를 나타내는 데 사용됩니다.

이처럼 <b> 태그와 <i> 태그는 글자를 굵게 만들고 기울이는 등 단순히 '보여지는 변화'를 위한 태그로 html 요소의 의미를 해석할 때 이 두 태그를 일반 글자와 동일하게 여겨게 됩니다. 반면에 <strong> 태그와 <em> 태그는 '강조된 부분'으로 해석되기 때문에 스크린 리더처럼 HTML 요소의 의미를 파악하는 프로그램의 경우 <strong> 태그와 <em> 태그가 적용된 부분을 다르게 읽어줄 수 있게 됩니다.

이러한 <strong> 태그와 <em> 태그는 환경적, 신체적 조건에 관계없이 모든 사람이 웹에 접근(Access)할 수 있게 하는 웹접근성 향상을 위해 만들어진 태그라 할 수 있습니다.. 웹접근성에 대한 자세한 내용은 다음기회에 소개하도록 하겠습니다.

4. <b> 태그와 <strong>태그 의 코딩 예

1) 코딩

2) 표시되는 웹화면

우리는 지난 19th 블로그에서 단락이 바뀔 때, 주제가 바뀔 때, 분위기 전환 등 요소간의 구분을 하기 위기 위해 사용하는 <hr> 태그에 대하여 공부하였습니다.

이번 20th 동영상부터는 웹페이지에 표시되는 글꼴에 사용되는 아래와 같은 다양한 태그들을 소개하고자 합니다.

01) <i>태그와 <em> 태그

02) <strong> 태그와 <b>태그

03) <ins> 태그와 <u> 태그

04) <sup> 태그와 <sub>태그

05) del> 태그와 <s>태그

06) <smal>태그와 <big> 

오늘은 그 첫번째로 <i> 태그와 <em>태그에 대하여 소개하고자 합니다

1. <i>태그와 <em> 태그란 무엇인가

1) <i> 태그

html에서 사용되는 <i>태그는 웹페이지의 가독성을 높이기 위해 위해 주변 텍스트와 다른 의미를 지닌 텍스트의 범위를 지정하는 경우에 사용되는 태그입니다. 일반적으로 기울임꼴로 텍스트를 표시합니다.

2) <em> 태그

html에서 사용되는 <em> 태그는 emphasis라는 단어의 앞글자 2개에서 따온 태그로, 웹페이지에 표시 되는 텍스트를 주변텍스트와 미교하여 강조하는 태그입니다. 일반적으로 기울임 꼴로 표시됩니다.

2. <i>태그와 <em> 태그를 지정하는 방법

1) <i> 태그 : <i> text </i>

2) <em> 태그 : <em> <em>Emphasized text</em>

3. <i>태그와 <em> 태그 의 차이

<i>태그와 <em> 태그 모두 이탤릭체인 기울인 문자열인 텍스트를 표시하는 데 사용되는 태그이지만, <i>태그는 주변 텍스트와 구별하는 데 사용되는 반면에. <em> 태그는 주변 텍스트보다 강조해야하는 텍스트를 나타내는 데 사용됩니다. 

----------

----------

4. <i>태그와 <em> 태그 코딩 예

1) 코딩 예

2) 웹페이지에 표시된 글꼴

우리는 지난 18th 동영상에서 웹페이지의 레이아웃 구성시 들어가는 텍스트로 의미없는 문장으로 사용하는 로렘입숨(Lorem ipsum)에 대하여 배웠습니다.

이번 19th 동영상에서는 지난 18번째 동영상에서 배운 로렘입숨(Lorem ipsum)을 이용하여 단락이 바뀔 때, 주제가 바뀔 때, 분위기 전환 등 요소간의 구분을 하기 위기 위해 사용하는 <hr> 태그에 대하여 소개하고자 합니다.

1. <hr> 태그란 무엇인가

<hr> 태그는 웹페이지 전체에 수평선을 표시하는 데 사용됩니다. 주로 <hr> 태그는 단락이 바뀔 때 , 주제가 바뀔 때, 분위기 전환 등 요소간의 구분을 하기 위기 위해 사용합니다. 

<hr> 태그는 시각적인 브라우저에서는 여전히 수평으로 되지만, 이 요소는 의미적인 용어로 정의되므로 수평선에 속성을 사용하려면 적절한 CSS를 함께 사용해야합니다. 

CSS에서 hr 속성을 사용하는 방법에 대하여는 다음 기회에 소개드리겠습니다. 

----------

----------

2. <hr> 태그 지정방법

1) <hr> 태그는 열린 태그(Openning tag)로만 사용하며, 종료 태그(closing tag)가 없습니다. 태그의 내용은  018 번째 블로그에서 배운 Lorem ipsum을 이용한 단락을 가져와서 작성하였습니다.

2) <hr> 태그는 페이지의 전체 너비에 걸쳐 적용됩니다. 위에서 작성한 내용을 웹페이지에서 보게 되면,  웹페이지의 너비가 줄어들거나 늘어나더라도 해당페이지 전체에 맞는 길이로 적용됩니다.

3. <hr> 태그 속성 지정방법

 <hr> 태그는 CSS와 함께 사용하면 선의 두께, 유형 및 색상을 속성으로 지정할 수 있습니다.

CSS를 사용하기 위에서는 <head> 태그사이에 CSS를 사용하기 정보인 <link href="style.css" ref="stylesheet" type="text/type">를 입력해야 합니다. style.css파일에서 선의 두께, 타입, 색깔의 속성을 지정하면 됩니다. 

2) style.css파일에서 선의 두께, 선의 유형, 선색을 속성으로 지정한 예이며, 그 아래는 웹페이지에서 표시된 내용입니다.

① 선의 두께 3px, 선의 유형 : solid , 선색 : black

② 선의 두께 3px, 선의 유형 : solid , 선색 : black

③ 선의 두께 3px, 선의 유형 : solid , 선색 : black

우리는 지난 017th 블로그에서 속성값을 감싸주는 속성값이 작은 따옴표와 큰 따옴표(single or Double quotes)에 대하여 공부했습니다. 

이번 18th 블로그에서는 레이아웃 구성시 들어가는 텍스트로 의미없는 문장으로 사용하는 로렘입숨(Lorem ipsum)에 대하여 소개하고자 합니다.

1. 로렘입숨(Lorem ipsum)이란?

줄여서 립숨(lipsum)이라고 부르는 로렘입숨(Lorem ipsum)은 BC 1세기경 Cicero의 De Finibus Bonorum et Malorum 라틴어에서 시작되었습니다

로렘입숨은 최종 결과물에 들어가는 실제 문장 내용이 채워지기 전에 레이아웃 구성을 알아볼 수 있게 해주는 단순한 더미 텍스트(Dummy Text)로 웹개발에 있어 폰트, 레이아웃 같은 그래픽 요소나 시각적 연출을 도와줄 때 사용되는 의미없는 문장(Meaningless Sentences)이라 할 수 있습니다. 

2. 로렘입숨(Lorem ipsum)의 사용 목적

우리가 웹페이지를 통하여 폰트나 레이아웃 같은 그래픽 요소나 시각적 연출을 하게 될 때, 의미있는 내용이 있는 문장에 보는 사람에게 주의를 기울이게 되어, 포커스를 주어야 할 레이아웃에 집중력을 떨어뜨리게 되는 것이 일반적입니다.

이러한 이유로 자연스러운 텍스트로 된 의미없는 문장, 단락, 페이지 등을 만들어 내용이 들어간 문장이아닌 레이아웃에 집중할 수 있게 해주는 것이 로렘입숨(lorem ipsum) 의 목적이라 할 수 있습니다.

특히, 아직 컨텐츠가 미정일 경우나 실제 사용되는 내용을 담기에 무리가 있을 때 사용하기 유용합니다. 

----------

----------

3. 로렘입숨(Lorem ipsum) 웹페이지 찾는 방법

로렘입숨을 사용하기 위해서는 로렘입숨서비스를 제공하는 웹사이트를 이용해야 합니다. 웹사이트를 알아보기 위해서는

1) 검색사이트인 구글을 입력합니다.

2) 검색어로 loerm Ipsum을 입력합니다.

3) 서비스를 제공하는 많은 웹사이트가 있지만, 여기서는 맨상단에 표시된 Lorem lipsum 웹페이지를 선택하여 클릭합니다.

4) Lorem Ipsum 웹페이지가 나타납니다.

4. 로렘입숨(Lorem ipsum) 웹페이지 사용방법

1)  다양한 언어 선택

웹페이지의 상단에서 볼 수 있듯이 다양한 나라의 언어로 된 로렘입숨(Lorem ipsum)을 선택할 수 있습니다. 디폴트화면으로 영어로 표시된 로렘입숨을 선택할 수 있으며, 중국어로 된  로렘입숨도 선택할 수 있습니다. 필요한 나라의 언어를 선택할 수 있습니다. 

다만, 이 사이트에서는 아쉽게도 한글입숨이 제공되지 않습니다.  한글입숨을 사용하기 위해서는 네이버에 한글입숨을 검색한 후 한글입숨을 제공하는 사이트를 제공하여 사용하시면 됩니다

2) 4개의 선택유형과 1개의 옵션 선택가능

웹페이지의 하단에 있는 빨간색 네모박스를 보게 되면 paragraph, words, bytes, lists 등 4가지 유형중 하나를 선택하여 만들 수 있습니다. 

또한, 옵션으로 "Lorem ipsum dolor sit amet.."으로 시작여부를 선택할 수 있습니다. 유형을 선택한후 Generate Lorem ipsum을 클릭하시면 됩니다.

① Lorem ipsum의 유형으로 1개의 paragraph를 선택하였습니다. 필요한 단락의 개수를 1개를 선택하고, "Lorem ipsum dolor sit amet"으로 시작하는 옵션을 선택한 경우입니다.

②  Lorem ipsum의 유형으로 10개의 단어( words)를 선택하였습니다. 그리고 "Lorem ipsum dolor sit amet"으로 시작하는 옵션을 선택한 경우입니다. 

③ Lorem ipsum의 유형으로100bytes 선택하였습니다. 그리고 "Lorem ipsum dolor sit amet"으로 시작하는 옵션을 선택한 경우입니다.

④ Lorem ipsum의 유형으로3개의 Lists를 선택하였습니다. 그리고 "Lorem ipsum dolor sit amet"으로 시작하는 옵션을 선택한 경우입니다.

⑤ Lorem ipsum의 유형으로 1개의 단락(paragraph)를 선택하였습니다. 그리고 "Lorem ipsum dolor sit amet.."으로 시작하는 옵션을 선택하지 않은 경우입니다.

5. 로렘입숨 코딩 예

우리는 지난 010th 블로그에서 HTML 요소에 대한 추가적 정보를 제공하는 역할하게 되는 html 속성(Attributes)에 대하여 공부를 하였습니다.

또한, 지난 16개의 블로그 통해 <html>태그, <meta>태그, <a> 태그, <img>태그, <audio>태그, <video>태그에 대해서도 배웠습니다. 그리고  이들 태그와 함께 사용되는 lang, charset, href, src 등 태그에 대한 추가적인 정보들을 제공하는 속성(Attributes)들에 대하여도 배웠습니다.

010th 블로그에서는 우리는 html 속성에 대한 소개를 배웠습니다. html 속성을 아직 보지 않으신 분들은 010th html 속성에 대한 소개를 참고하시기 바랍니다.

오늘의  017th 블로그에서는 지난 010 번째 블로그에 언급된 속성(Attributes)에 이은 내용으로 속성값을 감싸는 '작은 따옴표'(Single Quote) 또는 "큰 따옴표"(Double Quotes)에 대하여 소개하고자합니다.

----------

----------

1. 속성이라 함은?

1) 속성은 속성이름과 속성값으로 구분합니다.

여기서, lang = "en"을 속성이라 부르고, 속성은 HTML 요소에 대한 추가적 정보를 제공하는 역할하게 됩니다.

속성 앞부분에 있는 lang을 속성이름(attribute name)으로, 그리고 속성 뒷부분에 있는 en 부분을 속성 값(attribute value) 이라고 합니다.

2) 이들 HTML 속성은 속성이름 = "속성 값"의 형태로 쌍으로 지정됩니다.

3) 속성값은 따옴표(Quotes)로 둘러싸인 형태로 지정하합니다

4) 아래의 예에서 en, utf-8, http://www.google.com, flower.jpg, bensound-ukulele.mp3 및 train_00.mp4는 속성 값입니다.

2. 따옴표로 둘러싼 속성값

1) html5에서는 속성값을 지정하는 경우에 따옴표(quote)를 요구하지 않습니다. 

 아래의 예처럼 따옴표(Quote) 없이 사용하는 경우에도 오류가 발생하지 않을 수 있습니다. 

그러나 이렇케 따옴표(Quotes)없이 속성값을 사용하는 방법은 나쁜(bad) 방법입니다.

2) 경우에 따라 반드시 quotes를 사용해야만 하는 경우가 있습니다. 따옴표(Quotes)를 사용하지 않으면 오류가 발생할 수 있습니다.

아래의 예처럼 title속성값에 공배(space)를 포함하고 있는 경우 웹화면에서 title이 제대로 표시되지 않게 됩니다.

따옴표가 없는 경우 title 인 Attribute values and quotes중 일부인 attribute만 표시되는 에러가 발생하고, 따옴표가 있는 경우는 ittle인 Attribute values and quotes 전부 표시되며 에러가 발생되지 않습니다.

그래서 오류를 사전에 방지하고 항상 속성 값을 quotes 묶어 사용하는 습관을 갖는 것이 추천할 만합니다.  특히, html5에서와는 달리 XTML에서는 더 엄격하게 따옴표(Quote) 사용을 요구하기도 합니다.

3. 작은 따옴표(single Quote)와 큰 따옴표(Double Quotes)

따옴표(Quote)에는 single Quote(작은 따옴표 : ' ')와 double Quotes(큰 따옴표: " ") 두가지로 구분할 수 있습니다.

HTML에서는 작은 따옴표와 큰 따옴표는 서로를 바꾸어 사용할 수 있습니다. 차이점은 없습니다. 

대부분 속성 값을 둘러싼 큰 따옴표를 HTML에서 가장 일반적으로 사용하지만 작은 따옴표도 사용할 수 있습니다. 

어느 방법을 사용하듯 html에 일관성이 권장되므로 하나의 방식을 정하여여, 그 방법을 일관되게 사용하는 것이 좋습니다.

4. 만약 속성값 그자체에 따옴표를 갖고 있는 경우

경우에 따라 속성 값 자체에 큰 따옴표가 들어 있으면 작은 따옴표를 사용해야합니다.

또는 그 반대의 경우인 속성 값 자체에 작은 따옴표가 들어 있으면 큰 따옴표를 사용해야 합니다.

우리는 지난 15번째 블로그로 웹브라우저에서 이미지, 오디오, 비디오를 볼 수 있게 해주는 이미지, 음악, 비디오 파일이 있는 경로(path)를 지정하는 방법에 대하여 배웠습니다

이번 16번째 블로그는 html 코딩의 이해를 돕기 위해 comments로 사용되는 <rem> 태그에 대하여 소개하고자 합니다.

1. <rem> 태그(주석태그)란 무엇인가?

Remark의 약어인 <rem> 태그는 html coding을 작성할 때 문서의 수정사항을 쉽게 하거나 혹은 태그의 설명을 보기 좋게하기 위하여 사용되는 되는 코드로, comment 태그(주석태그)라고 부르기도합니다.

이 <rem>태그는 웹 브라우저 화면에는 아무 것도 표시되지 않지만, 그러나 이 <rem> 태그를 사용하여 소스 코드를 잘 설명하여 주기 때문에 나중에 유지보수하는 경우 유용하게 활용할 수 있습니다 

----------

----------

2. <rem> 태그(주석태그) 지정하는 방법은

1) <!-- 로 시작해서 -->로 끝납니다.

2) comments는 시작태그와 종료태그의 사이에 써주시면 됩니다.

3) 여러 줄을 묶어서 한번에 주석으로 만들 수도 있습니다.

3. <rem> 태그(주석태그)를 사용하는 이유

HTML을 처음 공부하시는 분들은 주석의 필요성을 잘 느끼지 못하지만, 코딩이 길어지고 복잡해지는 실무에서는 필수라 할 수 있습니다.

1) 코딩소스가 길어지게 될수록 <rem>태그로 구역을 나누어 구분하게 되면 나중에 편집할 때 이해를 쉽게 됩니다.

2) 코딩소스에 대한 <rem>태그를 통한 설명을 통하여 어떤 의도로 소스를 작성했는지 쉽게 알 수 있습니다.

3) 여러사람이 하나의 코딩소스로 공동작업을 하는 경우에도 일관된 원칙에 따라 comments를 달아 놓으면 코딩의 효율성이 증대됩니다.

4) 임시로 코딩소스를 보이지 않게 하기 위해서도 사용합니다.

5. <rem> 태그 코딩 예

1) 코딩 예 

2) 웹화면에 표시

지난 14번째 블로그 내용으로 웹브라우저에서 동영상을 볼 수 있게 해주는 <video> 태그와 이 <video>태그와 함께 사용하는 src, controls, autoplay, loop, muted, width and height, poster 등의 속성(attributes)에 대하여 공부하였습니다.

이번 15번째 블로그 내용으로 이미지(image), 오디오(audio), 비디오(video) 파일이 있는 경로를 지정하여 웹상에서 이미지나 음악, 비디오를 볼 수 있는 Src 속성의 파일경로(file oath) 지정하는 법에 대하여 소개합니다.

1. src 속성(attribute)는 무엇인가?

우리는 <image> 태그, <audio> 태그, <video> 태그에서 공통적으로 사용된 속성이 아마도 Src 속성이었다는 것을 배웠습니다. 

Src 속성은 source란 단어에서 따온 속성으로 해당 파일이 존재하는 위치와 파일이름에 대한 정보를 지정해주는 속성으로, 이 정보가 맞는 경우에 해당 이미지나 오디오, 비디오를 웹페이지에 보여주게 됩니다.  

2. 효율적인 폴더구성은

웹페이지를 만드는 경우에 html 코딩 프로그램도 많아지고, 사용되는 이미지나 동영상, 오디오 파일 등 많은 유형의 파일들이 사용되기 때문에 .효율적인 파일관리와 원활한 코딩을 위해서는 처음부터 체계적인 폴더 구성이 필요합니디.

1) 전체 웹페이지에 구성하는 기본폴더인 01_testl 폴더를 만듭니다.

2) 기본폴더(01_html)에 파일유형별로 그 하위폴더(sub folder)를 만듭니다. 여기서는 4개의 하위폴더를 예로 들었습니다,

① html 파일을 모아 놓은 html 폴더를 만듭니다 

② 이미지 파일을 모아 놓은 images 폴더를 만듭니다,

③ 동영상 파일 등을 모아놓은 movies 폴더를 만듭니다 

④ 음악, 소리 파일을 모아놓은 music 폴더를 만듭니다,

3. Src 속성의 특징은 무엇인가

1) Opening tag(열기 태그)에서 지정합니다.

2) 주로 <img>, <audio>, <video>태그와 함께 사용합니다.

3) html이 있는 파일의 위치와 불러오는 image, audio, video 파일이 있는 위치에 따라 파일경로지정이 다르게 됩니다.

4. Src 속성에서 파일 경로 지정하는 법

여기에서는 src의 다양한 예제를 설명하기 위하여 메인 폴더로 01_test폴더를 만들었습니다. 

그리고 그 하위폴더로 2개의 폴더를 만들었습니다. 하나는 H_000.html 파일을 가지고 있는 html 폴더와 다른 하나는 train_00.mp4 파일을 가지고 있는 movies 폴더입니다

bensound-adaytoremember.mp3 파일을 가지고 있는 music폴더는 <html>의 하위폴더로 만들었습니다. images폴더는 별도로 만들지 않고 html 폴더내에서 같이 사용하게 되며 flower.jpg 파일을 가지고 있습니다.

파일경로를 지정할 때 html 파일이 기준이 됩니다, 이 html 파일과 같은 폴더내에 있는 가 또는 상위폴더나 다른폴더 또는 하위폴더에 있는 가에 지정방법이 다르게 됩니다.

1) 같은 폴더(동일폴더) 내에 해당 파일이 존재하는 경우 경로 지정

불러오는 flower.jpg 파일이 H_000.html과 함께 html 폴더에 함께 있는 경우 경로를 지정하는 방법은 < img src="파일이름" >이 됩니다.

2) 하위폴더에 해당파일이 존재하는 경우 경로 지정하는 방법

불러오는 bensound-adaytoremember.mp3 파일이 "H_000. html 파일이 하위폴더인 music 폴더에 있는 경우에 지정하는 방법은 <audio src="foldername/filename>이 됩니다.

3) 상위폴더나 다른 폴더에 해당파일이 존재하는 경우 경로 지정

불러들이는 train_00.mp4 파일이 H_000.html와 다른폴더인 movies 폴더에 있는 경우에 지정하는 방법은 <video src="../foldername/filename>이 됩니다.

5. Src 속성의 파일경로 지정하는 코딩 코딩 예

만약 불러오는 이미지, 오디오, video의 파일이름과 파일위치가 오류가 없다면 웹페이지에 이미지, 오디오, 동영상이 잘 보여집니다. 

1) 웹페이지에 보여지는 이미지

2) 웹페이지에 보여지는 오디오

3) 웹페이지에 보여지는 동영상

지난 13번째 블로그 내용으로 동영상에서 음악이나 사운드 등을 삽입하는 <audio>태그에 대한 내용을 배웠습니다. 그리고 또한 이 <audio> 태그와 함께 사용하는 src, alt, width and height, title 등 다양한 속성(attribute)에 대하여 공부하였습니다. 

이번 14번째 블로그 내용으로 웹브라우저에서 동영상을 볼 수 있게 해주는 <video> 태그와 이 <video>태그와 함께 사용하는 src, controls, autoplay, loop, muted, width and height, poster 등의 속성(attributes)에 대하여 소개하고자 합니다.

1. <video>태그란?

HTML5 이전의 동영상 등 멀티미디어를 재생할 수 있는 Video 파일은 플래시와 같은 플러그인(plug-in)이 있는 브라우저에서만 재생할 수 있었습니다. 

그러나 HTML5부터 새로 도입돤 <video> 태그는 플러그 인의 도움없이 웹페이지에서 클립이나 다른 비디오 스트림과 같은 동영상을 재생할 수 있게 해주는 태그라 할 수 있습니다.  

----------

----------

2. 브라우저에서 지원되는 video 파일 유형

HTML5에는 MP4, WebM, OGG의 3 가지 동영상 형식이 지원됩니다.

그러나 이 3개의 동영상 파일유형이 웹브라우저마다 재생할 수 있는 파일유형이 차이가 있기 때문에 각 브라우저에 맞는 파일유형으로 실행해야 합니다.

아래표는 각 브라우저에서 지원되는 동영상 파일 유형들입니다.

1) MP4 파일은 Internet Explorer, Chrome, Firefox, Safari, Opera 등 5개 브라우저에서 지원이 됩니다,

2) WebM 파일은 Chrome, Firefox, Safari, Opera 등 4개 브라우저에서 지원이 됩니다.

3) OGG 파일은 Chrome, Firefox, Opera 등 3개 브라우저에서만 지원이 됩니다.

위의 표에서 보듯이 MP4 파일이 모든 웹브라우저에서 지원되기 때문에 이 파일유형이 많이 추천되고 있습니다. 만약 웹브라우저를 지원하지 않는 동영상 파일이 있다면, 파일변환 프로그램 등을 통해서 웹브라우저 지원이 가능한 파일형태로 변환하여 올리는 것이 중요합니다.

3. <video> 태그 지정하는 법

1) <video> 태그는 opening tag와 closing 태그로 구성됩니다. : <video src=""> </video>

2) opening tag에 <video> 태그와 관련된 src, controls, autoplay, loop, muted, width and height poster 등의 속성을 입력합니다

4. <video>태그와 함께 사용하는 다양한 속성

<video> 태그와 함께 사용되는 속성으로 src, controls, autoplay, loop, width and height poster등의 속성을 속성이 있습니다. 이중에서도 src, controls, autoplay, loop, muted 속성은 <audio>태그에서도 같이 사용되며, width and height, poster 속성은 <video>태그에서만 사용됩니다,

1) source의 약자는 src 속성은 <video> 태그와 함께 사용되는 속성으로 동영상을 불러오는 파일의 위치와 파일 이름을 지정합니다. 지정하는 방법은 <video src = "file name">이 됩니다.

동영상 파일의 위치가 맞거나 오류가 없다면 웹페이지에 동영상이 보여집니다. 동영상에 대한 width와 height를 지정하지 않는 경우 윈도에 맞는 풀사이즈로 보여지게 됩니다.

동영상 파일을 불러오는 데 오류가 없다면 윈도우 창에 맞게 동영상이 웹 페이지에 표시됩니다. 동영상의 너비와 높이를 지정하지 않는 경우 이것은 전체 크기로 보입니다.

2) Controls 속성은 재생(play), 일시 중지(pause) 및 볼륨(Volume)등 동영상 재생과 관련된 컨트롤을 수행합니다. 컨트롤 속성은 하단에 표시됩니다

3) autoplay 속성은 자동으로 동영상을 실행하는 기능을 수행합니다.

4) Loop 속성은 동영상을 반복적으로 재생하는 기능을 수행합니다.

5) muted 속성은 동영상에서 재생하는 소리를 제거합니다.

6) pixcels로 표시된 동영상의 width와 height의 크기값을 설정합니다.여기에서는 width 600px로 height는 400px로 비디어 크기를 지정합니다. 

7) poster attribute는 재생 버튼을 누를 때까지 동영상에 표시할 이미지의 파일명을 지정합니다.. 이 속성은 autoplay 속성과 함께 사용하지 않는 것이 좋습니다.

5. <video>태그와 src 속성(attribute) 코딩 예

1) 코딩

2) 동영상 로드화는 대기화면 캡처 

동영상을 불러오기 전 대기화면으로 사용할 이미지지를 poster 속성으로 지정합니다. 여기에서는 train_99.jpg 파일을 지정합니다.

3) 실제 동영상 캡처 화면

실체 동영상에서는 train_00.mp4 파일로 기차가 칙칙 푹푹 소리는 아니지만, 기차소리를 내고 지나가는 동영상을 보여줍니다. 실제동영상에서는 control 박스가 보이지 않는 데, 마우스를 동영상 위에 올리게 되면 control  박스가 나타납니다.

지난 12번째 블로그 내용으로 웹문서에 image를 불러오는 <img>태그와 이 <img>태그와 관련된 src, alt, width and height, title 등 다양한 속성에 대하여 알아보았습니다. 그리고 이번 13번째 블로그 내용으로 음악과 소리를 불러오는 <audio>태그와 이 <audio>태그와 함께 사용되는 src, alt, width and height, title 등 다양한 속성(attribute)에 대하여 소개하고자 합니다

1. < audio> 태그란?

HTML5 이전의 음악 멀티미디어를 재생할 수 있는 오디오 파일은 플래시와 같은 plug-in이 있는 브라우저에서만 재생할 수 있었습니다. 그러나 HTML5부터 생긴 <audio> 태그는 plug-in의 도움없이 웹 페이지에서 음악 멀티 미디어를 재생할 수 있게 해주는 태그라 할 수 있습니다. 

----------

----------

2. Web Browser에서 지원되는 오디오 파일 유형

HTML5에는 MP3, WAV 및 OGG의 3가지 오디오 형식이 지원됩니다. 

그러나 이 3개의 오디오 파일유형이 웹브라우저마다 재생할 수 있는 파일유형에 차이가 있기 때문에 오디오 파일을 재생하기 위햇허는 각 웹브라우저에 맞는 파일유형으로 실행해야 합니다.

아래표는 각 웹브라우저에서 지원되는 오디오 파일 유형들입니다.

1) MP3 파일은 Internet Explorer, Chrome, Firefox, Safari, Opera 등 5개 브라우저 모등에서 지원이 되며,

2) WAV파일은 Chrome, Firefox, Safari, Opera 등 4개 브라우저에서 지원이 됩니다.

3) OGG 파일은 Chrome, Firefox, Opera 등 3개 브라우저에서만 지원이 됩니다.

위의 표에서 보듯이 MP3 파일은 모든 웹브라우저에서 지원되기 때문에 이 파일유형이 많이 추천되고 있습니다. 만약 웹브라우저를 지원하지 않는 오디오 파일이 있다면, 파일변환 프로그램 등을 통해서 웹브라우저 지원이 가능한 파일형태로 변환하여 올리는 것이 중요합니다.

3. <audio> 태그 지정방법