문서정보 지정하기

 

 

 

웹 브라우저에서 한글이나 영어와 같은 문자를 처리하기 위해 사용할 문자 코드 세트(인코딩) 선언 값과

저작자, 키워드, 요약문, 만기일 등에 관한 문서 정보의 경우 빈 요소인 meta 요소를 이용하여 지정가능하다.

 

문자코드 세트 지정하기

웹페이지 제작시 사용한 문자가 깨지지 않게 하려면 meta요소를 이용하여 문자코드 세트를 지정해야 하는데

이때 다국어 인코딩의 경우 utf-8을 지정할수 잇고 한글은 euc-kr을 지정한다. 문자 코드 세트를 지정할 때

마임 타입도 함께 지정할 수 있는데 XHTML 문서에 지정하는 마임 타입은 application/xhtml+xml이 일반적이다.

그러나 HTML이 application/xhtml+xml 사용이 불가하기 때문에

하위 호환성을 고려하여 HTML에서 사용하는 text/html을 사용한다.

 

형식

<meta http-equive="content-type" content="text/html:charset=euc-kr" />

 

키워드 지정하기

meta요소를 이용하면 검색키워드를 지정할 수 있다. 웹페이지에 검색 키워드를 지정하면

검색할 때 웹사이트가 상위에 노출 되는 효과를 얻을 수 있다. meta 요소를 이용하여

검색 키워드를 지정할 때는 검색 키워드를 콤마로 구분하여 선언한다.

 

형식

<meta name="keywords" content="검색 키워드" />

 

문서정보 지정시

웹페이지의 다양한 문서정보를 지정할때도 meta요소를 사용할 수 있다.

문서 제목의 경우 subject, 제작자정보는 author를 이용하여 문서제목 정보를 제공하고

description 값으로 웹페이지 요약정보, 제작자 정보등을 지정할 수 있다.

 

문서 제목지정시(title)

웹 문서의 제목을 선언할때 title을 사용한다. 문서마다 유일한 내용으로 구성해야 하고

즐겨찾기 및 북마크에 해당 웹 문서를 추가할 경우에 사용되는 북마크 이름으로도 활용되므로

같은 title을 가진 웹문서가 여러개 있어서는 안된다.

title 요소는 문서와 문서사이를 이동할때 해당 웹사이트가 어떤 정보를 담고있는지 알려주기 때문에

문서 제목으로 내용을 쉽게 파악할 수 있도록 정하는 것이 좋다.

 

형식

<title>문서 제목</title>

 

title에 장식문자를 과도하게 사용하는 경우 스크린 리더와 같은 보조기기를 통해 접근할 때

정보텍스트가 해당 장식기호때문에 안보일 수도 있다. 

웹문서 검색 최적활르 위해 타이틀은 간결하게, 장식문제는 제외하는 것이 좋다.

 

*검색엔진 최적화(SEO)

SEO는 검색엔진 최적화나 검색엔진 최적화 도구를 의미하며 사이트 제작시 검색 상위에 랭크 될수 있도록

검색로봇에 친화적인 마크업을 구현하는것을 말한다. 검색친화적인 마크업을 위해서는 충실한 문서 정보와(meta)

적절한 제목, 의미에 맞는 마크업이 중요하다. 그러나 국내 포털사이트는 검색 로봇의 수집 결과를

검색 순위에 반영하지 않기 때문에 원하는 만큼의 결과를 기대하기는 어렵다.

구글과 같은 검색엔진에서는 즉각적인 효과를 얻을수 있으며

시맨틱웹으로의 방향성을 고려한다면 검색엔진 최적화는 필수이다.

 

문단 관련

 

1. 제목

제목은 콘텐츠의 내용에 따라 적절하게 지정해야 하며 대,중 소제목등으로 작성하여야 하다.

제목 요소는 h1,h2,h3,h4,h5,h6의 여섯 가지를 사용할 수 있다.

제목요소는 블록 요소를 포함할 수 없으며 인라인 요소와 텍스트 만을 포함 할 수있다.

 

형식

<title>XX회사</title>

 

2.단락

텍스트를 단락으로 정의할 때 사용하는 데 단락 요소 안에는

a,img등 인라인 요소와 텍스트만 포함 할 수 있고

블록요소는 사용할 수 없다. 단락안에서 강제로 줄바꿈해야 하는 경우에는 br요소를 사용할 수 있다.

 

형식

<p>텍스트</p>

 

3.줄바꿈

단락에서 텍스트를 강제로 줄바꿈할때는 "line break"의 의미인 br요소를 사용한다.

br요소는 빈 요소(empty element)이다.

 

형식

<p>

       텍스트<br />

</p> 

 

4.주소

웹문서 내에 연락처 및 제작자, 저작권 정보등을 표시할 수 있는데 문서의 시작이나 끝에 보통 위치한다.

이때 연락처 정보는 address요소로 정의할 수 있다.

Address요소 안에는 인라인 요소와 텍스트 포함은 가능하나 블록 요소는 포함할 수 없다.

ex)웹사이트 작성자 이메일, 정보공개일 등

 

형식

<address>작성자 정보 콘텐츠</address>

 

5.구분선

hr요소는 수평선으로 표현되는데 구분선 역할을 하는 빈 요소이며 <hr />로 종료태그 없이 사용한다.

 

형식

<div id="content">content 영역</div>

<hr />

<div id="aside">aside 영역</div>

 

6.하이퍼링크

웹페이지 내 콘텐츠에 링크를 설정하여 클릭시 다른 링크로 연결되도록 설정할때 사용한다.

사용할 수 있는 속성에는 href, target, title 속성등이 있고

Transitional과 Frameset DTD 일 경우에만 target속성 지정이 가능하다.

 

인터넷 쇼핑이나 은행 금융거래를 웹으로 하던중 문의사항이 생기거나 오류가 생겼을때

고객문의 온라인 게시판으로 이동할 수 있게끔 클릭을 유도하는 글귀를 볼때가 많다. 상세정보를 얻고자 클릭을 하면

해답을 위한 링크로 이동하는데 링크 클릭을 유도할 때도 의미에 맞게 구체적으로 써주는 것이 좋다.

ex) 불편사항은 온라인 상담 게시판에 남겨주세요.

 

형식

<p> <a href="파일명 또는 URL" target="_blank" title="대체설명">텍스트 또는 이미지</a></p>