HEAD 영역에 위치하는 HTML 요소들

1.<META>

<META 속성="값" / > <!--META태그는 빈 태그다. -->
<META charset="utf-8">

<META>는 "메타정보"라고 하는, 출력되지 않는 정보를 전달 혹은 이용하는데 쓴다. 앞서 배운 빈 태그이며, 속성값으로 정보를 나타낸다. 여러 속성들 중 가장 대표적인 것은 국가별 언어 출력을 담당하는 인코딩 정보를 설정하는데 쓰인다.

 

위 사례에서, CHARASET(CHARACTER SET,( : 문자열 지정))은 인코딩 속성을 지칭하는 속성이름이며, "UTF-8"은 한국어 출력을 담당하는 속성값이다. 이 외에도 여러 속성이 존재한다. 

 

<meta name="Description" content="내용작성" / >       <!-- 현재 페이지 설명 -->       
<meta name="Keywords" content="키워드1,키워드2" / >  <!-- 외부 노출 키워드  -->
<meta name="robots" content="noindex, nofollow" / > <!-- 검색엔진 노출 여부 -->

 

- 속성값 description : 현재 페이지의 설명을 담고 있고, 이는 검색엔진이 주로 확인함. 구글 검색결과의 페이지 소개 내용은 주로 이 메타 정보를 이용한다. 글자 수는 160자 이내로 작성 권장. 

 

- 속성값 Keywords :  페이지에 대한 주요 키워드들을 담고 있으며, 이 정보 또한 검색엔진이 확인한다. content 속성에 작성하며, 콤마(,)를 구분자로 사용한다. 30개 정도의 적지만 핵심적인 키워드록 구성하는 것이 유리하다.

 

- 속성값 robots : 검색엔진이 페이지를 검색할지 말지에 대한 여부. noindex, nofollow는 검색엔진에 노출되지 않게 하는 값이고 index, follow는 검색되도록 하며, 위 메타 속성을 지정하지 않는다면 기본적으로 수집되고 검색된다.

 

2.<STYLE> & <LINK>

<!-- 내부 스타일시트 -->
<STYLE></STYLE>

<!-- 외부 스타일시트 -->
<LINK REL="stylesheet" TYPE="text/css" HREF="css/style.css" / >

문서 내에서 css을 사용하도록 하는 요소로, 내부 스타일시트와 외부 스타일시트가 존재한다.

내부 스타일 시트를 사용할 때는 <STYLE>을 사용하고, 외부 스타일시트를 연결할 때는 <LINK>를 사용한다.

 

<LINK>는 CSS연결 외에도 사용하므로 관계(RELationship)와 문서에 사용된 프로그램 언어의 종류(TYPE), 

HREF(Hypertext REFerence)라는 외부 문서의 경로를 각각 속성으로 전달받는다.  HREF의 속성값은 외부파일의 주소를 입력한다. 주소는 상대 주소 혹은 절대 주소로 입력한다.

3.<SCRIPT>

<!-- 내부 스크립트 -->
<SCRIPT></SCRIPT>

<!-- 외부 스크립트 -->
<SCRIPT TYPE="text/javascript" SRC="javascript/script.css">

자바스크립트 언어를 사용하여 HTML요소를 동적으로 제어할 때 사용하는 요소이다. CSS와 같이 내부 · 외부 스크립트가 따로 존재하나, 외부 스크립트는 <LINK>가 아닌 출처(SouRCe) 속성을 통해 스크립트 언어를 전달받는 점이 차이가 있다. <STYLE>과 같이 주소는 상대 주소, 혹은 절대 주소로 입력한다.

 

※ 절대 주소와 상대 주소

 - 절대 주소 : "HTTP://~" 또는 "HTTPS://~"

프로토콜로 호출해서 사용하는 주소. 값이 변하지 않는다. 그래서 절대 주소라고 한다.

 

 - 상대 주소 : "/IMG/STYLE.CSS"

작성하고 있는 HTML파일을 기준으로 상위 폴더 혹은 하위 폴더에 위치하고 있는 파일 경로를 입력해야 한다. 작성중인 파일의 경로에 따라 상대 주소는 변할 수 있다.