[HTML/CSS] 텍스트 관련 태그들

텍스트를 덩어리로 묶어주는 태그

• <p></p>는 줄바꿈 없이 텍스트를 한 줄로 표시하는데 텍스트 줄이 브라우저 창의 너비보다 길어질 경우 줄이 자동으로 바뀐다.
• <hr> 태그는 horizintal의 줄임말로, 수평(가로) 줄을 삽입할 때 사용한다 보통 분위기 전환을 할 때 사용한다.
• <blockquote> 인용문을 넣을 때 사용한다.
• <pre> 태그를 사용할 경우, 소스에 표시한 공백이 브라우저에 그대로 표시된다. (preformat의 줄임말t)

텍스트를 한 줄로 표시하는 태그

• <strong> 태그, <b> 태그 -> 굵게 표시하기
  • 차이점 : <strong> 태그는 여러번 겹쳐 쓸 수 있고 보통 경고나 주의 사항처럼 중요한 내용을 강조할 때 사용한다. <b> 태그는 단순히 굵게 표현할 때 사용한다.
• <em> 태그, <i> 태그 -> 이탤릭체로 표시하기
  • 차이점 : <em> : 이탤릭체로 강조할 때 사용한다. <i> : 단순히 이탤릭체로 표현할 때 사용한다.
• <q> : 인용내용 표시
  • 차이점 : <q> 태그는 inline 형태로 줄 바꿈이 없이 표시되고 인용 내용을 ""따옴표를 붙여 표시된다. <blockquote> 태그는 block 형태이기 때문에 내용이 줄이 바뀌어 나타난다.
• <mark> : 형광펜 효과
• <span> : 줄바꿈 없이 영역 묶기
  • <span> 태그는 태그 자체로는 아무 의미가 없지만 텍스트 단락 안에서 줄바꿈 없이 일부 텍스트만 묶어 스타일을 적용할 때 사용한다.
• <ul> 태그, <li> 태그 : 순서가 필요하지 않는 목록(unordered list)을 만들 때는 <ul> 태그를 사용하고 <ul> 태그 안에 <li> 태그(lsit item)를 사용해 각 항목을 표시한다.
• <ol> 태그, <li> 태그 : 항목을 나열하되 순서가 필요한 목록(ordered list)을 만들 때는 <ol> 태그를 사용하고 <li> 태그를 사용해 각 항목을 표시한다.
  • type 속성을 사용하면 숫자의 종류를 다양하게 조절할 수 있다. ex) <ol type = "a"> -> 소문자로 표현
• </li> 태그를 사용하지 않고 <li>태그만 사용할 겨우 다음에 오는 <li> 태그가 </li>로 간주하기 때문에 <li></li> 처럼 사용 가능하다.
• <dl>, <dt>, <dd> 태그 -> 설명 목록 태그
  • 사전 구성처럼 '제목'과 '설명'이 한 쌍인 설명 몰록( description list)을 만든다.
  • <dl> : 목록
  • <dt> : 제목
  • <dd> : 설명

  표를 만드는 태그

• <table> : 표 전체 윤곽을 잡는다.
• <tr> : 표의 행 수를 정한다.
• <th> : 표의 제목 셀을 만든다. (셀의 중앙에 배치되고 굵게 표시된다.)
• <td> : 표의 데이터를 삽입한다.

colspan, rowspan 속성

• colspan : 열의 셀을 합친다
• rowspan : 행의 셀을 합친다
• ex)

<td colspan = "합칠 셀의 개수">내용</td>
<th colspan = "합칠 셀의 개수">내용</th>

<td rowspan = "합칠 셀의 개수">내용</td>
<th rowspan = "합칠 셀의 개수">내용</th>

<caption> 태그, <figcaption> 태그 -> 표에 제목 붙이기

• <caption>
  1. <table> 바로 다음에 사용한다.
  2. <caption> 태그를 사용한 표 제목은 표의 위쪽 중앙에 표시된다.
  3. <caption> 태그를 사용해 제목을 여러 줄로 표시하거나 텍스트를 꾸밀 수 있다.
• <figure>, <figcaption>
  1. <figcaption> 태그는 figure와 caption의 합성어로 설명 글을 붙이고 싶은 대상을 <figure> 태그로 감싼 후 <figcaption> 태그를 이용해 제목이나 설명글을 입력한다.
  2. <caption> 태그와 달리 중앙에 정렬되지 않는다.
  3. <figure> 태그는 <table> 태그보다 앞에 사용된다.

aria-describedby 속성 - 표에 대한 설명 제공

• ex)

 <p id = "summary">다음 표는 HTML5를 지원하는 모던(Modern Browser)를 정리한 것입니다. 최신 버전일 수록 HTML를 좀 더 많이 지원하기 때문에 
        최신 버전을 다운로드하는 것이 좋습니다.
    </p>
    <table aria-describledy = "summary">
        <caption>Mordern Browser</caption>

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

• <thead> : 제목 부분
• <tbody> : 본문
• <tfoot> : 요약 부분
• ex)

<thead>
  <tr>...<tr>
</thead>
<tbody>
  <tr>...<tr>
</tbody>
<tfoot>
  <tr>...<tr>
</tfoot>

<col>, <colgroup> 태그 - 여러 열 묶어 스타일 지정

• <col> : 한 열에 있는 모든 셀에 같은 스타일을 적용, 닫는 태그가 없다.
• <colgroup> : 여러 열에 있는 모든 셀에 같은 스타일을 적용, 닫는 태그 있음
• <col> 태그와 <colgroup> 태그는 <caption> 태그 뒤와 <tr>, <td> 태그 전에 사용해야 한다.
• 표의 열의 개수가 같아야 한다.
• ex)

<col>
----------------------------------------------------------
<colgroup>
  <col>
  ...
</colgroup>