13. HTML 요소

소개

이 장은 별로 주목받지 못한 HTML 문서의 일부분을 다룬다: 이것들은 head 요소에 마크업된다.

이 강좌의 마지막에서 당신은 문서형, 제목 요소, 키워드와 설명을 포함하는 이 섹션의 각기 다른 부분들에 대해서 배우게 될 것고 그것들이 하는 일을 알게 될 것이다. 당신은 또한 head를 벗어나지 않고 자바스크립트와 CSS 스타일(내부, 외부 모두)을 다루는 방법을 배울 것이다. 당신은 이 강좌에서 사용한 데모를 내려 받을 수 있고, 참조할 수 있다. 데모를 마음대로 실행하는 것은 좋지만 그것을 통해서 작업은 끝내야만 한다. 당신은 HTML head를 다룰 때 강좌의 처음부터 끝까지 확인하면서 일련의 모범 사례를 따르며 데모를 만들어야 한다. 내용은 다음과 같다:

  • 머리? 어떤 머리에 대해서 이야기하는거야?
  • 문서의 기본 언어 설정
  • 제목으로 문서 판단하기
  • 키워드와 설명 추가하기
  • 어떻게 보이는가? 스타일 추가하기
  • 자바스크립트를 사용하여 동적 기능 추가하기
  • 거기 멈춰! CSS와 자바스크립트를 인라인으로 사용하는 것은 좋은 생각이 아니야!
  • 요약
  • 연습문제

머리? 어떤 머리에 대해서 이야기하는거야?

이 강좌 이전에 당신은 유효한 HTML 문서는 문서형DOCTYPE이 필요하다는 사실을 배웠다. 문서형은 HTML의 종류가 무엇인지 설명하고,
브라우저에게 문서를 보여줄 것을 지시한다. 로저가 14장에서 더 자세하게 문서형을 다루고 있다., 하지만 지금은 단지 문서형이 head와 body 요소 그리고 그 안에 있는 요소들을 위해서 필요한 것이라는 것만 알아두자. 문서의 모든 콘텐츠가 있는 body는 당신이 대분분의 시간을 보내는 곳이다. 반면에 head는 제목 요소를 제외하면 이 영역안에 정의된 것들은 방문자들에게 정확하게 보여지는 것이 없기 때문에 별로 중요하지 않은것 같다. 하지만, head는 브라우저 동작을 위한 중요한 명령들을 입력하고 문서에 대한 추가적인 정보(메타 정보라고 부른다)를 담는 곳이다.

문서의 기본 언어 설정

문서에 대한 정보의 한 조각인 head의 부모는 html 요소이다.
우리는 여기에서 문서의 주 자연어를 정의한다. 자연어는 인간의 언어를 의미하는 것으로 프랑스어, 타이어 또는 영어를 말한다.
자연어 정의는 “six” 라는 단어가 프랑스어와 영어로 매우 다르게 발음되기 때문에 스크린리더를 돕는 기능을 하고, 또한 검색 엔진을 돕는다.
특히 당신이 여러 나라의 고객들을 위한 페이지를 작성중이라면 문서의 주 언어를 정의하는 것은 좋은 생각이다;
하지만, 이것을 사용한 많은 페이지들을 보지는 못했을 것이다. 다음과 같이 할 수 있다:

<html lang="en-GB">  ... </html>
당신은 lang 속성을 사용한 문서의 자식 요소의 언어를 다르게 설정할 수 있다. 에를 들면 <span lang=“fr”>Bonjour</span>.

언어를 설정하는 속성은 문서의 문서형DOCTYPE에 의해서 결정된다. W3C를 보면

HTML에서는 lang 속성을 사용하고, XHTML 1.0에서는 text/html인 경우에 lang과 xml:lang 속성을 사용한다. 그리고 XHTML 에서는 xml:lang 속성만을 사용한다.

언어 코드는 영어를 위한 en 같은 2글자 코드로 된 것과 미국식 영어를 위한 en-US 같은 4글자 코드가 있다. 2글자 코드는 ISO 639-1에 정의되었고, 당신의 언어 코드를 정의하기 위해서 IANA에 등록할 수 있다.

제목으로 문서 판단하기

head안에 title은 가장 중요한 요소중 하나다. title은 모든 사용자 에이전트와 브라우저 어플리케이션 상단에 위치한 제목 바에 보여질 텍스트다. 제목은 웹 사용자가 당신의 사이트를 방문했을 때 보게될 콘텐츠의 첫번째 조각일 것이다. 그래서 이것은 매우 중요하다. 추가로, 스크린리더와 같은 보조기기(시각장애인에게 웹 페이지를 읽을 수 있도록 도와주는 소프트웨어)를 사용하는 방문자가 문서로부터 얻을 수 있는 첫번째 힌트가 된다. 그리고 많은 검색엔진도 유사하게 동작한다. 올바른 키워드를 포함하여 사람이 읽을 수 있는 좋은 제목을 사용한다면 방문객이 증가되는 기회를 갖게 될 것이다. 압축 파일 안에 HTML 문서 ( headexample.html)를 찾아서 브라우저에서 열어보자.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>I am a title example</title>
</head>
<body>
</body>
</html>

당신은 그림1과 같이 브라우저 네비게이션 위에 위치한 바 안에 출력된 제목을 볼 수 있을 것이다.

그림 1 브라우저에 출력된 제목

웹에는 문서의 좋은 제목을 작성하는 방법에 대한 많은 강좌가 있는데 대부분 검색 엔진 최적화(SEO)와 관련되어 있다. 검색 결과의 수를 부풀려서 보여주기 위한 속임수를 사용하지 말라. 문서가 무엇인지에 대한 짧고 간결한 글 “Breeding Dogs—Tips about Alsatians”은 “Dogs, Alsatian, Breeding, Dog, Tips, Free, Pet.”보다 더 쉽다.

키워드와 설명 추가하기

다음에 볼 내용인 설명과 키워드를 추가하는 일은 당신의 방문자에게 직접적으로 보이지 않기 때문에 불필요하게 보일 지도 모른다. 이 두가지는 HEAD안에 메타 요소로 추가된다. 야후!의 유로스포츠 사이트 ( headwithmeta.html)로부터 가져온 예제를 보자.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Yahoo! UK & Ireland Eurosport—Sports News | Live Scores | Sport</title>
  <meta name="description" content="Latest sports news and live scores from Yahoo! Eurosport UK. Complete sport coverage with Football results, Cricket scores, F1, Golf, Rugby, Tennis and more.">
  <meta name="keywords" content="eurosport,sports,sport,sports news,live scores,football,cricket,f1,golf,rugby,tennis,uk,yahoo">
</head>
<body>
</body>
</html>

만약 당신이 브라우저에서 이 문서를 열었다면 당신은 문서의 본문 안에서 어느것도 볼 수 없을 것이다. 하지만 만약 당신이 검색엔진 결과에서 이 문서를 보았다면 그림 2에서 보듯이 검색 엔진 결과에서 출력된 설명을 볼 수 있을 것이다.

그림 2: 설명이 보여진 검색 엔진 결과 페이지

이것은 방문자 정보를 통해 방문자들이 어떤 필요성을 통해 클릭하고 어떤 정보를 찾는지 도움을 줄 수 있게 한다. 또한 설명은 다른 사용법이 있다 – 어떤 브라우저들은 그림 3과 당신이 즐겨찾기에 추가했을 때 추가 정보로 보여주기도 한다.

그림 3 즐겨찾기에 추가했을 때 브라우저에서 설명 내용을 보여주고 있다

메타 정보를 추가하는 것이 즉시 이득을 주지는 않기는 하지만 당신의 문서의 접근성에 중요한 역활을 한다. 당신이 추가한 키워드들도 마찬가지다.

비록 최근 스패머들에 의해 남용되어 검색 엔진들이 더 이상 키워드들을 취하고 있지 않지만 만약 당신이 콘텐츠를 스캔하고 분석하지 않고 많은 문서를 빨리 인덱스하기 원한다면 이것은 여전히 좋은 도구가 될 수 있다. 당신은 예제를 통해서 검색 엔진에더 더욱 빨리 그리고 인덱스 될 수 있도록 스크립트를 작성하는 콘텐츠 관리 시스템에서 메타 키워드를 사용할 수 있다. 당신은 콘텐츠 관리 시스템에서 예제를 위한 메타 키워드를 사용할 수 있다. 이것은 콘텐츠를 분석하지 않고도 문서들을 검색하는 방법을 제공하지는 않는다. 당신이 앞으로 이 같이 무엇인가를 만들고자 한다면 메타 요소 안에 키워드를 추가해서 영리하고 빠리 검색되게 할 온셥을 남겨둔다. 당신이 책을 덮은 후에 다시 모든 챕터를 읽지 않아도 읽던 곳을 간다하게 정확히 찾아내기 위해 남겨두는 책갈피와 같다고 생각하라.

어떻게 보이는가? 스타일 추가하기

다음으로 당신은 문서의 HEAD에 CSS를 정의한 스타일 규칙을 추가할 수 있다.
당신은 style 요소를 사용하여 HEADE 안에 직접 포함시킬 수 있다. 예를 들면 headinlinestyles.html 과 같다:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Breeding Dogs—Tips about Alsatians</title>
  <meta name="description" content="How to breed Alsatians, tips on proper breeding and information about common issues with this breed.">
  <meta name="keywords" content="Dogs,Alsatian,Breeding,Dog,Tips,Free,Pet">
  <style type="text/css">
    body{
      background:#000;
      color:#ccc;
      font-family: helvetica, arial, sans-serif;
    }
  </style>
</head>
<body>
<p>Test!</p>
</body>
</html>

만약 당신이 브라우저에서 이 문서를 열면 검은색 배경 위에 회색의 “Test!” 문자열을 볼 수 있을 것이다. 그리고 글꼴은 Helvetica 또는 Arial일 것이다. 글꼴은 시스템에 설치되어야 적용된다. style 요소는 또한 media 라는 속성을 포함한다. media 속성은 이 스타일이 사용할 수 있는 미디어의 형태를 정의한다. 컴퓨터 스크린과 휴대용 장치에서 문서를 보거나 출력했을 때 어떤 스타일이 사용되기를 원하는가? 가장 많이 사용되는 것들로부터 몇 가지 종류를 선택할 수 있다:

  • screen — 모니터 출력을 위한 경우
  • print — 출력물이 어떻게 보이는지를 정의한 경우
  • handheld — 모바일 기기나 다른 휴대용 장치에서 문서가 어떻게 보이는지를 정의한 경우
  • projection — HTML을 이용해서 프리젠테이션을 하는 경우. 에를 들어 Opera Show feature.

만약 당신이 화면에서 사용된 색상을 무시하고 인쇄를 위해 글꼴 크기를 더 키우기를 원한다면 당신은 처음 아래와 같이 인쇄 미디어 속성을 정의한 스타일 아래 다른 스타일 내용을 추가할 수 있다.(headinlinestylesmedia.html에서 전체 코드를 확인해보자):

<style type="text/css" media="print">
  body{
    background:#fff;
    color:#000;
    font-family: helvetica, arial, sans-serif;
    font-size:300%;
  }
</style>

지금 당신이 웹페이지를 인쇄한다면, 브라우저는 문서를 인쇄하기 위해 인쇄용 스타일시트를 사용해야 한다는 것을 알게 된다.
그림 4를 보면headinlinestylesmedia.html 를 불러와서 인쇄 미리보기를 선택하면 어떻게 나타나는지 알 수 있다:

그림 4 스크린과 인쇄 스타일 시트

자바스크립트를 사용하여 동적 기능 추가하기

HEAD에 추가할 수 있는 또 다른 하나는 자바스크립트로 작성하는 브라우저에서 실행되는 스크립트(클라이언트 사이드 스크립트라고 불린다)다. 당신은 4장에서 정적인 HTML문서를 동적으로 처리하기 위한 자바스크립트를 추가하는 방법을 배웠다. 예를 들면 에니메이션 효과나 데이터 유효성 검증, 또는 사용자가 특정 작업을 수행할 때 발생하는 이벤트 같은 것들이 있었다.

당신은 script 요소를 사용하여 문서에 자바스크립트를 추가한다. 브라우저가 스크립트 블록들중 하나를 만날 때, 브라우저는 실행된 자바스크립트 코드가 완료될때까지 문서의 나머지 부분을 해석하는 일을 일시 중지한다.
이것은 본문이 불러지기 전에 자바스크립트를 활성화하기를 원할 때 head 안에 스크립트 코드를 추가할 필요가 있다는 것을 의미한다.
예를 들면, 방문자가 확실하게 다른 서버로 이동하기 위해 링크를 선택했는지를 확인하는 경고를 보여줄 수 있다(headscript.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Breeding Dogs—Tips about Alsatians</title>
  <meta name="description" content="How to breed Alsatians, tips on proper breeding and information about common issues with this breed.">
  <meta name="keywords" content="Dogs,Alsatian,Breeding,Dog,Tips,Free,Pet">
  <style type="text/css" media="screen">
    body{
      background:#000;
      color:#ccc;
      font-family: helvetica, arial, sans-serif;
    }
    a {color:#fff}
  </style>
  <style type="text/css" media="print">
    body{
      background:#fff;
      color:#000;
      font-family: helvetica, arial, sans-serif;
      font-size:300%;
    }
  </style>
  <script>
    function leave(){
      return confirm("This will take you to another site,n are you sure you want to go?")
    }
  </script>
</head>
<body>
Test!
<a href="http://dailypuppy.com" onclick="return leave()">The Daily Puppy</a>
</body>
</html>

만약 당신이 이 예제를 웹 브라우저에서 열고, 링크를 클릭하면 확인창을 볼 수 있을 것이다. 이것은 단지 이해를 위해 작성된 간단한 예제이다. 이 강좌 이후에 더 깊은 수준의 자바스크립트 테크닉을 배우게 될 것이다.

거기 멈춰! CSS와 자바스크립트를 인라인으로 사용하는 것은 좋은 생각이 아니야!

당신이 웹 사이트를 구축할 때 기억할 것이 하나 있다. 당신의 코드를 가능한 많이 재사용할 수 있어야 한다는 것이다. 모든 페이지 안에서 스타일과 스크립트를 작성하는 것은 완성된 사이트와 개별 문서를 쓸데없이 부풀려 유지보수를 어렵게 만든다.

이것은 외부 파일 안에 스타일과 스크립트를 넣는 것이 더 낫다. 그리고 그것들이 필요한 HTML 문서 안에서만 추가하는 것이 좋다. 그래서 만약 수정이 필요해지면 단지 한 곳에서만 업데이트를 하면 된다. 당신의 자바스크립트를 위해서 내용이 없는 script 요소를 사용한다. 하지만 아래 코드에서 볼 수 있듯이 src 속성을 이용해서 외부 파일을 연결할 수 있다(externaljs.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Breeding Dogs—Tips about Alsatians</title>
  <meta name="description" content="How to breed Alsatians, tips on proper breeding and information about common issues with this breed.">
  <meta name="keywords" content="Dogs,Alsatian,Breeding,Dog,Tips,Free,Pet">
  <style type="text/css" media="screen">
    body{
      background:#000;
      color:#ccc;
      font-family: helvetica, arial, sans-serif;
    }
    a {color:#fff}
  </style>
  <style type="text/css" media="print">
    body{
      background:#fff;
      color:#000;
      font-family: helvetica, arial, sans-serif;
      font-size:300%;
    }
  </style>
  <script src="leaving.js"></script>
</head>
<body>
Test!
<a href="http://dailypuppy.com" onclick="return leave()">The Daily Puppy</a>
</body>
</html>

이건 CSS에서는 쉽지 않다. style 요소는 src 요소를 갖지 않기 때문이다. 그래서 문서에 포함할 외부 CSS 파일을 지정하는 href 속성과 스크린과 출력등을 위한 스타일을 위한 media 속성을 가지는 link 요소가 필요해 진다. 이렇게 당신은 CSS와 자바스크립트를 둘 다 넣어서 당신은 방대한 HEAD의 길이를 줄일 수 있다. (externalall.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Breeding Dogs—Tips about Alsatians</title>
  <meta name="description" content="How to breed Alsatians, tips on proper breeding and information about common issues with this breed.">
  <meta name="keywords" content="Dogs,Alsatian,Breeding,Dog,Tips,Free,Pet">
  <link rel="stylesheet" type="text/css" media="screen" href="styles.css">
  <link rel="stylesheet" type="text/css" media="print" href="printstyles.css">
  <script src="leaving.js"></script>
</head>
<body>
Test!
<a href="http://dailypuppy.com" onclick="return leave()">The Daily Puppy</a>
</body>
</html>

스타일과 스크립트 파일을 외부 파일로 유지함으로써 얻는 다른 이점:

  1. 스타일과 스크립트 파일은 웹 사이트에 한 번 접속하면 다운로드 되고 그 후로는 캐시(사용자 로컬 임시 폴더에 저장됨)되기 때문에 사용자가 다시 방문하더라고 새로 다운로드 하지 않고, 저장된 스타일과 스크립트 파일을 이용하여 사이트를 보여주기 때문에 더 빠르게 웹 사이트를 보여준다.
  2. 유지보수를 쉽게 할 수 있다. 스타일과 스크립트를 사용하는 페이지는 수 천 개일 수 있다. 만약 당신이 스타일과 스크립트를 변경할 필요가 생기면 수 천 페이지가 아닌 하나의 파일만을 수정하면 된다.

요약

당신은 HTML 문서의 HEAD 안에 각각의 것들에 대해서 배웠다:

  • 제목title은 문서를 소개한다.
  • 메타meta 요소들은 이 문서의 콘텐츠를 설명하고, 색인을 돕기 위해 키워드를 정의한다.
  • 링크link 요소는 외부 CSS 파일을 지정한다.
  • 스크립트script 요소는 외부 자바스크립트 파일을 지정한다.

연습문제

늘 그렇듯, 여기는 이 강좌의 이해를 위한 연습 문제이다.

  • 화면에 출력되지 않는대도 메타 요소에 설명을 추가해야 하는가?
  • 문서의 body가 아닌 head에 자바스크립트를 추가하는 것의 이점은 무엇인가?
  • 브라우저 캐싱을 통한 장점을 얻으려면 당신은 어떤 작업을 해야 하는가?
  • 문서의 제목과 키워드가 검색 엔진 결과에 어떤 이점을 주는가?
  • 제목을 굵게 표시하는 것이 가능한가?

저자에 관하여

Chris Heilmann은 지난 10년간 웹 개발자로서 활동해 왔으며 취미삼아 라디오 저널리즘에 관한 일도 한다. 그는 영국에 있는 야후에서 트레이너와 리더 개발자로 근무하고 있으며 유럽과 아시아의 front end 코드의 품질을 관리한다.

그의 블로그는 Wait till I come 에 있으며 많은 소셜 네트워크에서 “codepo8”로 알려져 있다.

이 글과 비슷한 종류의 글은 'HTML' 카테고리에서 더 찾아볼 수 있습니다. 또한, , 태그로도 검색해 보실 수 있습니다. 북마크를 하시려면 퍼머 링크로 기억해 주세요.
이 글을 다 읽어주셨다면, 댓글을 남겨주세요. 좋았다라는 격려도 좋고, 잘못된 부분을 지적해 주시는 것도 좋습니다. 마음에 드셨다면 아래 Like 버튼을 눌러서 페이스북과 트위터로 소개해 주시면 더욱 좋겠습니다.