Publishing/HTML

텍스트 관련 태그 - html 배우기

oodada 2023. 11. 18. 19:48

텍스트 관련 태그

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
티스토리 친구하기