HTML5 (Hyper Text Markup Language)이란?

월드와이드웹(World Wide Web)을 통해 제공되는 정보를 나타낼 목적으로 사용되는 마크업 언어이며 차세대 웹 표준으로 확정된 HTML의 5번째 버전을 의미한다.
기존의 웹 문서에서는 HTML 만으로 웹 서비스를 구성하는 것이 불가능했지만 HTML5로 넘어오면서 클라이언트와 서버와의 통신이 가능하며
이에 대한 부가 기능을 제공함으로써 다른 외부 Active-x와 같은 플러그인을 사용하지 않고도 웹 서비스를 제공할 수 있을 정도로 많은 기능이 추가되었다.

[ HTML 발전의 순서? ]

[ HTML5의 등장? ] : HTML은 왜 각광받기 시작했는가

과거 HTML은 순수한 HTML만으로 표현이 불가능하였기 때문에 플래쉬, Active-x등의 플러그인(외부 기술)에 의존하였다.
따라서 웹의 접근성은 현저히 떨어졌고, 플러그인 기술에서 웹을 해방시키고 접근성과 상호운영성을 높이기 위하여 HTML이 등장하였다.
발전 된 HTML5는 CSS3, Javascript API를 통한 기능의 확장, 결합을 통해 기존의 Markup language이상의 의미를 가지게 되었다.

폭발적인 관심을 불러일으킨 사건은 플래시(Flach)와 관련된 스티브 잡스의 발언이 출발이었다. (= 폐쇄성, 보안, 배터리 수명, 터치 인터페이스의 고려, 혁신 기술을 사용.. 등)

 

[ HTML5 디자인 원칙 ]

  1. 호환성

    1. 콘텐츠의 호환성 HTML5 이전 버전으로 제작한 콘텐츠가 완벽히 정상 작동은 아니지만 문제 없이 이용 가능 해야한다.
    2. 이전 브라우저와의 호환성 HTML5가 지원되지 않는 이전 브라우저에서도 이용 가능 해야한다.
    3. 기능의 재사용 서로 다른 브라우저에서 구현해 놓은 기능들을 HTML5 아래 공통의 사양으로 책정하여 이용 가능 해야 한다.
    4. 이용 방법의 호환성 HTML Tag 사용법을 그대로 사용할 수 있게 한다.
    5. 혁신보다는 발전을 우선함 새로운 Markup language를 구현하기 보다 기존의 존재하던 HTML을 개량해야 한다.

  2. 실용성

    W3C에서 말하는 이상적인 마크업보다 현장에서 필요로 하는 것들을 중점적으로 진행해야 한다.

  3. 상호 운영성

    HTML5를 적용한 브라우저라면 동일하게 동작해야 한다.

  4. 보편적 접근성

    콘텐츠 소비하는 기계(Divice, Search Engine), 모든 사람(장애인 포함)이 접근할 수 있어야 한다.

[ HTML4 VS HTML5 ]

  • HTML5 이전에는 p, div, h (Block Level Element) 와 img, input (Inline Element) 두 종류의 태그를 사용하여 레이아웃을 표현하였다.
    Tree 형태의 계층 구조로 구성되었으며 그 구조에 따라 콘텐츠에 접근할 수 있었다.
  • HTML5은 다양한 Element들이 추가 되었고, Sementic한 웹이 되었으며 header, footer, aside등.. 구성에 따라 접근이 가능한 구조로 변형 되었다.

HTML5 시맨틱태그

컴퓨터가 정보를 이해하고, 논리적인 추론까지 가능한 구조를 만들기 위해 추가된 태그.
기존에는 Block Level Element에 네이밍을 하여 레이아웃을 구현하였는데 HTML5는 태그 자체로 구현 할 수 있다.

 

구문차이

  • Tag 이름 대 소문자를 가리지 않는다.

  • DOCTYPE이 간결해졌다.

    HTML4.01 Strict http://www.w3.org/TR/html4/strict.dtd">
    HTML5 <!DOCTYPE html>

  • Encoding이 간결해졌다.

    HTML <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    HTML5 <meta charset="UTF-8">

  • SVG, MathML

    그래픽 구현이 가능하다. 2차원 벡터 그래픽 = SVG태그 2차원 래스터 그래픽 = 자바 스크립트 캔버스 3차원 그래픽 = CSS3, WebGL

다양한 Element, Attribute의 변화

  • 시맨틱 태그 추가

  •  

    heager, footer, nav, section, article, aside, hgroup, figure, figcaptio…..

     

     

 

  • Header 문서의 Header 를 나타낼 때
    Footer 문서의 Footer 를 나타낼 때
    Nav 문서내에 Navigation 요소가 있을 때
    Section 문서의 영역을 구성, 문서 구조를 구성하는 H1~H6 와 함께 사용
    Article 뉴스기사나 블로그 article 과 같은 독립된 Contents 를 표시할 때 사용
    Aside 주요 컨텐츠 이외의 참고가 될 수 있는 컨텐츠를 구성할때 사용
    Figure 그림, 비디오와 같은 포함된 컨텐츠의 Caption 을 표시할때 사용
    Figcaption 캡션에 사용

    그 밖에 Audio, Video, Embed, Mark, Progress, Meter, Time,... 등등의 Element 그 밖에 data-*, role, area-* 등등의 Attribute....

API

  • Video, Autio API 비디오 오디오 재생 시 사용
  • Offline Web Application offline을 지원하는 api
  • Drag & Drop API draggable 속성과 함께 사용하는 API

그 외에도 많다.

 

[ HTML5 이전 브라우저에서 시맨틱 태그 사용 방법 ]

Script

document.createElement('header');
document.createElement('footer');
document.createElement('nav');
document.createElement('section');
document.createElement('article');

Style


header, footer, nav, section, article{ display:block; }

하위 브라우저에서 HTML5 사용하기

 

참고

http://www.jopenbusiness.com/mediawiki/index.php/HTML5#HTML5_.ED.91.9C.EC.A4.80.ED.99.94_.EC.9D.BC.EC.A0.95

저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

사파리 브라우저에서 border-radius에 overflow:hidden 적용 안되는 이슈, 버그(?)  (0) 2019.06.15
아이프레임(iframe)이란?  (0) 2019.06.05
조건부 주석(Conditional comments)  (0) 2019.06.05
CSS3 란 (Cascading Style Sheets)  (0) 2019.06.05
<video>태그 브라우저, 모바일 이슈 정리 사항  (0) 2019.05.16
CSS3 Selector :nth-child(n+n)를 알아보자  (0) 2018.10.26
html 기본 구조  (0) 2018.10.23
html만으로 아코디언 메뉴 만들기(details와 summary태그)  (0) 2018.10.23

<video>태그 브라우저, 모바일 이슈 정리 사항

몇 주 전쯤에 <iframe>으로 작업하던 것들을 웹 앱 이슈상 <video>태그로 변경하는 작업을 하였다.

이 작업의 이유는 회사 정책의 문제였다.

 

+) 비디오 태그로 변경을 하면서 진행했던 부분은 자동재생이었다.

하지만 몇가지 이슈가 있었다.

 

이슈

1. autoplay를 걸었음에도 안된다.

2. 아이폰에서 전체화면이 된다. 

+) 같은 os 버전임에도 아이폰8은 전체화면으로 넘어갔고, 아이폰10은 정상적으로 inline 노출이 되었다.

3. ie8 안됨

 

<video> 태그 자동 재생 이슈

- 대부분의 브라우저에서 <video>의 자동재생을 원한다면 음소거(muted)속성을 필수로 추가하여야 한다.

(크롬도 작년 6월부터 브라우저 정책이 바뀌었다고 한다)

참고

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

https://lifehacker.com/mute-most-autoplay-videos-with-the-latest-chrome-update-1825354497

 

자동 재생이 가능한 경우는

1. 같은 도메인에서 이벤트가 발생한 경우(클릭, 페이지이동)

- 위와 같은 방법때문에 작년에 변경되었음에도 이제 이슈가 발견되었다.

2. 비디오 내에 오디오 트랙이 없을 경우.

http://iropke.com/archive/video-autoplay.html

여기 블로거분이 테스트한 경우를 보면 파일 자체에 오디오 정보가 없어야한다!(소리가 녹음이 안된거랑은 다른 개념)

3. muted 속성을 적용했을 경우

4. iphone에서 playsinline 요소를 추가하였을 경우 (webkit 접두어를 추가하여 webkit-playsinline으로 추가하여 사용했었으나 최근 HTML 사양에 추가되어 접두사 없이도 사용가능하다.)

5. 모바일일 때 해당 사이트를 홈 스크린에 즐겨찾기 한 경우

6. 부모 Frame이 권한을 부여하여 자식 Frame에서 비디오를 실행했을 경우 (?)

참고

https://medium.com/@idchoi2/html5-video-%ED%83%9C%EA%B7%B8-%EC%9E%90%EB%8F%99%EC%9E%AC%EC%83%9D-%EC%9D%B4%EC%8A%88-f97e5d397516

 

결론적으로 우리가 <video>태그 사용할 때 자동 재생을 원한다면 필수로 넣어야하는 속성 3가지이다.

autoplay muted playsinline

 

- pc 브라우저, 안드로이드는 autoplay, muted 속성만 추가하여도 자동 재생이 가능하다.

- 아이폰은 IOS10버전 이후부터 playsinline 속성을 추가 적용해주어야한다.

(아이폰8에서는 IOS12.2 버전으로 테스트 한 결과 전체화면으로 자동재생 되었으나 업데이트 문서에 IOS10 이후부터 적용 되었다고 작성되어있다)

참고 

https://medium.com/code-divoire/autoplaying-inline-videos-on-iphone-ios-10-using-angular-d4e2eaba2164

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-playsinline

 

★★★추가로 아이폰 저전력모드일때 위의 속성을 넣었음에도 자동재생이 안된다고 한다.★★★

 

하위브라우저 이슈 (HTML5 태그라서 ie8이하는 지원이 안됩니다.)

- 포스터 이미지와 안내 문구를 삽입해 주어야 한다.

ie8이하에서는 source가 렌더링되지 않기 때문에 이미지나 텍스트가 나오게 할 수 있다.

아래 처럼 비디오 태그 내부에 넣어주면 된다.

// HTML

<video>
  <source src="비디오 링크" type="비디오 타입">
  <img src="이미지 링크">
  <p>브라우저 버전이 낮다</p>
</video>

혹은 별도로 주석문을 달아준다.

// HTML

<!--[if lte IE8]>
    <p>브라우저 버전이 낮다</p>
<![endif]-->

 

미디어쿼리

비디오 인라인 css

// HTML
<style>
  #either-gif-or-video video { display: none; }
  
  @media (-webkit-video-playable-inline) {
      #either-gif-or-video img { display: none; }
      #either-gif-or-video video { display: initial; }
  }
</style>

<div id="either-gif-or-video">
  <video src="image.mp4" autoplay loop muted playsinline></video>
  <img src="image.gif">
</div>

참고

https://webkit.org/blog/6784/new-video-policies-for-ios/

 

++++ 0406 추가

코드펜에 테스트하신 분이 있어서 링크를 달아둔다.

https://codepen.io/alfmos/pen/VwwqQje

 

++++ 추가 이슈

애플 기기에서(아이폰, 맥..) 비디오 객체는 HTML에 넣은 후에 동적으로 비디오 태그의 링크만 바꿔치기 할때,

애플에 내장된 비디오 버튼에 대한 이슈가 발생했다.

 

정확히 발생한 내역은 버튼 클릭 시 해당 버튼에 삽입된 링크의 값이 비디오 태그의 src에 박히는 것이었는데,

이때 사용자가 첫번째 비디오를 재생하다가 다른 버튼을 눌러 두번째 비디오가 로드되었을 때

애플 내장 비디오의 컨트롤바의 버튼이 여전히 재생되어있음으로 되어있는 것이었다, 재렌더링을 안하는 듯 싶었다.

안드로이드는 링크가 변경되고 .load()를 시킬때 마다 내장 비디오의 컨트롤바까지 재렌더링을 하는 듯 싶어 이 이슈는 발생하지 않았다.

(재렌더링 하냐 안하냐의 문제가 아닐수도 있다.)

 

사용자가 처음 재생을 누른 상태

 

다른 비디오 src를 삽입하고 재로드 시켰음에도 여전히 재생하는 듯 보인다.

그냥 개발 방식을 바꿔서 작업하느라 이슈에 대한 사항은 넘어가기로했다.

 

 

저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

아이프레임(iframe)이란?  (0) 2019.06.05
조건부 주석(Conditional comments)  (0) 2019.06.05
CSS3 란 (Cascading Style Sheets)  (0) 2019.06.05
HTML5 란?  (0) 2019.06.05
CSS3 Selector :nth-child(n+n)를 알아보자  (0) 2018.10.26
html 기본 구조  (0) 2018.10.23
html만으로 아코디언 메뉴 만들기(details와 summary태그)  (0) 2018.10.23
HTML 특수 문자 처리 (엔티티 테이블)  (0) 2018.10.23


CSS3 Selector :nth-child(n+n)를 알아보자

작업 중에 nth-child(n + 1) 이런 태그를 봤다.
셀렉터는 자주 쓰던 것만 써서 봤다가도 까먹고는 하는데, 이번엔 까먹지 말아야지.

:nth-child(1n+1);
배수로 선택하기

예시를 봐보자

HTML
<p class="box">box1</p>
<p class="box">box2</p>
<p class="box">box3</p>
<p class="box">box4</p>
<p class="box">box5</p>
<p class="box">box6</p>
<p class="box">box7</p>

<p class="box">box8</p>
<p class="box">box9</p>
<p class="box">box10</p>
<p class="box">box11</p>
<p class="box">box12</p>
<p class="box">box13</p>
<p class="box">box14</p>

CSS
p{ margin:0; padding:0; }
.box{
  width:100px;
  height:100px;
  float:left;
  border:1px solid #ccc;
  border-left:0;
  box-sizing:border;
  color:#ccc;
}
.box:first-child{
  border-left:1px solid #ccc;
}

.box:nth-child(7n+1){ background-color: red; clear:both; }
.box:nth-child(7n+2){ background-color: orange; }
.box:nth-child(7n+3){ background-color: yellow; }
.box:nth-child(7n+4){ background-color: green; }
.box:nth-child(7n+5){ background-color: blue; }
.box:nth-child(7n+6){ background-color: navy; }
.box:nth-child(7n+7){ background-color: purple; }

nth-child 를 알아보기 위함이니 nth-child 부분을 보면 nth-child(7n+1)이 있을 것이다.
7n + 1 = 7의 배수 + 1번째 선택
즉 1번 박스 부터 7번 박스 까지 빨주노초파남보 색상이 되고, 8번 박스 부터 14번 박스까지 다시 빨주노초파남보가 된다.
계속적으로 반복된다.
1~7번 빨~보
8~14번 빨~보
15~21번 빨~보

[예제]

See the Pen nth-child(n+n) example by leeyoonseo (@okayoon) on CodePen.




저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

조건부 주석(Conditional comments)  (0) 2019.06.05
CSS3 란 (Cascading Style Sheets)  (0) 2019.06.05
HTML5 란?  (0) 2019.06.05
<video>태그 브라우저, 모바일 이슈 정리 사항  (0) 2019.05.16
html 기본 구조  (0) 2018.10.23
html만으로 아코디언 메뉴 만들기(details와 summary태그)  (0) 2018.10.23
HTML 특수 문자 처리 (엔티티 테이블)  (0) 2018.10.23
CSS animate 가위바위보 연속 움직이는 애니메이션 만들기  (0) 2018.10.17


html 기본 구조


필요할 때, 자꾸 검색해서 찾아야 해서 간단한 구조 작성해둔다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta http-equiv="Content-Type" charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">
    <title>Page Title</title>
  </head>
  <body>
    <h1>타이틀</h1>
    <p>본문</p>
  </body>
</html>

<meta http-equiv="Content-Type" charset="utf-8" /> 해당 문서 언어 설정

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> 렌더링 모드 설정 (최신 렌더링 모드로 강제)

<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"> 뷰포트 설정(모바일 접속 시 모바일 맞춤)

저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

CSS3 란 (Cascading Style Sheets)  (0) 2019.06.05
HTML5 란?  (0) 2019.06.05
<video>태그 브라우저, 모바일 이슈 정리 사항  (0) 2019.05.16
CSS3 Selector :nth-child(n+n)를 알아보자  (0) 2018.10.26
html만으로 아코디언 메뉴 만들기(details와 summary태그)  (0) 2018.10.23
HTML 특수 문자 처리 (엔티티 테이블)  (0) 2018.10.23
CSS animate 가위바위보 연속 움직이는 애니메이션 만들기  (0) 2018.10.17
유튜브 영상 너비(width)값에 맞추어 높이(height)값 비율 맞추기  (1) 2018.10.02

+ Recent posts

티스토리툴바