[HTML] html의 태그(글자, 목록, 표) - 1

HTML TAG

글자 관련 태그

태그명	설명
<h(1~6)>	제목을 입력할 때 사용한다
<br>	줄바꿈(개행)할 때 사용한다
<hr>	가로로 길게 수평선을 그어준다
<p>	문단영역을 나누는 태그로 줄바꿈 입력은 별도의 태그로 지정해야한다
<pre>	줄바꿈 등을 포함하여 입력한 내용 그모습 그대로를 표시해주며 여러 개의 공백도 인식한다
<b> , <strong>	글자를 굵게 표시한다
<mark>	배경부분을 형광펜 표시가 된 것 처럼 노란색으로 표시한다
<i> , <em>	글자를 기울여서 표시한다
<u>	글자에 밑줄을 긋는다
<s>	글자에 취소선을 긋는다
<small>	글자를 작게 표시한다
<blockquote>	다른 사이트의 글을 인용할 경우 사용하며 자동 들여쓰기가 되고 개행을 내포한다
<q>	다른 사이트의 글을 인용할 경우 사용하며 ““표시가 되고 개행을 내포하지 않는다
<sup>	태그로 감싼 내용만 윗첨자로 나타낸다
<sub>	태그로 감싼 내용만 아래첨자로 나타낸다
<abbr>	두문자어와 약어에 사용하며 title속성 지정시 마우스를 가져다 대면 해당 값이 보여진다
<cite>	웹 문서나 포스트에서 참고할 때 사용하며 이텔릭으로 표시된다
<code>	컴퓨터 인식을 위한 소스코드를 담는 태그로 <pre> 태그 내부에 작성한다
<kbd>	키보드입력이나 음성명령 같은 사용자 입력 내용을 나타낸다

제목과 문단을 나누는 태그 예시

• <h(1~6)>

  <h1>h1 태그입니다</h1>
  <h2>h2 태그입니다</h2>
  <h3>h3 태그입니다</h3>
  <h4>h4 태그입니다</h4>
  <h5>h5 태그입니다</h5>
  <h6>h6 태그입니다</h6>
  

  h1 태그입니다

  h2 태그입니다

  h3 태그입니다

  h4 태그입니다

  h5 태그입니다

  h6 태그입니다

  • 제목을 입력할 때 사용한다
  • 각 태그별로 지정된 폰트크기가 있으며 숫자가 작을수록 더 큰 폰트를 가진다

• <pre>, <p>, <br>

  <p>
    문단 영역을 나누는 태그로는 p태그와 pre태그 + h태그들이 있다<br />
    단, p태그는 줄바꿈 입력을 별도의 태그로 지정해야함<br />
    그리고 공백은 한개의 공백만을 표시하기 때문에 기호문구를 작성해야한다
    <br />
    공백 기호 문구 시작&nbsp;&nbsp;&nbsp;끝
  </p>
  
  <pre>
  pre 태그는 여러 공백(     )이 인식 가능하고
    줄바꿈 등을 포함하여 입력한 내용 그대로를 표시해주는 태그
    앞의 탭도 포함해서 띄어서 표시된다
  </pre>
  

  문단 영역을 나누는 태그로는 p태그와 pre태그 + h태그들이 있다
  단, p태그는 줄바꿈 입력을 별도의 태그로 지정해야함
  그리고 공백은 한개의 공백만을 표시하기 때문에 기호문구를 작성해야한다
  공백 기호 문구 시작   끝

  pre 태그는 여러 공백(     )이 인식 가능하고
    줄바꿈 등을 포함하여 입력한 내용 그대로를 표시해주는 태그
    앞의 탭도 포함해서 띄어서 표시된다
  

글자 태그 예시

<b>b : 글자를 굵게 표시해주는 태그</b>
<strong>strong : 글자를 굵게 표시하는 태그</strong>
<em>em : 글자를 기울여서 표시하는 태그</em>
<i>i : 글자를 기울여서 표시하는 태그</i>
<mark>mark : 형광펜</mark> 효과를 주는 태그
<u>u : 글자 아래 밑줄을 표시하는 태그</u>
<s>s : 글자에 취소선을 넣어주는 태그</s>
<small>small : 글자를 작게 표현해주는 태그(잘 사용안됨)</small>
<abbr title="보여줄 속성값">abbreviation</abbr> 단어의 축약형이나 머리글자로만
된 단어를 정의할 때 쓴다(잘 사용안됨) sub : 기본 글자에 <sub>아래첨자</sub>를
나타내는 태그 sup : <sup>윗첨자</sup>를 나타내는 태그이다

b : 글자를 굵게 표시해주는 태그
strong : 글자를 굵게 표시하는 태그
em : 글자를 기울여서 표시하는 태그
i : 글자를 기울여서 표시하는 태그
mark : 형광펜 효과를 주는 태그
u : 글자 아래 밑줄을 표시하는 태그

s : 글자에 취소선을 넣어주는 태그

small : 글자를 작게 표현해주는 태그(잘 사용안됨)
abbreviation 단어의 축약형이나 머리글자로만 된 단어를 정의할 때 쓴다(잘 사용안됨)
sub : 기본 글자에 _아래첨자를 나타내는 태그
sup : ^윗첨자를 나타내는 태그이다

목록 관련 태그

태그명	설명
<ul>	순서 없는 목록생성
<ol>	순서있는 목록생성 type으로 “1”(기본값, 숫자), “A”(대문자알파벳), “a”(소문자알파벳), “I”(대문자로마자), “I”(소문자로마자) 설정 가능
<li>	list의 약자로 목록을 나타낸다
<dl>	용어나 문장에 대한 정의/설명 리스트로 자동 들여쓰기가 된다

목록 태그 예시

<li>목록1</li>
<li>목록2</li>

<ul>
  <li>글자관련</li>
  <li>목록관련</li>
</ul>

<ol type="A" start="5">
  <li>JAVA</li>
  <li>Oracle</li>
  <li>JDBC</li>
</ol>

<dl>
  <dt>이곳은 제목을 작성하는 곳입니다.</dt>
  <dd>여기에는 설명을 작성하면 됩니다</dd>
  <dd>여러줄 작성해도 됩니다.</dd>

  <dt>또 다른 제목 작성하는 곳입니다</dt>
  <dd>여기도 위와 같습니다</dd>
</dl>

목록1

목록2

• 글자관련
• 목록관련

5. JAVA
6. Oracle
7. JDBC

이곳은 제목을 작성하는 곳입니다.

여기에는 설명을 작성하면 됩니다

여러줄 작성해도 됩니다.

또 다른 제목 작성하는 곳입니다

여기도 위와 같습니다

• <ol>

  • 아무 속성도 주지 않았을경우 기본적으로 1부터 시작하는 숫자로 표시된다
  • type=”” 속성을 이용하여 불릿기호를 변경 가능하다
  • start=”” 속성을 이용하여 시작값을 변경할 수 있다, type에 상관없이 숫자로만 값을 넣는다
  • reversed 속성을 명시하면 내용위치는 그대로이되 숫자 순서가 역순으로 표시된다

• <dl>

  • <dt> : 제목을 작성
  • <dd> : 내용을 작성
  • 제목에 비해 내용부분이 자동으로 들여쓰기가 되어서 보여지게 된다

표 관련 태그

태그명	설명
<table>	표를 생성해주는 태그, 행과 열로 이루어져 있다
<tr>	표의 한 행을 나타냄
<th>	표의 제목 셀을 나타냄, 중앙정렬 및 굵게 표시된다
<td>	표의 일반 셀을 나타냄, rowspan(행)/colspan(열) 속성으로 행/열을 병합할 수 있다
<caption>	테이블의 제목을 추가함, 기본위치는 테이블 상단 중앙

 
추가 관련 태그

태그명	설명
<thead>	테이블에 하나만 존재가능
<tbody>	몸체로 테이블에 여러 개 존재 가능
<tfoot>	<thead>태그 뒤에 있어야 하며 하나만 존재 가능
<col>	열에 대한 스타일을 적용할 때 사용
<colgroup>	열을 그룹으로 묶어서 스타일 적용할 때 사용

목록 태그 예시

<table>
  <tr>
    <td colspan="3">열 병합</td>
  </tr>
  <tr>
    <td rowspan="3">행 병합</td>
    <td>내용2</td>
    <td>내용3</td>
  </tr>
  <tr>
    <td>내용4</td>
    <td>내용5</td>
  </tr>
  <tr>
    <td>내용6</td>
    <td>내용7</td>
  </tr>
</table>

열 병합
행 병합	내용2	내용3
	내용4	내용5
	내용6	내용7