HTML 태그 요약2

HTML 태그 요약2

 

2020.11.29 - [Programming] - HTML (Hyper Text Markup Language)

HTML (Hyper Text Markup Language)

 

<HTML에서 그림과 링크표현>

태그명	기능	주요 속성	활용 예시
<a>	하이퍼링크를 삽입하는 태그로 특정 위치로 이동할 수 있음	href, target, download	<a href=”http://www.naver.com” target=”_blank”> 네이버 </a> <a href=”sky.jpg” download> 하늘 이미지 다운로드 </a>
<img>	이미지를 삽입하기 위한 태그, 종료 태그 없이 시작태그만 사용함	src, width, height, alt, usemap	<img src=”sky.jpg” width=”100” height=”100” alt=”하늘”>

 

<HTML에서 테이블 표현>

테이블 기본 예시

<table>
  <caption style="text-align:right">내 정보</caption>
  <tr>
    <th>이름</th>
    <th>김철수</th>
  </tr>
  <tr>
    <td>나이</td>
    <td>20</td>
  </tr>
</table>
<br>

태그명	기능	주요 속성	활용 예시
<caption>	테이블 상단에 표 전체에 해당하는 제목을 표시할 때 사용되는 태그. table 시작 태그의 바로 다음에 위치해야 함		위 기본 예시 참조
<col>	colgroup 태그 내에서 서로 다른 포맷팅을 정의하기 위해서 사용되는 태그		<colgroup> <col style=”background-color:blue”> <col style=”background-color:red”> </colgroup>
<colgroup>	열(column) 단위의 스타일을 지정하기 위해서 사용되는 태그		<colgroup> <col style=”background-color:blue”> </colgroup>
<table>	테이블을 정의하는 태그. tr, td 태그와 같이 사용됨		위 기본 예시 참조
<tbody>	테이블 콘텐츠를 그룹핑하기 위해 사용되는 태그로 본문 부분을 그룹핑함		<tbody> <tr> <td>국어</td> <td>1등급</td> </tr> </tbody>
<td>	테이블에서 텍스트나 이미지 같은 데이터가 표시되는 표준 셀을 만들 때 사용되는 태그. 반드시 tr 태그 내에서 사용함	rowspan, colspan	위 기본 예시 참조
<tfoot>	테이블 콘텐츠를 그룹핑하기 위해 사용되는 태그로 꼬리말 부분을 그룹핑함		<tfoot> <tr> <td>평균</td> <td>1등급</td> </tr> </tfoot>
<th>	테이블 내부에서 행 또는 열의 제목을 표시하는 헤더 셀을 지정하는 태그. td와 마찬가지로 tr 태그 내에 존재해야 함	rowspan, colspan	위 기본 예시 참조
<thead>	테이블 콘텐츠를 그룹핑하기 위해 사용되는 태그로 헤더 부분을 그룹핑함		<thead><tr> <th> 과목 </th> <th> 등급 </th> </tr></thead>
<tr>	테이블의 행(row)을 정의하는 태그. td, tr 태그와 함께 사용해야 함		위 공통예시 참조

 

<HTML에서 멀티미디어 표현>

태그명	기능	주요 속성	활용 예시
<audio>	웹 페이지에서 오디오를 재생하기 위한 태그	autoplay, controls, loop, muted, preload, src	<audio src="movie.mp3" controls autoplay loop> 브라우저가 audio 태그를 지원하지 않습니다. </audio>
<source>	audio 태그와 video 태그의 하위 태그로서 src 속성의 역할을 대신하는 것으로 여러 개의 오디오 파일 형식을 지정하기 위해서 audio 내에서 여러 개를 사용하는 태그	src, srcset, media, type	<audio controls> <source src="movie.mp3" type="audio/mpeg"> 브라우저가 audio 태그를 지원하지 않습니다.</audio>
<track>	여러 언어나 비디오 설명을 제공하거나 또는 자막이나 캡션같이 시간이 지정된 텍스트 파일을 지정하기 위해 사용되는 태그	default, kind, label, src, srclang, subtitles, captions, descriptions, chapters, metadata	<track src=”video_ko.vtt” srclang=”ko” label=”자막” kind=”subtitles” default>
<video>	비디오를 재생하기 위한 태그	autoplay, controls, loop, muted, preload, src, width, height, poster	<video src=”bunny.mp4” controls> 브라우저가 video 태그를 지원하지 않습니다.</video>

 

<HTML에서 입력양식>

입력 기본 소스코드

<form action="/action_page.php">
 <fieldset>
  <legend>내 정보:</legend>
  <label for="fname">이름:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Submit">
 </fieldset>
</form>

태그명	기능	주요 속성	활용 예시
<button>	클릭할 수 있는 버튼을 정의하는 태그	autofocus, disabled, form, formactin, name, type, value	<button type="button">클릭하세요</button>
<datalist>	input 태그의 텍스트 타입에 대한 옵션 목록을 지정하는 것으로 텍스트 타입이 포커스를 받으면 미리 입력한 옵션이 드롭다운 형태로 표시됨		<datalist id="Company"> <option value="Samsung"><option value="SK"> </datalist>
<fieldset>	폼에서 사용되는 관련 요소들을 그룹핑할 때 사용되는 태그, 테두리가 표시됨	name, form, disabled	위 기본 예시 참조
<form>	사용자로부터 다양한 형태의 데이터를 입력 받기 위해 필요한 요소들을 담는 컨테이너 역할을 수행하는 태그	action, method, name, accept-charset, autocomplete, enctype, novalidate, target	<form action="index.html" method="post">
<input>	사용자가 데이터를 입력할 수 있는 입력타입을 지정하는 태그	accept, alt, height, width, src, autocomplete, autofocus, checked, disabled, form, pattern, placeholder, required,	<input type="text" id="fname" name="fname">
<label>	input 태그에 대한 레이블을 정의하는 태그	for, form	위 기본 예시 참조
<legend>	fieldset 태그 내에서 사용되는 것으로 그룹핑되는 관련 요소들에 대한 제목을 표시할 때 사용됨		위 기본 예시 참조
<optgroup>	select 태그 내에서 연관된 항목들을 그룹핑하기 위해 사용됨	disabled, label	아래 select 태그 참조
<option>	선택 목록에서 옵션을 정의하기 위한 것으로 datalist와 select 태그 내에서 사용되는 하위 태그	disabled, label, selected, value	아래 select 태그 참조
<select>	드랍다운 리스트를 만들 때 사용하는 태그. <option> 태그와 사용됨	autofocus, disabled, form, multiple, required, size	<select id="languages"> <optgroup label="web"> <option value="html">HTML</option> <option value="css">CSS</option></optgroup> </select>
<textarea>	사용자로부터 여러 줄에 해당하는 텍스트를 입력받기 위한 태그	autofocus, cols, dirname, disabled, maxlength, name, placeholder, wrap	<textarea rows="5" cols="50" autofocus>여러 줄을 입력할 수 있는 textarea 태그입니다</textarea>