[FrontEnd] html Tag 정리

 

 

🚀 Html Tag 정리

    🔽 Block Level Element(블록 레벨 요소)와 Inline Level Element(인라인 레벨 요소)

Box Model은 블록 레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라져 버리는 것이에요.그렇기 때문에 먼저 블록 레벨 요소와 인라인 레벨 요소에 대해 공부할 필요가 있는 것이에요.

블록 레벨 요소는 태그를 사용해 요소를 삽입 했을 때, 혼자 한 줄(한 행)을 차지하는 요소인 것이에요. 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 것이에요. 따라서 그 요소의 왼쪽이나, 오른쪽에 다른 요소가 올 수 없는 것이에요. 너비나 마진, 패딩 등을 이용해 크기나 위치를 지정하려면 블록 레벨 요소여야 하는 것이에요. 대표적인 태그로는 <div>, <p>태그가 있는 것이에요.

💡 참고 사항:
Margin (마진)은 요소들 사이의 여백이고, Padding (패딩)은 테두리와 내용 사이의 여백

 

반면, 인라인 레벨 요소는 줄을 차지하지 않는 요소인 것이에요. 즉, 화면에 표시되는 콘텐츠 만큼만 영역을 차지하고, 나머지 공간에는 다른 요소가 올 수 있는 것이에요. 따라서 한 줄에 여러 개의 인라인 레벨 요소를 사용할 수 있는 것이에요. 대표적인 태그는 <img>, <strong>이 있는 것이에요.

 

참고 : HTML5 CSS3 웹 표준의 정석 P. 306

 

블록 레벨 요소와 인라인 레벨 요소에 대한 태그는 아래와 같은 것이에요.

HTML5 CSS3 웹 표준의 정석 P. 307

 

Box Model(박스 모델) - 박스 형태의 콘텐츠

블록 레벨 요소들은 모두 박스 형태인 것이에요. 예를 들어 <p> 태그를 사용하는 텍스트 단락은 블록 레벨 요소인데, 텍스트 단락 앞 뒤에 빈 줄이 생기면서 텍스트 단락이 하나의 박스 형태를 갖게 되는 것이에요. 스타일 시트에서는 이렇게 박스 형태인 요소를 'Box Model(박스 모델)' 이라고 부른 답니다. 웹 문서 안에 여러 요소들을 원하는 위치에 배치하려면 CSS 박스 모델에 대해 잘 알고 있어야 하는 것이에요. 그래야지 한 줄에 배치할지 줄을 바꾸어 배치할지 요소와 요소 사이의 간격을 어떻게 조절할지 결정할 수 있기 때문인 것이에요.

박스 모델은 실제 콘텐츠 영억, 박스와 콘텐츠 영역 사이의 여백인 padding(패딩), 박스의 테두리(border), 그리고 여러 박스 모델 사이의 여백인 margin(마진) 등의 요소로 구성되는 것이에요. 이 때, 마진이나 패딩은 웹 문서에 하나의 콘텐츠만 표시한다면 반드시 필요하지 않을 수도 있지만, 다른 콘텐츠들과의 간격이나 배치 등을 고려하면 필요한 박스 모델의 중요한 개념인 것이에요. 아래 사진과 같이 패딩과 테두리, 마진은 각각 상하좌우 네 방향으로 나뉘어 네 방향의 스타일을 따로 설정 할 수 있답니다!

HTML5 CSS3 웹 표준의 정석 P. 308

 

 

 

    🔽 <div>

`<div>`는 HTML 문서에서 특정 영역(division)이나, 구획(section)을 정의할 때 사용하는 것이에요. `<div>` 요소는 여러 HTML 요소들을 하나로 묶어 CSS로 스타일을 변경하거나, 자바 스크립트로 특정 작업을 수행하기 위한 일종의 Container(컨테이너)로 자주 사용되는 것이에요. CSS와 함께 Web Page의 Layout(레이아웃)을 설정하는데도 사용되는 것이에요.

 

예제 코드 

<style>
    div {
        background-color: orange;
        font-style: italic;
    }
</style>

 

<p> HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는지를 결정하는 display 속성을 가지는 것이에요. ></p>
<div><p>div 요소는 다른 HTML 요소들을 하나로 묶는데 사용되는 대표적인 Block(블록) 요소인 것이에요. </p></div>
<span>span은 text(텍스트)의 특정 부분을 묶는데 자주 사용되는 inline(인라인) 요소인 것이에요.</span>

 

💡 참고 사항 : HTML5에서 변경 사항
HTML5에서는 <div> Tag의 align 속성을 지원하지 않는다.

 

 

 

 

 

🚀 텍스트를 한 줄 표시하는 태그

    🔽 <p> - 단락 만들기

텍스트를 표시할 때 가장 많이 사용되는 태그가 <p>인 것이에요. 이 친구는 텍스트 단락을 만드는데, 이 때, '단락'이란 앞 뒤에 줄 바꿈(개행)이 있는 텍스트 덩어리를 말하는 것이에요.
<p> 태그로 표시하는 텍스트 단락은 </p> 태그를 만날 때 까지 줄 바꿈 없이 텍스트를 한 줄로 표시하는데, 텍스트 줄이 브라우저 창의 너비보다 길어질 경우, 줄이 자동으로 바뀌는 것이에요.

<p> 텍스트 </p>

 

 

    🔽 <span> - 줄 바꿈(개행) 없이 영역 묶기

<span> 태그는 태그 자체로는 아무 의미가 없지만, 텍스트 단락 안에서 줄바꿈 없이 일부 텍스트만 묶어 스타일을 적용하려고 할 때 주로 이용하는 것이에요.

 

 

  🔽 기타 텍스트 관련 태그들

출처 : HTML5 CSS 웹 표준의 정석 P.69

 

 

 

 

 

 

🚀 목록을 만드는 태그

목록과 관련된 태그들은 웹 표준 이전에는 텍스트를 정리하기 위해 사용했던 것이에요. 하지만, 이제는 목록을 이용해 이미지나, 텍스트 어떤 것이든 목혹화 해 정리할 수 있고, CSS를 적용해 메뉴나 본문 내용 등에서 다양하게 활용할 수 있는 것이에요. 목록을 만드는 태그는 자주 사용되는 태그이기 때문에 잘 알아두면 좋은 것이에요.

 

    🔽 <ul>, <li> - 순서 없는 목록 만들기

순서가 필요하지 않은 목록(unordered list) 즉, 목록을 아래 처럼 순서를 만드는 것이 아닐 때

1. 숫자형 순서 목록
2. 숫자형 순서 목록

이 친구를 이용하면 되는 것이에요. <ul> 태그 안에 <li> 태그(list Item)를 사용해 각 항목을 표시하는 것이에요.
순서 없는 목록의 경우, 각 항목 앞에 작은 원이나 사각형 같은 bullet(벌릿)이 붙는 것이에요. HTML4까지는 <li> 태그의 type 속성을 이용해 벌릿을 바꾸었지만, 이제는 CSS list-style-type 속성을 이용해 벌릿을 수정하면 되는 것이에요.

<ul> 
	<li〉 내용 </li> 
	<li> 내용 </li> 
</ul>

 

다음은 관광 안내 전화를 '일반 전화'와 '휴대 전화'로 구분해 표시한 예제로 순서가 중요하지 않기 때문에 <ul> 태그와 <li> 태그를 이용해 목록을 만든 것이에요. 아무 스타일도 적용하지 않았기 때문에 기본 목록 형태로 표시되는 것이에요.

 

 

 

 

    🔽 <ol>, <li> - 순서 있는 목록 만들기

항목을 나열하되 순서가 필요한 목록(ordered list)를 만들 때는 <ul> 대신 <ol>태그를 이용하고, <li> 태그를 사용해 각 항목을 표시하면 되는 것이에요. <ol> 태그에는 <ul>태그와 달리 여러 속성들이 함께 사용되어 목록의 숫자 표기 방법이나, 시작하는 수자 등을 바꿀 수도 있답니다!

 

<ol> 태그 속성으로 순서 목록의 숫자와 순서 바꾸기

<ol> 태그에는 순서와 관련된 몇 가지 속성이 있기 때문에 속성 값에 따라 조금씩 다른 형태로 표시할 수 있는 것이에요.

• type 속성 - <ol> 태그는 순서 목록이기 때문에 각 항목 앞에 1, 2, ... 같은 숫자가 기본으로 붙은데, <ol> 태그의 type 속성을 이용해 숫자의 종류를 다항하게 조절 할 수 있는 것이에요. type 속성에서 사용할 수 있는 값은 아래와 같은 것이에요.
  
  <ol> 태그의 type 속성 대신 CSS의 list-style-type 속성을 이용해 지정할 수도 있는 것이에요.
  기본 값이란 아무것도 지정하지 않았을 때, 선택되는 값이에요.

 

• start 속성 - 순서 목록은 기본적으로 1부터 시작하는데, start 속성을 이용하면 중간 번호부터 시작할 수 있는 것이에요.
• reversed 속성 - 항목을 역순으로 표시할 수 있는 것이에요.

 

<li> 태그 생략과 목록 중첩

순서 없는 목록이나, 순서 목록의 각 항목을 정의할 때, <li> 태그를 사용하는데, 여러 항목이 나열될 때, </li> 태그를 생략해도 <li> 태그가 다음에 오는 <li> 태그를 만나면 자동으로 그 전에 </li> 태그가 있는 것처럼 인식하는 것이에요. 따라서 아래와 같이 작성해도 되는 것이에요.

 

 

다음은 순서 없는 목록으로 '1일차'와 '2일차' 항목을 만든 뒤 각 항목 안에 다시 순서 목록을 이용해 여행 코스를 나열한 예제인 것이에요. 첫 번째 목록에서는 type 속성을 이용하고, 두번째 순서 목록에서는 type 속서오가 start 속성을 이용해 숫자 종류와 시작 번호를 수정한 것이에요.

 

 

<ul>
	<li> 1일차
    	<ol type="a">
        	<li>해녀박물관</li>
            <li>낚시체험</li>
        </ol>
    </li>
    
    <li> 2일차
    	<ol type="a" start="3">
        	<li>용눈이오름</li>
            <li>만장굴</li>
            <li>카악체험</li>
        </ol>
    </li>
</ul>

반응형

 

 

 

 

🚀 여러 데이터 나열해서 보여주기

이번에는 여러 데이터를 나열해서 보여주고, 이용자가 선택할 수 있도록 하는 요소를 살펴 볼 것이에요.

 

 

    🔽 <select>,  <option> - 드롭다운 목록 만들기

이용자가 내용을 입력하는 것이 아니라, 여러 Option(옵션) 중에서 선택하도록 하고 싶다면 드롭다운 목록을 사용할 수 있는 것이에요. 드롭다운 목록이란 클릭했을 때, 옵션들이 요소 아래쪽으로 펼쳐지기 때문에 붙여진 이름인 것이에요. 공간을 최소한으로 사용하면서 여러 옵션을 표시하려면 드롭다운 목록이 탁월한 선택인 것이에요.

드롭다운 목록은 <select> 태그와 <option> 태그를 이용해 표시하는 것이에요. <select> 태그로 드롭다운 목록의 시작과 끝을 표시하고, 그 안에 <option> 태그를 이용해 원하는 항목들을 추가 넘겨주기 위한 값을 지정하는 것이에요.

 

<select 속성"속성 값">
    <option value="값" [속성"속성 값]"> 내용1 </option> 
    <option value="값" [속성 "속성 값]"> 내용2 </option> 
    <option value="값" [속성"속성 값]"> 내용3 </option>
    ...
</select>

 

일단, 가장 기본적인 드롭다운 목록을 볼것이에요. 아래 예제를 보면 이용자가 특정 항목을 목록에서 선택하면 그 항목의 value 값이 서버로 넘겨지는 것이에요.

 

 

<label class="reg" for="class">학과</label>

<select id="class">
    <option>건축공학과</option>
    <option>기계공학과</option>
    <option>산업공학과</option>
    <option>전기전자공학과</option>
    <option>컴퓨터공학과</option>
    <option>확학공학과</option>
</select>

 

기본적인 드롭다운 목록에서 <select> 태그와 <option>태그의 속성을 추가 해 더 자세한 설정을 만들어 볼 것이에요. 그리고, <opgroup> 태그로 옵션들을 묶어 볼 것이에요.

 

<select> 태그의 속성

먼저 <select> 태그를 이용해 만든 드롭다운 목록은 기본적으로 한 가지 옵션이 표시되고, 화살표를 클릭해 나머지 옵션을 살펴본 뒤 필요한 한가지 항목을 선택할 수 있는 것이에요. 이 때, size 속성이나, multiple 속성을 이용하면 드롭다운 목록의 크기나 선택할 항목의 개수를 조절할 수 있는 것이에요.

 

 

 

<option> 태그의 속성

드롭다운 목록에 표시되는 옵션들은 <option> 태그를 이용해 지정하는데, <option> 태그에서만 이용하는 속성은 아래와 같은 것이에요.

 

 

 

🚀 표를 만드는 Tag

웹 문서에서 자료를 정리할 때 자주 사용하는 요소가 `표(table)`인 것이에요. 표는 행(row)와 열(column)으로 이루어져 있고, 행과 열이 만나 이루는 영역을 cell(셀)라고 부르는 것이에요. 표를 만드려면 행과 열 두 가지를 고혀래 정의해야 되기 때문에 하나의 표를 만들기 위해서는 여러 개의 Tag가 이용된답니다.

 

출처 : HTML5 CSS3 웹 표준의 정석 P.80

 

 

    🔽 <table>, <tr>, <td>, <th> - 기본적인 표 만들기

가로, 세로로 각각 행과 열이 있고, 그 안에 내용이 입력되는 것이 표인 것이에요. 이런 표를 만들 때는 표를 만드는 태그와 행을 만다는 태그, 열을 만드는 태그가 각각 필요한 것이에요. 그래야 각 셀에 내용을 입력할 수 있기 때문인 것이에요. 표를 이용해 자료를 정리한 곳에 소스를 살펴보면 아래와 같은 태그들로 구성이 되어 있는 것이에요.

 

<table>
	<tr>
    <td> 내용 </td>
    <td> 내용 </td>
    ...
    </tr>
	...
</table>

 

 

출처 : HTML5 CSS3 웹 표준의 정석 P.80

 

💡 참고 사항 : 브라우저 개발자 도구
최신 브라우저에는 웹 개발자 도구가 존재한다. 이 도구를 이용하면 웹 문서 소스를 확인할 뿐만 아니라 소스를 수정해 볼 수도 있다.
크롬에서 웹 문서를 열어 특정 부분을 마수으 오른쪽 버튼으로 클릭하고 [검사]를 선택하면 개발자 도구 창이 열리면서 선택한 부분의 태그가 강조 되어 진다.

출처 : HTML5 CSS3 웹 표준의 정석 P.81

개발자 도구 창의 위쪽에는 여러 Tab들이 있는데, 그 중 [Elements] Tab을 누르면 소스를 볼 수 있고, 마우스 포인터를 소스에 있는 태그 위로 가져가면 그 태그가 웹 브라우저 화면에서 어떻게 적용되는지 화면에 회색 배경으로 표시 해 알려 준다. 또한, 개발자 도구를 이용하면 매번 소스를 수정해 웹 브라우저에 확인해 보고, 다시 수정하는 과정 없이 웹 브라우저 창에서 소스를 수정해 즉시 결과를 확인 해 볼 수 있다. 다만, 브라우저에서 수정하는 내용은 단지 결과 확인을 위한 것이기 때문에 바뀐 값이 Code에 적용되지는 않는다.

만약 모니터 화면이 넓거나, 듀얼 모니터를 이용한다면 개발자 도구 창을 따로 분리해 이용할 수도 있다. 개발자 도구 창 오른쪽 위에 있는 ㅎ롼경설청 아이콘을 누르고, 분리 아이콘을 클릭하면 개발자 도구 창의 위치를 바꿀 수 있다.

 

기본적인 표 만들기

웹에서 표를 만들 때는 순서가 있는 것이에요. 우선 <table> 태그를 이용해 표 전체 윤곽을 잡아주고, 행(row)을 먼저 만들고, 각 행마다 몇 개의 Cell(셀)이 들어갈지 정해 줍니다. 예를 들어 행이 2개이고, 열이 3개인 표를 만든다면 아래와 같이 만들 수 있는 것이에요.

출처 : HTML5 CSS3 웹 표준의 정석 P.82

 

 

<th> - 표에 제목 셀 만들기

표를 만들다 보면 첫번째 행이나, 첫번째 열에 셀의 제목을 넣는 경우가 많은 것이에요.
제목의 경우, 보통 다른 글자보다 굵게 표시하고, 셀의 중앙에 배치하게 되는데, <td> 대신 <th> 태그를 이용하면 이런 과정을 자기가 알아서 해주기 때문에 제목 셀을 쉽게 만들 수 있는 것이에요. <th> 역시 <td>와 마찬가지로 셀을 만드는 태그로 해당 셀에 들어가는 내용을 셀의 중앙에 배치하고, 굻게 표시하는 것이에요.

참고로 기본적으로 표는 테두리 없이 표시 되기 때문에 셀 구분을 쉽게 할 수 있도록 <table> 안에 border="1"을 줄 수 있는 것이에요.

 

출처 : HTML5 CSS3 웹 표준의 정석 P.83

 

 

colspan, rowspan 속성 - 행 또는 열 합치기

기본적인 표를 만들었다면 행과 열을 합치는 것도 공부하면 좋은 것이에요. 이 기능은 셀을 합치는 것이므로, 셀을 만드는 <td>, <th> 태그에서 사용하는 기능인 것이에요.

여러 열을 하나로 합치려면 <td>, <th>에서 colspan 속성을 이용해 몇 개의 셀을 가로로 합칠지 결정할 수 있는 것이에요.

 

출처 : HTML5 CSS3 웹 표준의 정석 P.83

 

 

 

행을 합치는 것도 동일한 것이에요. <td>, <th>에서 rowspan 속성을 이용해 세로로 합칠 셀의 개수를 지정해 주면 되는 것이에요.

 

출처 : HTML5 CSS3 웹 표준의 정석 P.84

 

출처 : HTML5 CSS3 웹 표준의 정석 P.84

 

 

 

 

    🔽 <caption>, <figcaption> - 표에 제목 붙이기

<caption은 <table>바로 다음에 이용하는 것이에요. 이 친구를 이용하면 표 제목이 표의 위 쪽 중앙에 표시되는데, <caption> 안에 다른 태그를 이용해 제목을 여러 줄로 표시하거나, Text를 꾸며줄수도 있는 것이에요.

<caption> 표 제목 </caption>​

 

출처 : HTML5 CSS3 웹 표준의 정석 P.85

​

<table border="1">
	<caption>
    	<strong>Modern Browswer</strong>
        
        <p>국내에서 자주 사용하는 모던 브라우저</p>
    </caption>
    
    <tr>
    	<th>브라우저</th>
        <th>제조없체</th>
        <th>다운로드</th>
    </tr>
    
    <tr> ... </tr>
    <tr> ... </tr>
    <tr> ... </tr>
</table>

 

<figcaption에 경우 표에 제목을 붙일수 있는 두번째 방법으로 <figure>과 <figcaption>을 이용할 수 있는 것이에요. <figcaption>은 gigure와 caption의 합성어로 설명 글을 붙이고 싶은 대상을 <figure>로 감싸고, <figcaption>을 이용해 제목이나, 설명 글을 입력할 수 있는 것이에요. 이 때, <caption>은 사용되지 않고, <caption>과 달리 중앙에 정렬되지 않는 것이에요. 또한 <caption>을 이용하면 제목이 위쪽 중앙에 표시되지만, <figcaption>을 <table> 보다 앞에 선언하면 표 위에 제목이 표시되고, </table> 다음에 선언하면 표 아래에 제목이 표시되는 형태가 되는 것이에요.

 

출처 : HTML5 CSS3 웹 표준의 정석 P.86

 

<figure>
	<figcaption>
        <p>국내에서 자주 사용하는 모던 브라우저</p>
    </figcaption>
    
    <table border="1">
    <tr>
    	<th>브라우저</th>
        <th>제조없체</th>
        <th>다운로드</th>
    </tr>
    
    <tr> ... </tr>
    <tr> ... </tr>
    <tr> ... </tr>
    </table>
</figure>

 

 

    🔽  <thead>, <tbody>, <tfoot> - 표 구조 정의

일부 표에서는 제목이 표시된 셀과 자료가 표시된 셀 외에도 표 아래쪽에 합계나 요약 내용을 표시하기도 하는 것이에요. 이런 표의 각 셀은 제목이 있는 부분과 실제 내용이 있는 본문 그리고, 요약부와 표의 구조를 나누어서 이용하는 것 좋은 것이에요. 이 때, 사용하는 태그들은 table의 t와 제목을 의미하는 head, 본문을 의미하는 body, 요약 부분을 의미하는 foot이란 말이 합쳐진 <thead>와 <tbody>, <tfoot>인 것이에요.

출처 : HTML5 CSS3 웹 표준의 정석 P.88

 

출처 : HTML5 CSS3 웹 표준의 정석 P.89

 

이렇게 하면 CSS를 이용해 표의 제목, 요약, 본문에 각각 다른 Style을 지정할 수도 있고, 표의 본문이 길어 한 화면을 넘어가야 할 경우 자바 스크립트를 이용해 제목 부분과 요약은 표 위 아래에 고장하고, 본문만 스크롤 되도록 해 줄 수도 있는 것이에요.

 

출처 : HTML5 CSS3 웹 표준의 정석 P.89

 

<table border="1>
	<caption>제주특별자치도 학교현황(2015.04.01 기준)</caption>
    
    <thead>
    	<tr>
        	<th>구분</th>
           	<th>학교수</th>
            <th>학급수</th>
            <th>학생수</th>
            <th>교원수</th>
       </tr>
   </thead>
   
   <tbody>
   		<tr>
        	<th>유치원</th>
            <td>117</td>
            <td>252</td>
            <td>5,547</td>
            <td>474</td>
        </tr>
        <tr>...</tr>
        <tr>...</tr>
        <tr>...</tr>
        <tr>...</tr>
  </tbody>
  
  <tfoot>
  	<tr>
    	<th>합계</th>
        <td>304</td>
        <td>3,437</td>
        <td>86,954</td>
        <td>6,111</td>
    </tr>
  </tfoot>
</table>

 

 

 

    🔽  <col>, <colgroup> - 여러 열 묶어 Style 지정

표에서 하나의 열에 스타일을 지정하거나, 열(column)을 몇 개씩 묶어 스타일을 한번에 지정해 볼 수도 있는 것이에요.

<col>은 한 열에 있는 모든 셀에 같은 스타일을 적용할 때 사용하는 것으로 닫는 태그가 없는 것이에요.

만약 <col> 태그를 사용해 둘 이상의 열을 묶어 같은 스타일을 지정하려면 span 속성을 이용해 몇 개를 함께 묶어줄지도 결정할 수 있는 것이에요.

<colgroup>을 이용해서도 여러 열을 묶어 스타일을 적용할 수 있는데, <colgroup> 태그 안에 묶는 열의 개수만큼 <col> 태그를 넣어주면 되는 것이에요.

이 때, 주의해야 될 것은 <col> 태그와 <colgroup> 태그는 <caption> 태그 뒤와 <tr>, <td> 태그에 사용해야 한다는 것이에요. 그리고, <colgroup> 안에 <col>을 비롯해 단독으로 사용한 <col> 태그의 개수와 표의 열의 개수가 같아야 하는 것이에요.

 

💡 참고 사항 : 행윽 묶는 태그는?
표를 만들 때 <tr> 태그로 행을 만든 뒤 그 안에 필요한 개수만큼 셀을 만들 수 있다.
이렇게 표를 만들 때 부터 <tr> 태그로 행을 조절하기 때문에 따로 행을 묶는 태그는 없다. 하지만, 표를 만들 때 열을 만드는 태그가 없으므로, 열을 조절할 때는 <col>, <colgroup>를 따로 사용한다.

 

 

이 Code를 보면 58 ~ 62번째 줄에 <th>가 5개가 있고, 이를 꾸며주기 위해 <col>이 5개가 선언되어 있는 것을 볼 수 있는 것이에요.

이 Code에서는 가로를 조절하기 위해 사용한 것이에요. 

 

 

 

 

 

🚀 기타 Tag

    🔽  <template>

이 친구는 추가, 복사될 수 있는 HTML 요소들을 정의할 때 이용하는 것이에요.

<template> 요소 내의 콘텐츠는 페이지가 Load될 때, 즉시 Rendering 되지 않기 때문에 이용자에게는 보이지 않게 되는 것이에요. 하지만, 나중에 자바 스크립트를 사용하여 해당 Contents를 복제한 뒤 보이도록 Rendering을 할 수 있는 것이에요.

<template> 요소는 특정 HTML 요소들을 원하지 않을 때까지 계속해서 다시 사용할 수 있게 해 주는 것이에요. 만약 <template> 요소를 이용하지 않고, 이러한 작업을 수행하려면 자바 스크립트를 이용하여 브라우저가 해당 HTML 요소들을 Rendering하지 않도록, HTML을 작성해야 하는 것이에요.

 

<template>
    <h3>모나리자</h3>
    <img src="/examples/images/img_monalisa.png" alt="모나리자">
</template>

 

지원하는 브라우저 및 버전

출처 :&nbsp;http://www.tcpschool.com/html-tags/template

 

HTML5에서 변경 사항

<template> 태그는 HTML5에서 새롭게 나오게 된 친구인 것이에요.