HTML5 텍스트 태그/ 목록 태그/ 표 태그

텍스트 태그

• strong : 내용을 강조할 때
• b :단순히 굵게 표시할 때

<strong>강조할 내용</strong>
<b>강조할 내용</b>

 

• em : 내용을 강조할 때 
• i : 단순 기울림

<em>강조할 내용</em>
<i>강조할 내용</i>

 

• abbr : 약자 표시 IoT title 속성을 함께 사용할 수 있음. title의 내용이 마우스 커서를 대면 표시됨

<abbr title="약자로 표시한 내용에 대한 설명">약자</abbr>

 

• cite : 웹문서나 포스트에서 참고 내용 표시 예) 'https://developers.google.com/search/docs/beginner/get-started?hl=ko'

<cite>'https://developers.google.com/search/docs/beginner/get-started?hl=ko'</cite>

 

• kbd : 키보드 입력이나 음성 명령 같은 사용자 입력 내용   예) "F5키를 누릅니다."

<kbd>음성명령 내용</kbd>

 

• small :  작게 표시할 내용을 나타낼 때    예)가격 : 13,000원 부가세 별도 

<small>작게 표시할 내용</small>

 

• sub : 아래 첨자를 나타낼 때 예)  H₂0 에서 2가 아래 첨자에 해당

H<sub>2</sub>0
텍스트<sub>아래 첨자</sub>텍스트

 

• sup : 위 첨자를 나타낼 때 예) E = mc²에서 2에 해당

E = mc<sup>2</sup>
텍스트<sup>위 첨자</sup>텍스트

 

• s : 취소선을 나타낼 때 예)  34,000원

<s>취소선을 표시할 내용</s>

 

• u : 링크 표시 용도가 아니라 단순히 밑줄을 그을 때 예) 태그

<u>밑줄을 그을 텍스트</u>

 

• ruby : 동아시아 글자 표기시 주석 표시 rt와 함께 사용  예)   내용 주석

---

목록태그

1. ul : (unordered list) 순서 없는 목록

1. /li를 끝에 붙이지 않아도 자동으로 인식

<ul>
    <li>텍스트1</li>
    <li>텍스트2</li>
    <li>텍스트3</li>
</ul>

 

2. ol : (ordered list) 순서 있는 목록 

type 속성 값 종류

3. start=를 이용 중간 번호부터 시작 가능
4. 1,a,A
5. 로마 숫자 소문자
6. 로마 숫자 대문자

<ol>
    <li>내용</li>
    <li>내용</li>
    <li>내용</li>
</ol>

 

3. 설명 목록

dl(description list) 제목과 설명이 한 쌍인 목록

dt(description title) 목록의 제목

dd 설명부분

단어/정의 목록, 질문/답 목록 등에서 사용

<dl>
    <dt>dt(description title) 목록의 제목</dt>
    <dd>dd설명부분</dd>
    <dd>단어/정의 목록, 질문/답 목록 등에서 사용</dd>
</dl>

---

표 태그

제목 셀	1행 2열	1행 3열
제목 셀	2행 2열	2행 3열

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

 

NAME	Crystal	CONTACT	01012344567
주소
자기소개

<tbody>
    <tr>
        <th>NAME</th>
        <td>Crystal</td>
        <th>CONTACT</th>
        <td>01012344567</td>
    </tr>
        <tr>
        <th>주소</th>
        <td colspan="3">내용</td>
    </tr>
    <tr>
        <th>자기소개</th>
        <td colspan="3">내용</td>
    </tr>
</tbody>

<td colspan="3"> 행을 3칸 합친다는 의미