[HTML] 태그 소개 <template>, <link>

이번 글에서는 html 태그들 중 template 태그와 link 태그에 대하여 다루겠습니다.

 

# template 태그의 정의

  template 태그는 페이지를 불러온 순간 그려지지는 않지만, 이후 JavaScript를 사용해 인스턴스를 생성할 수 있는 html 코드를 담을 방법을 제공하는 역할을 합니다. 탬플릿은 콘텐츠 조각을 나중에 사용하기 위해 담아 놓는 박스로 생각하시면 편합니다. 페이지를 불러오는 동안 브라우저가 template 태그를 읽기는 하지만 실행하지는 않아 렌더링 속도를 높이며, 사용자가 원하지 않을 시에는 출력하지 않는 장점을 가집니다.

• 렌더링(rendering) : 2차원의 외부 정보를 3차원 화상으로 만드는 과정을 뜻하는 컴퓨터 용어

 

# link 태그

(1) link 태그의 정의

  현재 문서와 외부 리소스의 관계를 명시하는 역할을 합니다. 스타일 시트를 연결할 때에 가장 많이 사용하지만 사이트 아이콘 연결을 위해 사용하기도 합니다. href 속성과 함께 사용하며, rel 속성을 통하여 이 링크와 페이지가 어떠한 관계를 가지고 있는지를 정의해주어야 합니다.

 

(2) link 태그 rel 속성

• link href = “” rel = “stylesheet” : 이어진 링크가 이 페이지의 스타일 시트임을 알립니다.

• link href = “” rel = “icon” : 이어진 링크가 이 페이지의 파비콘임을 알립니다. (파비콘 : 즐겨찾기 아이콘의 줄임말로 특정 웹사이트에 방문했을 때 웹사이트 주소 옆이나 브라우저 탭에 나타나는 작은 아이콘을 말합니다.)