★다양한 텍스트 관련 태그들
<mark>태그 - 형광펜 효과 내기
- 기본형 : <mark>...</mark>
- 기본 배경색은 노란색 이지만 css의 background-color 속성을 이용해 바꿀 수 있다.
<time>태그 - 날짜 또는 시간 정보 표시하기
- 기본형 : <time 속성= "속성값">...</time>
- 브라우저 화면상으로는 다른 텍스트와 똑같지만 브라우저에게 시간에 대한 정보라는 것을 알려주기 위해 사용
|
날짜만 지정할 때 |
<time datetime="YYYY-MM-DD">...</time>
YYYY = 년도, MM = 월, DD = 일 |
|
시간만 지정할 때 |
<time datetime="hh:mm:ss">...</time>
hh = 24시간제, mm = 분, ss = 초 |
|
날짜와 시간을 지정할 때 |
<time datetime="YYYY-MM-DDThh:mm:ssZ">...</time>
T = 날짜와 시간 구분
Z = 그리니치 시간대를 나타내는 Zulu의 약자 |
<strong>, <em>태그 - 중요한 내용 강조하기
- 기본형 : <strong>...</strong> , <em>...</em>
- <strong>태그는 굵게 표시, <em>태그는 이탤릭체 표시
<b>태그 - 굵게 표시하기
- 기본형 : <b>...</b>
- 강조의 의미가 아닌 텍스트에서 <b>태그 사용 (강조해야 하는 내용인 경우 <strong>태그 사용)
<i>태그 - 이탤릭체 표시
- 기본형 : <i>...</i>
- 강조의 의미가 아닌 텍스트에서 <i>태그 사용 (강조해야 하는 내용인 경우 <em>태그 사용)
<q>태그 - 인용한 내용 표시하기
- 기본형 : <q>...</q>
- <q>태그 사용 시 자동으로 (" ")가 붙여짐
- <blockquote>태그는 블록 레벨의 태그이므로 자동으로 줄바꿈과 들여쓰기가 적용된다.
- 특정 사이트의 내용을 인용한 경우 cite속성 사용
<span>태그 - 줄바꿈 없이 영역 묶기
- 기본형 : <span>...</span>
- 텍스트 단락 내에서 줄바꿈 없이 일부 텍스트만 묶어서 스타일을 적용하고 싶을 때 사용
기타 태그들
- <kbd> : 키보드 입력이나 음성 명령과 같이 사용자 입력 내용 표시
- <code> : 파일 이름이나 컴퓨터 프로그램 등 컴퓨터가 인식할 수 있는 소스 표시
- <samp> : 프로그램 처리 결과 표시
- <sup> : 수학 식 표현 시 텍스트 위 첨자 표현
- <sub> : 수학 식 표현 시 텍스트 아래 첨자 표현
- <s> : 특정 텍스트를 제거하는 취소선 표시
★목록을 만드는 태그
<ul>, <ol>, <li>태그 - 목록 만들기
- 기본형 : <ul>
<li>...</li>
<li>...</li>
</ul>
<ol 속성="속성값">
<li>...</li>
<li>...</li>
</ol>
- <ul>+<li> : 순서 없는 목록(리스트 앞이 불릿으로 표현)
- <ol>+<li> : 순서 있는 목록(리스트 앞이 번호로 표현)
- <ol>의 경우 태그의 type속성을 이용해 앞에 붙는 숫자를 바꿀 수 있다.
<ol type="▲" start="△">...</ol>
△(= 1,2,3...) : 시작하는 번호 수정
(ex. ▲=a, △=3인 경우 리스트 번호가 c부터 시작)
|
▲(키워드) |
설명 |
|
1 |
숫자(기본값) |
|
a |
영문 소문자 |
|
A |
영문 대문자 |
|
ⅰ |
로마 숫자 소문자 |
|
Ⅰ |
로마 숫자 대문자 |
<dl>, <dt>, <dd>태그 - 정의 목록 만들기
- 기본형 : <dl>
<dt>제목</dt>
<dd>설명</dd>
</dl>
- 제목과 그에 대한 설명으로 이루어진 정의 목록 만듦
※실습하기※
<!DOCTYPE html>
<html>
<body>
<p>This is <mark>mark</mark> tag.</p>
<time datetime="2015-01-24T04:19:00">Today is Saturday!</time>
<p>This tag is <strong>strong</strong> tag.</p>
<p>This tag is <em>em</em> tag.</p>
<p>This tag is <b>b</b> tag.</p>
<p>This tag is <i>i</i> tag.</p>
<p>Today saying q>Well done is better than well said.</q></p>
<article>
<ul>
<li>photo</li>
<li>video</li>
<li>music</li>
</ul>
<ol type="a" start="1">
<li>photo</li>
<li>video</li>
<li>music</li>
</ol>
<dl>
<dt>HTML5</dt>
<dd>Hyper Text Markup Language 5</dd>
</dl>
</article>
</body>
</html>
▲결과
★표 관련 태그
<tabe>태그 - 표 만들기
- 기본형 : <table>
행과 열을 구성하는 여러 태그들
</table>
|
태그 |
설명 |
|
<caption> |
캡션 넣기 |
|
<tr> |
행 추가 |
|
<td> |
셀 추가 |
|
<th> |
제목 셀 추가 |
|
<col> |
여러 줄에 걸친 열 하나 지정 |
|
<colgroup> |
col요소를 그룹으로 묶기 |
|
<thead> |
열을 그룹으로 묶어 표의 헤더로 지정 |
|
<tbody> |
열을 그룹으로 묶어 표의 본문으로 지정 |
|
<tfoot> |
열을 그룹으로 묶어 표의 푸터로 지정 |
※실습하기※
<!DOCTYPE html><html>
<meta charset="utf-8">
<head>
<style>
table {text-align : center;} <!--표 스타일 설정-->
</style>
</head>
<body>
<table border="1" cellspacing="0"> <!--표 테두리 설정-->
<caption>성적표</caption>
<thead style="background-color:lightgray;"> <!--표 헤더 배경색 설정-->
<tr>
<td>이름</td>
<td>바보</td>
<td>학번</td>
<td>12345</td>
<td>평균</td>
<td>90점</td>
</tr>
</thead>
<tbody>
<colgroup span="4" style="background-color:pink;"></colgoup> <!--4열까지 배경색 설정-->
<tr>
<th colspan="2">과목</th>
<th colspan="2">점수</th>
<td colspan="2" rowspan="4"></td>
</tr>
<tr>
<td colspan="2">국어</td>
<td colspan="2">80점</td>
</tr>
<tr>
<td colspan="2">영어</td>
<td colspan="2">90점</td>
</tr>
<tr>
<td colspan="2">수학</td>
<td colspan="2">95점</td>
</tr>
</tbody>
<tfoot style="background-color:skyblue;"> <!--표 푸터 배경색 설정-->
<tr>
<td>반 석차</td>
<td>5/20</td>
<td>전체 석차</td>
<td>20/100</td>
<td>등급</td>
<td>3등급</td>
</tr>
</tfoot>
</table>
</body>
</html>
▲결과
>>>만들 행과 열 갯수를 먼저 지정한 후 구조를 미리 만들어 놓고 시작하면 헷갈리지 않고 만들 수 있다.
위의 예제의 경우 6행 6열의 표를 미리 만들어 놓은 후 수정해 나가면 된다.
