클라이언트(브라우저)가 어떤 HTML 문서를 요청하면, 서버는 해당 HTML 문서를 보여준다. 이와 같이 서로 HTML 문서를 주고 받기 위해서는 HTML 요소를 사용하여 HTML 문서의 시작과 끝, 즉 문서 범위를 정확하게 알리는 것이 중요하다.
<HTML 문서 범위 설정하기>를 위한 표준 기술
HTML 요소
카테고리 | 해당 사항 없음. HTML 요소는 콘텐츠를 전달하기 위한 문서를 표현하기 위한 것이므로 콘텐츠 모델에 해당되지 않음 |
콘텐츠 속성[18] | 글로벌 속성[19], manifest |
지원 브라우저 |      |
HTML 요소는 HTML 문서(HTML Document)라는 사실을 표시한다. 이 요소는 HEAD 요소, BODY 요소와 함께 HTML 문서를 만드는 핵심 요소이며, DOCTYPE 요소를 제외한 모든 요소를 포함한다. HTML5에서는 유일하게 HTML 요소만을 루트 요소(root element)[20]로 정의하고 있는데, 이것은 HTML 요소에 의해 문서의 시작과 끝이 표시된다는 것을 의미한다. 따라서 브라우저는 HTML 요소를 통해 처리해야 할 범위를 명확하게 인식할 수 있으며, 마크업 규격이 HTML인지 XML인지 신속하게 구분할 수 있다.
<!DOCTYPE html><html>…
</html>lang 속성
lang 속성[21]은 주언어(primary language)를 지정한다. 이 속성은 HTML, P 등 텍스트를 표현하기 위한 요소에 특정 언어를 지정해야 할 때 사용한다. 기계는 올바른 입력이 있어야만 올바른 출력을 낸다. 언어는 기계가 이해하기 어려워하는 분야이다. 문서가 어떤 언어로 기술되었는지 밝히지 않으면 문서를 제대로 해석하지 못하거나 해석 과정이 더뎌진다. 세상에는 우리가 상상하는 것보다 훨씬 더 많은 언어가 존재한다. 같은 글자가 언어에 따라 다른 발음, 다른 의미를 가질 수 있다.
이처럼 각각의 언어는 고유한 매커니즘을 가지고 있기 때문에 기계가 해당 언어의 매커니즘에 맞게 작동하도록 지침을 내려줘야 한다. 이런 역할을 lang 속성이 맡는다. 특히, 웹은 국경이 없기 때문에 사용언어(human language)를 명시하는 것은 매우 중요한 일이다. 사용언어를 명시하면 여러 가지 이점이 있다. 우선 검색엔진을 도울 수 있다. 검색엔진은 특정 언어로 작성된 문서를 찾을 수 있는 능력을 갖고 있기 때문에 언어가 명시되어 있으면 그만큼 검색 가능성도 커진다. 그 다음, 음성합성기(speech synthesizer)가 특정 언어에 대한 발음을 정확하게 처리하고, 언어마다 조금씩 차이가 있는 출처기호(quotation mark), 하이픈(hyphen) 등 특수기호를 제대로 표시할 수 있도록 돕는다.
lang 속성이 지정되지 않은 요소는 부모 요소(parent element)의 언어를 상속 받는다. 따라서 HTML 요소에 lang 속성을 지정하면, 일일이 모든 요소에 lang 속성을 지정하지 않더라도 문서 전체에 언어를 지정할 수 있다. 만약 특정 요소에만 다른 언어를 지정하고 싶다면 해당 요소에 lang 속성을 지정하면 되며, 이 속성은 약어 형태로 정의된 ISO[22] 언어 코드(language codes)를 사용한다.
<html lang=”ko”><head>중략
</head><body><p lang=”en”>Welcome!</p></body></html>※ ISO 언어 코드 (주요 언어 위주로 작성)
언어 | ISO 언어 코드 |
Korean | Ko |
English | en |
Chinese | zh |
French | Fr |
German | De |
Japanese | ja |
Hebrew | He, iw |
Russian | Ru |
Spanish | es |
manifest 속성[23]
manifest 속성은 문서 애플리케이션 캐시 목록(cache manifest)의 위치(URL)를 지정한다. 이 속성은 서버로부터 애플리케이션을 가져와서 클라이언트에서 실행하도록 만드는 역할을 수행하며, 이를 ‘애플리케이션 캐시’(application cache)라고 부른다. 이것은 오프라인 모드(offline mode)처럼 네트워크가 비정상인 상태에서 HTML 문서가 실행될 수 있게 만든다. 이 때 manifest 속성은 애플리케이션 캐시에 필요한 파일을 다운 받을 수 있도록 그 위치를 브라우저에게 알려준다. 파일을 클라이언트에 저장하게 되면, 오프라인 모드를 지원할 수 있을 뿐만 아니라 문서 로딩 속도가 더 빨라지고 서버 부하(server load)를 줄일 수 있다는 장점이 있다.
<html manifest=”cache.manifest”>예제 |
문서 범위와 주언어를 설정하였고, 이것을 HTML 요소와 lang 속성으로 마크업하였다.
<!DOCTYPE html><html lang=”ko”>UX Design, 1st Edition 사용자가 경험하는 모든 것을 디자인하라 위키피디어에 따르면, UX는 사용자가 제품, 시스템 또는 서비스를 이용하면서 얻게 되는 총체적 경험이다. 인터랙티브 제품은 상호작용이 이루어지는 제품을 일컫는다. 이러한 제품을 다루는 것이 이미 일상이 되었기 때문에 그 과정이 지루하거나 건조하다면 제품과 함께 하는 시간은 고통의 연속일 것이다. 한 동안 사용성(사용하기 쉽고 편리한 정도)이 중요하게 다뤄져 왔지만, 사용성은 제품을 구성하고 있는 부분적 속성일 뿐 이것만으로는 사용자 가치(사용자가 제품을 통해 얻을 수 있는 모든 것 )를 제대로 구현하기가 어렵다. 이 책은 UX 디자인이란 무엇인가, UX 디자인을 잘 하려면이라는 질문에 제대로 된 대답을 하기 위해 저자 스스로 사용자 경험 디자인을 이해하기 위해 노력했던 과정을 담았다. [위키피디어 원문] User experience is the way a person feels about using a product, system or service. User experience highlights the experiential, affective, meaningful and valuable aspects of human-computer interaction and product ownership, but it also includes a person’s perceptions of the practical aspects such as utility, ease of use and efficiency of the system. 사용자 경험 디자인이란 경험의 흐름 지식화에 의한 경험 형성 소비자-사용자 경험 사용자 경험의 순환구조
</html>**Ⅲ. 머리 영역 작성하기
**Creating Header Section
주석
[18] 콘텐트 속성은 해당 요소에서 사용할 수 있는 속성을 말한다.
[19] 글로벌 속성(global attributes)은 모든 HTML 요소에 지정될 수 있는 일반적인 속성들을 의미하며, accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title, translate 속성이 포함된다.
[20] 루트(root)의 사전적 의미는 ‘뿌리’ 또는 ‘근원’이며, 컴퓨터 프로그램에서는 트리 구조(tree structure)나 계층 구조(hierarchy)의 정점을 표시하는 용어로 사용된다. 즉, 상하 관계가 존재하는 구조에 있어서 어떤 상위 단계에도 속하지 않는 것을 root라고 한다. (출처: 컴퓨터인터넷IT용어대사전)
[21] 글로벌 속성에 포함된다.
[22] 국제표준화기구(International Standardization Organization)
[23] HTML5에 추가된 속성이다.