반응형
텍스트 관련 태그
Headings
https://www.w3schools.com/html/html_headings.asp
제목을 나타내는 태그
- 크기 : h1 > h2 > h3 > h4 > h5 > h6
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>Paragraphs (단락)
https://www.w3schools.com/html/html_paragraphs.asp
- block 태그
<p> 태그
문단을 나타내는 태그
<p>문단입니다.</p><br> 태그
줄바꿈을 나타내는 태그로 단일 태그
<p>문단입니다.<br />문단입니다.</p><blockquote> 태그
인용문을 나타내는 태그로 다른 텍스트보다 들여쓰기가 되어있음
<blockquote>인용문입니다.</blockquote><hr> 태그
수평선을 나타내는 태그로 단일 태그
<hr /><pre> 태그
소스에 작성한 그대로 표현하는 태그
<pre>
미리 서식을 지정한 텍스트입니다.
미리 서식을 지정한 텍스트입니다.
</pre>실습 예제
<body>
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>
<p>문단입니다.</p>
<p>문단입니다.<br />문단입니다.</p>
<blockquote>인용문입니다.</blockquote>
<hr />
<pre>
미리 서식을 지정한 텍스트입니다.
미리 서식을 지정한 텍스트입니다.
</pre>
</body>- inline 태그
<span> 태그
특정 부분을 묶어서 스타일을 적용할 때 사용하는 태그
<span>span 태그</span><strong> 태그
강조를 나타내는 태그
<strong>강조</strong><b> 태그
굵은 글씨를 나타내는 태그
<b>굵은 글씨</b><em> 태그
흐름상 특정 부분을 강조하고 싶을 때 나타내는 태그
<em>강한 강조</em><i> 태그
이탤릭체를 나타내는 태그
<i>이탤릭체</i><mark> 태그
형광펜을 칠한 것처럼 나타내는 태그
<mark>형광펜</mark><q> 태그
인용문을 나타내는 태그
<q>인용문</q>실습 예제
<body>
<span>span 태그</span>
<strong>강조</strong>
<b>굵은 글씨</b>
<em>강한 강조</em>
<i>이탤릭체</i>
<mark>형광펜</mark>
<q>인용문</q>
</body>list (목록)
<ul> 태그
https://www.w3schools.com/html/html_lists_unordered.asp
순서가 없는 목록을 나타내는 태그
<ul>
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
</ul><ol> 태그
https://www.w3schools.com/html/html_lists_ordered.asp
순서가 있는 목록을 나타내는 태그
<ol>
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
</ol><dl> 태그
https://www.w3schools.com/html/html_lists_other.asp
설명 목록을 나타내는 태그
<dl>
<dt>제목1</dt>
<dd>설명1</dd>
<dt>제목2</dt>
<dd>설명2</dd>
<dt>제목3</dt>
<dd>설명3</dd>
</dl>
<dl>
<dt>제목1</dt>
<dd>설명1</dd>
</dl>
<dl>
<dt>제목2</dt>
<dd>설명2</dd>
</dl>
<dl>
<dt>제목3</dt>
<dd>설명3</dd>
</dl>실습 예제
<body>
<ul>
<li>
목록1
<ul>
<li>목록1-1</li>
<li>목록1-2</li>
<li>목록1-3</li>
</ul>
</li>
<li>
목록2
<ul>
<li>목록2-1</li>
<li>목록2-2</li>
<li>목록2-3</li>
</ul>
</li>
<li>
목록3
<ul>
<li>목록3-1</li>
<li>목록3-2</li>
<li>목록3-3</li>
</ul>
</li>
</ul>
## 표를 만드는 태그
</body>표를 만드는 태그
<table> 태그
https://www.w3schools.com/html/html_tables.asp
표를 나타내는 태그
<table>: 표 전체를 감싸는 태그<caption>: 표의 제목을 나타내는 태그<colgroup>: 열을 그룹화하는 태그<col>: 열을 나타내는 태그<thead>: 표의 머리글을 나타내는 태그<tbody>: 표의 본문을 나타내는 태그<tfoot>: 표의 바닥글을 나타내는 태그<tr>: 행을 나타내는 태그<th>: 제목 셀을 나타내는 태그<td>: 셀을 나타내는 태그
<table>
<caption>
표 제목
</caption>
<colgroup>
<col />
<col span="2" style="width: 30%; background-color: #D6EEEE" />
</colgroup>
<thead>
<tr>
<th>제목1</th>
<th>제목2</th>
<th>제목3</th>
</tr>
</thead>
<tbody>
<tr>
<td>내용1</td>
<td>내용2</td>
<td>내용3</td>
</tr>
<tr>
<td>내용4</td>
<td>내용5</td>
<td>내용6</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>하단1</td>
<td>하단2</td>
<td>하단3</td>
</tr>
</tfoot>
</table>실습예제
| 중간고사 | 국어 | 수학 | 영어 |
| A | 80 | 90 | 100 |
| B | 90 | 90 | 90 |
| 평균 | 85 | 90 | 95 |
colspan / rowspan
행과 열을 합치는 속성
<table>
<tr>
<td colspan="2">내용1</td>
<td>내용2</td>
</tr>
<tr>
<td>내용3</td>
<td>내용4</td>
<td rowspan="2">내용5</td>
</tr>
<tr>
<td>내용6</td>
<td>내용7</td>
</tr>
</table>
실습예제
| 과목 | 국어 | 수학 | ||
| 1학기 | 2학기 | 1학기 | 2학기 | |
| 1학년 | 100 | 95 | 97 | 98 |
| 2학년 | 98 | 95 | 85 | 89 |
| 3학년 | 88 | 98 | 97 | 88 |
반응형
'Publishing > HTML' 카테고리의 다른 글
| 웹사이트(홈페이지) 제작 기본 프로세스 (0) | 2023.11.19 |
|---|---|
| 이미지와 하이퍼링크 - html 배우기 (0) | 2023.11.18 |
| html 시작, 기본 구조, head 설정하기 - html 배우기 (0) | 2023.11.18 |
| html include/import (0) | 2023.07.24 |
| 사이트 기본 setting (0) | 2020.08.11 |