(4) HTML 태그 - c

<canvas> : 주로 자바스크립트와 같은 스크립트를 이용하여 그래픽 콘텐츠를 그릴 때 사용함.

<canvas> 요소는 그래픽 콘텐츠를 위한 컨테이너일 뿐 실제로 그림을 그리는 동작은 스크립트를 사용하여 구현합니다.

<canvas> 요소 내부에 존재하는 텍스트는 해당 브라우저가 <canvas> 요소를 지원하지 않을 경우 브라우저 화면에 대신 나타나게 합니다.

 

<canvas id="myCanvas" style="border: 2px solid black">
    이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타납니다!
</canvas>

<canvas id="myCanvas" style="border: 2px solid black">
    이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타납니다!
</canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.fillStyle = "yellow";
    context.fillRect(0,0,150,100);
</script>

 

<caption> : 테이블의 캡션(caption, 테이블이나 사진, 삽화 등에 붙는 설명)을 정의할 때 사용함.

<table> 요소는 단 하나의 <caption> 요소만을 명시할 수 있으며, <caption> 요소는 언제나 <table> 요소 바로 다음에 위치해야 합니다.

<caption> 요소의 콘텐츠는 테이블 바로 위쪽에 가운데 정렬되어 표시되지만, CSS의 text-align이나 caption-side 속성을 사용하여 캡션의 위치나 정렬 방법 등을 변경할 수 있습니다.

<table>
    <caption>분식</caption>
    <tr>
        <th>밥류</th>
        <th>면류</th>
        <th>분식류</th>
    </tr>
</table>

 

 

<center> : 가운데로 정렬되는 텍스트를 정의할 때 사용함.

HTML5에서는 <center> 태그를 더 이상 지원하지 않으며, 대신 CSS를 사용해야 합니다.

 

<p>이 문장은 왼쪽 정렬됩니다.</p>
<center>이 문장은 가운데 정렬됩니다.</center>

 

 

<cite> : 책이나 음악, 영화, 예술 작품 등과 같은 창작물의 제목을 정의할 때 사용함.

<img src="/examples/images/monalisa.jpg" height="300" width="200" alt="monalisa">
<p><cite>Mona Lisa</cite> 레오나르도 다 빈치, 1503년</p>

 

 

<code> : 컴퓨터 코드(code)의 일부분을 나타낼 때 사용함.

이때 컴퓨터 코드의 이루분이란 XML 요소의 이름이나 파일 이름, 컴퓨터 프로그램의 코드, 또는 컴퓨터가 인식할 수 있는 어떤 문자열이라도 될 수 있습니다.

<code> 요소는 HTML5에서도 여전히 지원되지만, 대신 CSS를 사용하면 더욱 다양한 효과를 낼 수 있습니다.

<p>다음은 자바 코드의 일부분입니다.</p>
<code>System.out.println(var);</code>

 

 

<col> : <colgroup> 요소에 속하는 각 열(column)의 속성을 정의할 때 사용함.

<col> 요소는 각 행(row)이나 셀(cell)의 스타일을 반복하지 않고, 열(column)마다 각각 다른 스타일을 적용하고 싶을 때 유용하게 사용할 수 있습니다.

<table>
    <colgroup>
        <col style="background-color: lightgreen">
        <col span="2" style="background-color: yellow">
    </colgroup>
    <tr>
        <th>학번</th>
        <th>이름</th>
        <th>학과</th>
    </tr>
    <tr>
        <td>2006123456</td>
        <td>이민우</td>
        <td>컴퓨터공학과</td>
    </tr>
</table>

 

 

<colgroup> : 테이블에서 서식 지정을 위해 하나 이상의 열을 그룹으로 묶을 때 사용함.

<colgroup> 요소는 각 행(row)이나 셀(cel)의 스타일을 반복하지 않고, 열(column) 전체에 다른 스타일을 적용하고 싶을 때 유용하게 사용할 수 있습니다.

또한, <colgroup> 요소 내부에 <col> 요소를 포함하여 열마다 각각 다른 스타일을 적용할 수도 있습니다.

 

<colgroup> 요소는 <table> 요소의 자식 요소로, 모든 <caption> 요소보다 뒤에 위치해야 하며 모든 <thead>, <tbody>, <tfoot>, <tr> 요소보다는 앞에 위치하여야 합니다.

<table>
    <colgroup span="2" style="background-color: lightpink"></colgroup>
    <tr>
        <th>학번</th>
        <th>이름</th>
        <th>학과</th>
    </tr>
    <tr>
        <td>2006123456</td>
        <td>이민우</td>
        <td>컴퓨터공학과</td>
    </tr>
</table>

 

 

 

 

공부를 목적으로 정리한 게시글입니다.

출처 - http://www.tcpschool.com/html-tags/intro