HTML 텍스트 관련 태그

 

<hn> 태그 - 제목 표시

기본형 : <hn> 제목 </hn>

각 웹 콘텐츠 영역에서 제목을 표시할 때 사용하는 태그

크기 : h1 > h2 > h3 > h4 > h5 > h6

 

<p> 태그 - 택스트 단락

기본형 : <p> 텍스트 </p>

입력한 내용 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어짐

 

<br> 태그 - 줄 바꾸기

줄을 바꿀 위치에 <br> 태그를 사용. 닫는 태그가 없음

 

<blockquote> 태그 - 인용문 넣기

기본형 : <blockquote> 인용 내용 </blockquote>

다른 텍스트보다 안으로 들여 써짐

 

<hr> 태그 - 분위기 전환

기본형 : <hr>

주제가 바뀔 때 분위기 전환. 수평 줄 생김

 

<pre> 태그 - 입력한 그대로 표시

기본형 : <pre> 텍스트 </pre>

소스에 표시한 공백이 그대로 표시됨. 형태를 유지하려할 때 유용함.

프로그램 소스를 표시할 때 유용함

 

<strong> , <b> - 굵게 표시

<strong > 는 중요한 내용이라서 강조해야 할 때 사용한다. <b> 태그는 단순히 굵게 표시할 때 사용한다.

 

<em> , <i> - 이탤릭체로 표시하기

<em> 은 흐름상 특정 부분을 강조하고 싶을 때 사용한다. <i> 태그는 단순히 이탤릭체로 표시할 때 사용한다.

 

<q> 태그 - 인용 내용 표시

줄바꿈 없이 다른 내용과 한 줄에 인용 내용을 표시한다.

인용 내용 앞뒤에 따옴표("")가 추가된다.

 

<mark> - 형광펜 효과

<mark> 태그로 묶은 부분의 배경색이 노랑으로 표시됨. 기본적으로 노란색 배경이 표시되지만 css 를 같이 사용하면 다른 색으로 사용 가능하다

 

<span>, <div> - 영역 묶기

<span> 줄 안에서 (인라인) 묶기를 할 수 있다. 줄바꿈 없이 사용할 수 있다.

<div> 줄 바꿈을 포함하여 블록을 단락으로 묶을 수 있다. 

 

<ul>, <li> - 순서 없는 목록

각 항목 앞에 불릿이 붙여짐

css 의 list-style-type 속성으로 불릿 수정

 

<ol>, <li> - 순서 목록

각 항목 앞에 숫자가 붙여짐

<ol> 태그의 속성

- tpye 속성 : 불릿 앞의 숫자 조정

- start 속성 : 중간 번호부터 수정

- reserved 속성 : 역순으로 표시 

 

<dl>, <dt>, <dd> - 설명 목록

제목과 그에 대한 설명으로 이루어진 목록이다.

<dl> 과 <dt>, <dd> 태그 사용

하나의 <dt>에 여러 개의 <dd>값을 가질 수 있다.

 

 

표 만들기

 

<table>, <tr>, <td> - 표를 만드는 태그

<tr> 은 행을 만드는 태그이며, <td> 는 열을 만드는 태그이다. <th> 는 제목을 만드는 태그이다.

<table>
    <tr>
        <th>제목 셀</th>
        <td>1행 2열</td>
        <td>1행 3열</td>
    </tr>
    <tr>
        <th>제목 셀</th>
        <td>2행 2열</td>
        <td>2행 2열</td>
    </tr>
</table>

 

 

<colspan> 행 합치기

<table border="1">
    <colgroup>
        <col style="width:70px;">
        <col style="width:100px;">
        <col style="width:70px;">
        <col style="width:100px;">
    </colgroup>
    <tr>
        <th>이름</th>
        <td></td>
        <th>연락처</th>
        <td></td>
    </tr>
    <tr>
        <th>주소</th>
        <td colspan="3"></td>
    </tr>
</table>

 

 

<rowspan> 열 합치기

<table border="1">
    <colgroup>
        <col style="width:70px;">
    </colgroup>
    <tr>
        <td>1행 1열</td>
        <td>1행 2열</td>
        <td>1행 3열</td>
        <td>1행 4열</td>
    </tr>
    <tr>
        <td rowspan="2">2행 1열</td>
        <td>2행 2열</td>
        <td rowspan="2">2행 3열</td>
        <td>2행 4열</td>
    </tr>
    <tr>
        <td>3행 1열</td>
        <td>3행 2열</td>
    </tr>
</table>

 

 

<caption> 표 제목을 만드는 태그

제목이 위쪽 중앙에 표시됨

<table border="1">
    <caption>
        <strong>국내에서 자주 사용하는 모던 브라우저</strong>
    </caption>
    <tr>
        <td>1행 1열</td>
        <td>1행 2열</td>
        <td>1행 3열</td>
        <td>1행 4열</td>
    </tr>
</table>

 

 

<figure>, <figcaption> - 표 제목을 만드는 태그

표뿐만 아니라 제목을 붙이려고 하는 어떤 대상에서도 사용할 수 있다. 이미지, 동영상 등 모두 가능하다.

<figcaption> 위치에 따라 표의 위나 아래에 제목이 표시된다.

<figure>
    <figcaption>
        <b>표 테스트 입니다.</b>
    </figcaption>
    <table border="1">
        <tr>
            <td>1행 1열</td>
            <td>1행 2열</td>
            <td>1행 3열</td>
            <td>1행 4열</td>
        </tr>
    </table>
</figure>

 

 

<thead>, <tbody>, <tfoot> 표 구조 정의하기

머리말, 본문, 꼬리로 표 구조를 정의할 때 사용하는 태그이다.

<table border="1">
    <thead>
        <tr>
            <th>머리말 행</th>
            <td>구분 1</td>
            <td>구분 2</td>
            <td>구분 3</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>0</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>꼬리 0</td>
            <td>꼬리 1</td>
            <td>꼬리 2</td>
            <td>꼬리 3</td>
        </tr>
    </tfoot>
</table>

 

 

<col> , <colgroup> - 열끼리 묶어 스타일 지정하기

<tr>, <td> 태그 전에 사용해야 한다.

<col> 태그는 한 열에 있는 모든 셀에 같은 스타일을 적용하려고 할 때 사용한다. 닫는 태그가 없다.

<colgroup> 태그로 여러 열을 묶을 수도 있다. 

<col> 태그에 span 속성을 사용해 여러 열을 묶을 수 있다.

<col> 태그의 개수와 표의 열의 개수가 같아야 한다.

<table border="1">
    <colgroup>
        <col style="width: 50px;">
        <col span="2" style="background-color: aqua; width: 50px;">
    </colgroup>
    <tr>
        <td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td>
    </tr>
</table>