Interactive, User Interaction, Metadata

인터랙티브(Interactive) 태그들

Interactive 태그는 사용자와 상호 작용하는(대화 가능한) 태그를 말한다.

 

details element

details 태그는 디스클로저 위젯(disclosure widget)으로 정보를 감추거나 펼쳐서 보여준다. 모든 정보를 일시에 공개하지 않고 사용자의 요구에 맞춰 공개할 수 있기 때문에 화면의 복잡함을 줄이는 목적으로 사용할 수 있다. 아코디언(Accordion) 컴포넌트와 비슷하게 작동하며, 참고로 각주(footnote)에는 적합하지 않다.

 

cf. 아코디언 컴포넌트

아코디언 컴포넌트는 브라우저가 자체적으로 지원하고 있지 않기 때문에 자바스크립트를 이용하여 구현해야 했으나 HTML5 표준에서는 details란 요소를 제공해 줌으로써 브라우저가 자체적으로 내장된 이와 같은 위젯 컴포넌트를 제공해 주고 있다.

 

summary element

summary 태그는 datails 태그의 레이블/캡션(제목) 또는 서머리(요약) 등을 표시하고자 할 때 사용할 수 있다. 이 태그는 폼의 fieldset 태그의 제목을 legend가 표시하는 것과 유사하다.

 

ex)

<form>
  <section class="progress window">
    <h1>"Really Achieving Your Childhood Dream" 파일 복사</h1>
    <details>
      <summary>복사중...<progress max="375505392" value="97543282"></progress>25%</summary>
      <dl>
        <dt>초당 전송 속도:</dt>
        <dt>452KB/s</dt>
        <dt>로컬 파일이름:</dt>
        <dt>/home/rpausch/raycd.m4v</dt>
        <dt>원격 파일이름:</dt>
        <dt>/var/www/lectures/raycd.m4v</dt>
        <dt>재생시간</dt>
        <dt>01:16:27</dt>
        <dt>컬러 프로파일:</dt>
        <dt>SD (6-1-6)</dt>
        <dt>영상 크기(너비*높이):</dt>
        <dt>640*480</dt>
      </dl>
    </details>
</form>

 

예제 실행 화면

open : 페이지 로딩 시, 위젯을 펼쳐 표시하도록 설정하고 open이 없으면 기본적으로 감춰진 상태로 표시된다.

 

dialog element

다이얼로그(Dialog)는 사용자의 결정 또는 정보 입력을 요구하는 컴포넌트를 뜻한다. 다른 용어로 '모달 윈도우' 또는 '대화상자'로도 불리고 국내에서는 레이어 팝업이라고도 불린다. 기본적으로 open 속성을 사용하지 않으면 브라우저에 표시되지 않기 땜누에 화면에 표시하고자 할때는 open 속성을 사용해야 한다.

 

ex)

<form>
  <div class="box">
    <dialog open>
      <section>
        <h2>대화상자 타이틀</h2>
      </section>
      <p>대화상자 콘텐츠입니다.</p>
      <button type="submit">confirm</button>
    </dialog>
  </div>
</form>

 

에제 실행 화면

 

사용자 인터랙션(User Interaction) 속성들

모든 HTML 태그들은 hidden 속성을 가질 수 있으며, 태그에 설정되면 태그가 아직 페이지의 현재 상태와 직접적으로 관련이 없거나 페이지의 다른 부분에서 내용을 재사용하도록 선언하는데 사용된다. 브라우저는 hidden 속성이 설정된 태그를 화면에 렌더링하지 않는다. 이 속성이 정의된 태그는 화면에서 감춰진다.

hidden 속성을 설정하는 것은 브라우저 단에서 처리되는 것만으로는 CSS의 display:none 설정과 큰 차이가 없다. 하지만 보조 기술(AT, 스크린 리더 등) 처리는 다르다. hidden 속성을 감춰진 콘텐츠에 접근할 수 잇는 방법을 제공해주고 있어 감춰진 콘텐츠 일지라 하더라도 참조를 통해 보조 기술에서 읽을 수 있도록 할 수 있다. 반면 display:none 스타일이 설정된 태그는 그러지 못한다.(브라우저 단에서는 차이가 없으나 접근성에서 차이가 있다.) 이 속성은 일반적으로 CSS를 사용해 구현되므로 CSS 속성에 의해 재정의 될 수 있음에 주의해야 한다. hidden 속성이 적용된 태그에 display:block 스타일이 설정되면 화면에 렌더링된다.

 

tabindex 속성

tabindex는 태그를 키보드로 탐색할 수 있도록 설정하거나 제외 또는 순서대로 탐색할 수 있도록 설정할 수 있다. 접근성 관점에서 매우 중요한 사항이다. 예를 들어 마우스를 사용할 수 없는 사용자가 키보드 자판을 사용해서 웹 페이지(서비스)를 이용할 때 주로 탭키를 사용하게 된다.

• 폼 컨트롤 태그들 : input, button, textarea, select 등
• href 속성을 가진 태그들 : a, area
• controls 속성을 가진 태그들 : video, audio

ex)

<form>
  <!-- 사용 예시
       [양수] 탭 포커스 순서(2번째를 설정한다.
       (논리적 포커스 흐름에 방해가 되기에 사용을 권장하지 않는다.) -->
  <button type="button" class="button is-play" tabindex="2">재생</button>

  <!-- [0]은 포커스가 없는 태그에 포커스를 가능하게 해 줄 수 있다.
       div 태그는 포커스를 가지지 않는 태그지만, 포커스를 적용할 수 있게 된다.
       컴포넌트 제작 시, 비 포커스 요소에 포커스를 적용해야 할 경우 유용하게 사용된다. -->
  <div tabindex="0"></div>
      
  <!-- [-1] 일반적인 포커스 순서에서 제외시킬 수 있다.
       (JavaScript 프로그래밍으로 포커스 처리 가능)
       컴포넌트의 일부 태그를 일시적으로 포커스 순서에서 제외한 후,
       목표에 따라 포커스를 다시 활성화 처리 할 수 있다.
       즉, 의도적으로 포커를 가지지 못하게 만들어 놨다가
       포커스를 주게끔 할 때 유용하게 사용할 수 있다. -->
  <ol class="toc">
    <li><a href="#pinch">위기</a></li>
    <li><a href="#overcome" tabindex="-1">극복</a></li>
  </ol>
</form>

 

예제 실행 화면

 

accesskey 속성

accesskey 속성을 사용하면 단축키를 통해서 액션을 연결시킬 수 있다. 즉, 단축키를 지정해 주는 것이다. 모든 HTML 태그는 accesskey 속성을 가질 수 있으며, 속성 값은 키보드 단축키로 설정된다. 하지만 accesskey 속성의 단축키는 브라우저와 운영체제 플랫폼에 의존하고 있어 운영체제마다 사용자 경험이 달라진다.

 

contenteditable 속성

기본적으로 HTML 태그들은 편집이 불가능하지만 contenteditable 속성이 설정된 태그는 사용자가 직접 편집할 수 있도록 만들어 준다. 값이 ture 또는 빈 문자열("")일 경우 편집을 허용하게 되고, 값이 false일 경우 편집을 허용하지 않는다. 예를 들어 사용자가 어떠한 위젯의 콘텐츠를 수정 할 수 있는 권한을 주고자 할때 내뇽을 수정할 수 있도록 할 수 있다.

 

draggable 속성

모든 HTML 태그는 draggable 속성을 가질 수 있다. 값이 ture일 경우 드래그(Drag)가 가능하고, false 또는 빈 문자열("")일 경우 드래그가 불가능하다.

 

ex)

<form>
  <!-- 사용 예시 -->
  <p draggable="true">
    가나다라 마바사...
  </p>
</form>

 

예제 실행 화면

 

메타데이터(Metadata) 태그들

메타데이터는 정보를 제공하는 데이터 태그로써 head 내에 정의해주는 태그들을 말한다. '메타' 즉, 문서 그 자체를 설명하는 태그를 메타 태그라고 한다. 이 태그들은 head와 head 내에 사용하는 title, meta, link, style, base 등이 있다.

 

head 태그

head 태그는 문서의 제목과 스타일시트, 스크립트 링크 또는 선언을 포함하는 문서의 일반적인 정보(메타데이터)를 제공해 줄 수 있는 태그다. 대부분 브라우저는 마크업에서 head 태그가 생략될 경우, 자동으로 head 태그를 생성하지만 일부는 그렇지 않다.

 

cf. 자동으로 <head> 태그를 생성하지 않는 브라우저 환경

• Android <= 1.6
• iPhone <= 3.1.3
• Opera <= 9.27
• Safari <= 3.2.1
• Nokia 90

title 태그

title은 브라우저의 타이틀 바(Title Bar)나 페이지 탭에 보여지는 문서의 제목을 정의하고, 오직 텍스트만 포함할 수 있으며 태그를 포함할 경우에는 해석되지 않고 문자열 그대로 렌더링된다.

 

meta 태그

meta 태그는 다른 메타 태그들(<title>, <base>, <link>, <style>)로 나타낼 수 없는 메타데이터를 정의할 때 사용할 수 있다. 메타 데이터의 종류는 크게 3가지로 나눌 수 있다.

 

charset이 설정된 경우

charset 선언, 즉 웹페이지를 작성하는 일련의 형식에서 사용되는 문자 인코딩(charset)에 대한 설정을 한다. 이 속성보다 태그의 lang 속성이 우선하여 적용된다. 

 

http-equiv(alent) 속성이 설정된 경우

pragma란 지시어(Directive)로 일반적으로 웹서버가 제공하는 웹페이지가 어떻게 제공되어야 하는지에 대한 정보제공을 하는 경우에 사용한다.

• <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> : HTML5에서는 더 이상 다음과 같이 사용되길 권장하지 않는다.
• <meta http-equiv="refresh" content="3;url=http://google.com"> : 3초 뒤에 url 값에 설정된 페이지로 이동하게 됨

<!-- 권장 X -->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<!-- 권장 O -->
<meta charset="UTF-8">

 

 

name 속성이 설정된 경우

문서 수준 메타 데이터의 이름을 정의하며, content 속성 값을 통해 설정할 수 있다.

• application name : 웹 페이지에서 실행중인 웹 애플리케이션 이름 정의. 간단한 웹 페이지는 application-name 메타를 정의해서는 안됨.
• description : 웹 페이지의 내용에 대한 짧고 정확한 요약을 설정.
• keywords : 쉼표로 구분된 문자열로 페이지의 내용과 관련된 키워드를 설정.
• author : 문서 작성자의 이름을 정의.
• robots : 검색 로봇이 웹 페이지를 크롤링하는 동작에 대한 정의.
• index
• noindex : 아무런 정보도 가지고 가지 못하도록 설정
• follow : 연결된 링크를 따라갈 수 있도록 설정
• nofollow : 연결된 링크를 따라가지 못하도록 설정
• noarchive
• nosnippet
• noimageindex
• viewport : 비표준이지만 대다수의 모바일 기기가 이 속성을 지원하고 있으며, 초기 viewport 크기 설정에 관한 힌트를 제공. 이 속성은 몇 개의 모바일 디바이스에 의해서만 사용됨. (width, height, inital-scale, maximum-scale, minimum-scale, user-scalable)

ex)

<head>
  <mata charset="EUC-KR">
  <meta name="description" content="웹 페이지 내용을 요약해서 기술">
  <meta name="keywords" content="웹 페이지에 주요 키워드를 콤마(,)로 구분하여 작성.">
  <meta name="author" content="웹 페이지의 제작자 정보를 기술"> <meta name="robots" content="index"><!-- 페이지의 내용을 인덱싱할 수 있음. -->
  <meta name="viewport" content="width=480px"> <!-- width 값이 없을 경우 기본적으로 모바일에서는 960 으로 표시 -->
  <title>Insert title here</title>
</head>

 

link 태그

현재 문서와 외부 리소스(CSS나 자바스크립트)와의 관계(relation)를 명시하는데 사용되고, 이 link 태그는 스타일시트를 링크하는데 가장 많이 사용되고 있다.

• rel : 문서와의 관계(relation) 명시.
• type : 링크된 리소스 MIME 타입 정의.(기본 적용:text/css) text/html; text/javascript
• href : 링크된 리소스 URL 설정.
• hreflang : 링크된 리소스의 언어 설정.
• media : 링크된 리소스가 적용될 미디어(media)를 설정. 기본은 all, 그 외 screen, print(출력환경)

ex)

<!-- 기본 스타일시트 설정 -->
<link href="style.css" rel="stylesheet">

<!-- 대체 스타일시트 설정: View > Page Style 메뉴에서 사용할 스타일시트를 고를 수 있다. (Chrome은 해당 X)
     파이어폭스에서 보기 메뉴의 문서 스타일에서 스타일을 선택할 수 있음. -->
<link href="default.css" rel="stylesheet" title="기본 스타일">
<link href="fancy.css" rel="alternate stylesheet" title="팬시">
<link href="basic.css" rel="alternate stylesheet" title="베이직">

 

style 태그

style 태그는 문서나 문서 일부에 대한 스타일 정보를 포함하고 기본적으로 CSS 언어가 사용된다. 이 태그의 속성으로는 type, media, scoped, title, disabled가 있다.

 

ex)

<!-- 일반적인 사용 예 -->
<style type="text/css">
  body {
    color: #323232;
  }
</style>

<!-- scoped 속성 사용 예: ❖ 현재 제대로 지원하는 브라우저 없음 -->
<section>
  <style scoped>
    p { color: #902c1f; }
  </style>
  <p> ... </p>
</section>

 

base 태그

base 태그는 문서에 포함된 모든 상대 URL들의 기준 URL을 나타내고, 한 문서에 하나의 <base>태그만 존재해야 한다.

<base target="_blank" href="http://www.example.com/">

 

HTML를 브라우저가 해석하는 순서

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" type="text/css" href="sample.css">
  <script src="example.js"></script>
</head>
<body>
  <img src="/images/sample.png" alt="">
  <ul>
    <li>HTML을 파싱</li>
    <li>외부 CSS파일 및 외부 자바스크립트 파일을 로드</li>
    <li>자바스크립트가 전달된 시점에 실행</li> <li>DOM 트리의 구축 완료</li>
    <li>이미지 파일 및 플래시 등의 외부 리소스를 로드</li> <li>모두 완료</li>
  </ul>
</body>
</html>