진화된 HTML5 이해(1)

HTML(HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어이다. 다시 말하면 웹페이지의 Content(내용)와 Structure(구조)를 담당하는 언어로써 HTML 태그를 통해 정보를 구조화한다.

- 추가된 기능

Multimedia : 플래시와 같은 플러그인의 도움없이 비디오 및 오디오 기능을 자체 지원

Graphic & Effects : SVG, 캔버스를 사용한 2차원 그래픽과 CSS3, WebGL을 사용한 3차원 그래픽을 지원

Connectivity : 이전의 HTML은 단방향 통신만이 가능하였다면 HTML5는 서버와의 소켓 통신을 지원, 양방향 통신가능

Device acess : 카메라, 동작센서 등의 하드웨어 기능을 직접적으로 제어할 수 있음

Offline & Storage : 오프라인 상태에서도 애플리케이션을 동작시킬 수 있다. 이는 HTML5가 플랫폼으로 사용될 수 있음을 의미

CSS3 : CSS3을 완벽 지원

Semantics : HTML 요소의 의미를 명확히 설명하는 시맨틱 태그를 도입하여 브라우저, 검색엔진, 개발자 모두에게 컨텐츠의 의미를 명확히 설명할 수 있음

요소 성격의 구분 Content Model

기존 HTML에는 없었던 컨텐츠 모델은 HTML의 각 요소가 어떠한 성격과 역할을 하는지에 대한 그룹을 분류한 것

1. Flow Group

웹페이지상에 직접 표시되지 않는 일부 메타데이터를 제외하고 거의 모든 요소들이 Flow Group에 속함

2. Heading Group

기존의 <h1>,<h2>,<h3>,<h4>,<h5>,<h6>와 새롭게 추가된 <hgroup>이 있음. <hgroup>의 컨텐츠 요소로는 <h1>부터 <h6>까지의 요소만 포함

3. Sectioning Group

HTML5에 추가된 요소들 <article>,<aside>,<nav>,<section>이 속하며, 컨텐츠 요소들을 그룹화하는 데 있어 <div> 요소와 비교되지만, Sectioning Group에 태그들은 <div> 요소와는 직접적인 연관성은 없으며, 오히려 Heading Group(<h1,<h2>,<h3>,<h4>,<h5>,<h6>,<hgroup>)과 함께 정보 구조를 구성하는 역할을 하므로 더 긴밀한 연관성이 있다고 보아야 할 것

4. Phrasing Group

Phrasing Group은 다른 요소를 컨텐츠로 포함하지 않는 요소들로 <em>,<span>,<strong>과 같이 text 요소를 직접 표시하거나 <img>,<input>과 같이 대체되는 요소에 속하게 된다. 다른 요소를 그룹화하는 Sectioning Group에 속하는 요소들과 <div>,<p>는 Phrasing Group에 속하지 않는다. 또한 <a>와 같은 몇몇 요소들은 컨텐츠로 다른 요소를 포함하지 않는 등의 조건부로 Phrasing Group이 될 수 있다.

5. Embedded Group

<img>,<iframe>,<video>,<canvas> 등 외부 자원을 웹페이지에 포함하는 요소들, HTML 요소가 아닌 다른 언어로 표시된 SVG와 같은 요소도 Embedded Group에 속한다.

6. Interactive Group

사용자와 상호작용을 한는 <a>,<button>,<textarea>등의 요소들, 기본적으로 Interactive Group에 속하는 <input> 요소가 type 속성이 hidden으로 지정될 경우, 사용자가 조작할 수 없게 되므로 Interactive Group에 포함되지 않는다. 반대로 Embedded Group에 속하는 <img>의 경우 usemap 속성이 적용되어 사용자의 조작에 반응하게 되면 Interactive Group에도 속하게 된다.

7. Metadata Group

웹브라우저상에 표시되지 않는 <meta>,<title>,<link>등과 같은 메타 정보를 제공하는 요소들

HTML5의 DOCTYPE

DOCTYPE은 웹페이지가 어떤 문서 규격으로 작성되었는지를 알려주는 역할을 한다.

예 : XHTML 1.0 Transitional DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

예 : HTML4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

예 : HTML5 DOCTYPE

<!DOCTYPE html>

HTML5의 공통 속성

모든 태그에 공통적으로 사용될 수 있는 속성들이 다수 추가, 새로 추가된 속성들은 주로 웹 애플리케이션을 위한 것들

1. contenteditable

이 속성은 지정된 요소를 편집할 수 있도록 하는 공통 속성, 일반적으로 편집할 수 있는 요소가 아닌 <p>와 같은 요소도 contenteditable 속성으로 지정되면 편집할 수 있는 요소가 된다. 편집만 가능하게 하는 속성으로 사용자가 변경한 내용을 처리하기 위해서는 별도의 기능을 자바스크립트와 서버 측 프로그램을 통하여 구현해야 함

<h2>Example</h2>
<div>
	<h3>일반적인 p 요소</h3>
	<p>일반적인 요소로 작성됨</p>
	<h3>contenteditable이 적용된 p 요소</h3>
	<p contenteditable="true">contenteditable 속성이 'true'로 작성</p>
</div>

2. hidden

HTML의 어떤 요소를 화면상에서 숨기기 위해서 CSS의 display 나 visibility 속성을 이용했으나, CSS는 어디까지나 표현되는 형태를 달리하는 것이며, html의 정보 구조를 변경하는 것은 아니다. 이에 비해 hidden 속성은 지정된 요소를 html 정보 구조 내에서 완전히 제거한 것과 동일한 효과를 갖는 속성이므로 CSS를 이용한는 것과 그 성격이 다르다고 할 수 있다.

<h2>Example</h2>
<div>
    <h3>일반</h3>
    <div>
    	<p>일반적인 요소로 작성</p>
    </div>
    <h3>hidden='hidden'</h3>
    <div>
    	<p hidden="hidden">hidden 속성</p>
    </div>
</div>

3. contextmenu

마우스 오른쪽 버튼을 클릭하면 나타나는 단축 메뉴와 같은 기능을 작성하기 위한 속성으로 contextmenu 속성이 지정된 요소에서 마우스 오른쪽 버튼을 클릭하면 속성에 지정된 id를 가진 메뉴를 구성하는 <menu> 요소가 표시된다.

<h2>Example</h2>
<div id="sub">
    <p contextmenu="testContextmenu">이 p 요소에는 contextmenu 속성이 적용 되었음</p>
    <menu type="contextmenu" id="testContextmenu">
    	<command label="첫번째 메뉴" />
        <command label="두번재 메뉴" />
        <command label="세번째 메뉴" />
    </menu>
</div>

4. draggable

단지 웹브라우 화면 안에서 드래그하는 것이 아니라 웹브라우저 외부로 드래그하여 다른 응용 프로그램이나 바탕화면에 드롭할 수 있도록 하는 기능

<h1>Example</h1>
<div id="sub">
    <h3>draggable='true'</h3>
    <div>
    	<img src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png" alt="다음" draggable="true" />
        <a href="http://www.daum.net">DAUM</a>
    </div>
    <h3>draggable='false'</h3>
    <div>
    	<img src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png" alt="다음" draggable="false" />
        <a href="http://www.daum.net">DAUM</a>
    </div>
</div>

5. spellcheck

서식 요소나 contenteditable 속성를 사용하여 편집 가능한 상태의 요소를 편집할 때 맞춤법 검사를 하도록 하는 속성

<h1>example</h1>
<div id="sub">
    <h3>spellcheck='true'</h3>
    <div>
    	<textarea spellcheck="true"></textarea>
    </div>
    <h3>spellcheck='false'</h3>
    <div>
    	<textarea spellcheck="false"></textarea>
    <div>
</div>

6. data-*

사용자가 정의한 데이터를 속성값으로 지정할 수 있다. 임의적인 속성의 사용은 자바스크립트 등의 사용자측 프로그래밍에서 매우 유용할 수는 있지만 기존의 html에서는 원칙적으로 허용되지 않는 속성이므로, html 유효성 검사를 통과할 수 없는 등의 문제가 있었다. html5에서는 웹 개발자가 필요에 의해 지정하는 속성을 data-라는 접두사를 붙여 사용할 수 있으며, 자바스크립트에서 dataset이라는 객체를 사용하여 지정된 속성값을 읽어올 수 있게 되었다.

<!--javascript 부분 -->
<script type="text/javascript">
	function dataTest(btn){
    	try{
            var btnData=btn.dataSet['test'];
            alert('[data-*] 속성으로 출력 \n'+btnData);
        }
        catch (e){
            var btnData=btn.getAttribute('data-test');
            alert('[getAttribute] 속성으로 출력\n'+btnData);
        }
    }
</script>


<!--HTML 부분-->
<h2>Example</h2>
<div id="exampleSub">
    <h3>data-*</h3>
    <div>
    	<button type="button" data-test="사용자 정의 데이터" onclick="dataTest(this)"> 테스트 버튼1 </button>
        <button type="button" data-test="HTML5는 요소에 사용자 정의 임의 속성을 지정하는 data-* 속성이 추가 되었습니다." onclick="dataTest(this)"> 테스트 버튼2 </button>
    </div>
</div>

예제 코드에는 두개의 <button> 요소가 있고, 각 요소에는 서로 다른 값의 data-test 속성이 지정되어 있다. 버튼을 클릭했을 때 data-test 속성값을 출력하기 위한 자바스크립트 함수 dataTest를 호출하고 매개 변수로 클릭된 <button> 요소를 넘겨 준다. dataTest는 data-test 속성값을 알림창으로 출력하기 위한 자바스크립트 함수로 두 부분으로 이루어져 있다. 먼저 웹브라우가 dataset 객체를 지원하는 경우는 dataset 객체를 이용하여 알림창을 표시, 이때는 html 에 지정된 임의 속성 이름에서 'data-' 접두어를 뺀 나머지 부분인 test를 dataset 객체의 키로 지정한다.

두번째 부분은 아직 dataset 객체를 지원하지 않는 웹브라우저를 위한 부분으로, 지정된 속성값을 읽어오는 'getAttribut([속성이름])'을 이용하여 알림창을 표시하는 부분, 이 경우 웹브라우저가 dataset 객체를 인식하지 못하는 경우이므로, 이전의 방식대로 'data-' 접두어를 포함하여 속성 이름 전체를 써 주어야 한다.

7. role-ARIA 속성을 지정

ARIA는 Web Accessibility Initiative에 독립적인 표준으로 작성한 Accessible Rich Internet Applications의 약자이다. 즉 ARIA는 웹 애플리케이션의 접근성을 높이기 위한 방안이다. 기존의 html은 구성된 요소가 페이지 내에서 어떤 역할을 하는지 명확하게 알 수 있는 방법이 없었다. ARIA에서는 이러한 문제점을 해결하기 위해 role이라는 속성으로 해당 요소가 페이지 내에서 어떤 역할을 하는지에 대한 정보를 제공한다.

<ul role="menu">
    <li role="menuitem">New</li>
    <li role="menuitem">Open</li>
</ul>

예제에서 <ul> 요소의 role 속성은 menu로 지정되어 있기 때문에 <ul> 리스트 요소가 메뉴의 역할을 하고 있음을 알려주고 있다. 또한 각 <li> 요소에는 menuitem이라는 role 속성값으로 <li>가 메뉴의 항목임을 표시한다. 그러나 html5에서는 메뉴나 네비게이션 영역을 <nav> 요소로 명시적으로 구조화할 수 있으므로, 위와같은 경우의 role 요소는 불필요한 것일 수 있다. 이 밖에도 ARIA에는 문서의 헤딩이나 메인 영역 네비게이션들을 지정하는 속성값들을 정의하고 있다. 앞서 예시에서와 같이 페이지의 구조를 나타내는 속성값들은 html5의 구조용 태그와 중복되는 성격도 있으므로, html5와 ARIA 속성을 함께 사용할 때는 중복되는 성격에 주의하여 사용해야 한다.

8. itemscope

해당 영역의 정보의 종류와 그 값을 기계적으로 파악할수 있도록 시맨틱 정보 영역임을 나타내는 속성이다. 일반적으로 html 안에 있는 컨텐츠가 무엇을 뜻하는지는 사람이 직접 파악해야 한다. ht;ml의 구조가 아닌 컨텐츠 정보를 기계적으로 파악하기 위한 비교적 특정한 형식의 연락처 정보나 일정 정보의 규칙을 정의한 마이크로 포맷이라는 규격이 있다. html4 기반에서는 class 속성값을 마이크로 포맷에서 지정한 특정한 값을 사용하여 정보를 추가 하였지만 html5에선 마이크로 포맷을 별도의 속성으로 지원하게 되었다.

- itemscope : 마이크로 데이터 영역의 지정

- itemtype : 마이크로 데이터의 형식 지정

- itemprop : 마이크로 데이터 프로퍼티 작성

- itemref : 마이크로 데이터 프로퍼티가 속하는 영역의 지정

<h1>마이크로 데이터를 이용한 시맨틱 마크업</h1>
<div id="microDataDiv" itemscope="itemscope" itemtype="http://microformats.org/profile/hcalendar">
    <h4>회의 안내</h4>
    <p>안녕하세요.
    운영회의 안내입니다. 안건은 <em itemprop="summary">팀 사이트의 html5 적용에 관한 의견 교환</em>이며 일시와 장소는 <span itemprop="location">OO회의실</span>에서
    <time datetime="2020-08-17T13:00" itemprop="dtstart">8월17일 목요일 오후1시</time>입니다.
    </p>
</div>

회의 소집을 알리는 웹사이트의 일부이다. 컨텐츠의 내용을 보면 간단한 회의 안건과 일시, 장소이지만 사람이 아닌 기계가 이 내용을 읽어 이를 구분해 낼 수는 없다. 하지만 마이크로 데이터와 관련된 속성을 지정함으로써 문장 내에서 일정 정보를 기계적으로 추출해 낼수는 있다. id 속성값이 microDataDiv인 <div> 요소에 itemscope 속성을 지정하여 해당 <div>가 마이크로 데이터 영역임을 지정한다. itemtype 속성은 마이크로 데이터 영역의 형식을 지정하는 속성으로 일정 정보를 작성하는 규칙인 hCalendar를 지정 하였으며, 마이크로 데이터 영역의 컨텐츠에 itemprop 속성을 각 부분에 지정함으로써 컨텐츠 내용이 가진 일정 정보를 기계적으로 추출해 낼 수 있다.

[세상살이] - 엣지 브라우저 확장 기능으로 마우스 우클릭 해제

엣지 브라우저 확장 기능으로 마우스 우클릭 해제

엣지 (Edge) 확장 기능으로 마우스 우클릭 해제 엣지(Edge) 브라우저로 웹서핑 시 마우스 오른쪽 버튼을 사용하지 못하게 하여, 드래그나 복사가 되지 않게 막아 놓은 기능을 엣지(Edge) 브라우저 확

smarti.tistory.com

[세상살이] - 바둑에 담긴 지혜

바둑에 담긴 지혜

바둑에 담긴 지혜 위기십결(圍棋十訣) 당나라 현종은 '기대조(棋待詔)'라는 벼슬을 두었는데, 이는 바둑의 최고수에게 헌정되는 자리였다. 당시 기대조였던 당나라의 바둑 고수 왕적신(王積薪)

smarti.tistory.com

[세상살이] - 색으로 대표되는 컬러푸드 - Yellow (옐로우푸드)

색으로 대표되는 컬러푸드 - Yellow (옐로우푸드)

옐로우푸드 - 노화, 암세포 생성 억제 늙은 호박, 노랑 파프리카, 유자, 파인애플, 망고, 고구마, 당근, 밤, 호박, 파파야, 귤, 오렌지, 감, 살구, 황도 등에는 노화와 암세포 생성을 억제하는 베타

smarti.tistory.com

[코딩공부] - HTML5 멀티미디어

HTML5 멀티미디어

멀티미디어 파일 형식 HTML5에서는 플래시와 같은 외부 플러그인의 도움 없이도 멀티미디어 파일을 간단히 사용할 수 있게 되었다. 웹 브라우저는 파일의 타입(type)을 파일의 확장자

smarti.tistory.com

[세상살이] - 구글 메시지를 이용, PC에서 문자 보내기

구글 메시지를 이용, PC에서 문자 보내기

Google 메세지 이용, 내 PC에서 문자 보내기 휴대폰에서 문자를 보낼 때 작은 화면으로 문자를 보낼때 타자속도도 느리고 오타도 많이 발생한다. 장문의 문자를 보낼때는 특히 더 할텐데 내 책상에

smarti.tistory.com

'코딩공부' 카테고리의 다른 글

HTML 기본요소 2, link(링크), image(이미지) (0)	2020.09.29
HTML 기본요소 1, meta tag(메타태그), color(색), background(배경) (0)	2020.09.29
HTML 공간 분할(layout, iframe, block & inline) (0)	2020.09.28
HTML5의 요소 (0)	2020.09.10
MySQL 8.0.21 다운로드 및 설치하기, 윈도우10 (0)	2020.09.08
PHP 7.4 다운로드 및 설치하기, 윈도우10 (0)	2020.09.08
아파치(Apache 2.4.46) 웹서버 설치하기, 윈도우10 (0)	2020.09.08
Sublime Text 3 다운로드 설치 및 플러그인, 윈도우10 (0)	2020.09.05

Smart-i

진화된 HTML5 이해(1)

요소 성격의 구분 Content Model

1. Flow Group

2. Heading Group

3. Sectioning Group

4. Phrasing Group

5. Embedded Group

6. Interactive Group

7. Metadata Group

HTML5의 DOCTYPE

HTML5의 공통 속성

1. contenteditable

2. hidden

3. contextmenu

4. draggable

5. spellcheck

6. data-*

7. role-ARIA 속성을 지정

8. itemscope

'코딩공부' 카테고리의 다른 글

관련글

댓글

티스토리툴바