02 텍스트 관련 태그들

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

<hn> : 제목 표시하기

• 제목 크기에 따라 <h1> ~ <h6> 태그 사용

<p> : 단락 만들기

• ‘단락’이란 앞뒤에 줄바꿈이 있는 텍스트 덩어리를 말한다.
• </p>를 만날 때까지 줄바꿈 없이 텍스트를 한 줄로 표시하며, 브라우저 창의 너비보다 길어질 경우 줄이 자동으로 바뀐다.

<br> : 줄 바꾸기

• 줄 바꿈. 닫는 태그가 없다.

<hr> : 수평 줄 넣기

• 분위기 전환을 위한 가로줄 삽입. CSS를 이용해 선을 없앨 수 있다.
• 닫는 태그가 없다.

<blockquote> : 인용문 넣기

• 다른 블로그나 사이트의 글을 인용.

<blockquote> 인용 내용 </blockquote>

• 들여쓰기가 적용된다.

<pre> : 입력하는 그대로 화면에 표시하기

• HTML에 공백을 여러 개 넣어도 브라우저에서 하나로 보이지만, <pre> 태그 안에 있는 공백은 모두 표시된다.
• <code>, <samp>, <kbd> 는 <pre> 태그와 함께 사용됨.

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

태그를 적용해도 줄바꿈 없이 텍스트를 표시하는 ‘인라인 레벨’ 태그. 닫는 태그를 생략할 수 없다.

<strong> <b> : 굵게 표시하기

• 경고나 주의사항처럼 강조해야 하는 내용은 <strong>. 낭독기에서도 강조됨.
• 단순히 문서에서 굵게 표시하고 싶은 내용은 <b>

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

• 중요한 부분을 강조하고 싶다면 <em>, 단순 이탤리첵 표기할 땐 <i>

<q> : 인용 내용 표시하기

• 인라인 태그이기 때문에 들여쓰기가 안되고 한 줄로 표시된다.
• 인용 내용에 따옴표가 붙는다.

<h1>샘플 제목</h1>
<p>이 글은 <q cite="https://yena.io">내 블로그</q>에서 가져왔다.</p>

이 글은 내 블로그에서 가져왔다.

<mark> : 형광펜 효과

• 선택한 부분의 배경색이 노란색이 됨.
• CSS의 background-color 속성을 통해 색상 변경 가능.

<span> : 줄바꿈 없이 영역 묶기

• 자체적으로는 의미가 없지만, 단락 안에서 일부 텍스트만 묶어서 스타일을 적용할 때 사용된다.

<p>텍스트의 <span style="color:blue;">일부만</span> 스타일을 적용하고 싶을 때
  span 태그를 쓴다고 합니다.</p>

텍스트의 일부만 스타일을 적용하고 싶을 때 span 태그를 쓴다고 합니다.

<ruby> : 동아시아 글자 표시

• 동아시아 국가의 주석을 표시.
• <ruby> 태그 안에 <rt> 태그로 표시한다.

<p>일본어에 사용되지만 <ruby>한국어는<rt>위대한</rt></ruby> 그런게 필요 없죠.</p>

일본어에 사용되지만 한국어는위대한 그런게 필요 없죠.

기타 텍스트 관련 태그

02-3 목록을 만드는 태그

<ul> <li> : 순서가 없는 목록 만들기

• Unordered List. <ul> 태그 안에 <li> 태그로 항목을 표시.

<ul>
    <li>항목1 입니다</li>
    <li>li 태그를 열심히 써줍니다</li>
</ul>

<ol> <li> : 순서 목록 만들기

• Ordered List. <ol> 태그 안에 <li> 태그로 항목을 표시.
• 순서와 관련된 속성을 바꿀 수 있다.
  1. type - 항목 앞에 붙는 문자. 1 a A i I 중 숫자가 기본이다.
  2. start - 중간 번호부터 시작할 수 있다.
  3. reversed - 항목을 역순으로 표시

  여러 항목을 나열할 때 </li> 태그의 생략이 가능하다.

  <ul>
    <li>1일차
      <ol type="a">
        <li> 해녀박물관</li>
        <li> 낚시 체험</li>
    </li>
    <li>2일차
      <ol type="a" start="3">
        <li> 용눈이오름</li>
        <li> 만장굴</li>
        <li> 카약체험</li>
      </ol>
    </li>
  </ul>
  

  • 1일차
    1. 해녀박물관
    2. 낚시 체험
    </li>
    3. 2일차
       3. 용눈이오름
       4. 만장굴
       5. 카약체험
    </ul>

<dl> <dt> <dd> : 설명 목록 만들기

• <dl> 제목과 설명이 한 쌍인 Description List. (단어/정의, 질문/답)
• <dt> 목록의 제목 표시
• <dd> 목록의 설명 표시

<dl>
  <dt>제목</dt>
  <dd>설명</dd>
  <dd>한영전환 귀찮아요</dd>
</dl>

제목

설명

한영전환 귀찮아요

02-4 표를 만드는 태그

<table> <tr> <td> <th> : 기본적인 표 만들기

<table>
  <tr>
    <th>태그</th>
    <th>설명</th>
  </tr>
  <tr>
    <td>tr</td>
    <td>표의 행</td>
  </tr>
  <tr>
    <td>td</td>
    <td>표의 열</td>
</table>

• <table> 태그에 border 속성을 주면 표 테두리가 생긴다. 기본값은 ‘없음’.

<table border="2"> ... </table>

• 순서가 헷갈릴 수 있기 때문에 아래와 같이 작성.
  1. <table> 태그
  2. <tr> 태그로 행
  3. <td> 태그로 열

<th> : 표에 제목 셀 만들기 다른 글자보다 굵게 표시되고, 셀의 중앙에 위치한다. <td> 대신 삽입.

<colspan> <rowspan> : 행/열 합치기

이렇게 들쭉날쭉하게 병합하면, 별도의 스타일을 지정 안 하는 이상 생김새가 밉다.

<caption> <figcaption> : 표에 제목 붙이기

• caption 태그는 table 바로 다음에 사용한다. 표 위쪽에 중앙 정렬되며, 여러 줄로 쓰거나 텍스트를 꾸밀 수 있다.
• figcaption 태그는 <figure> 태그 다음에 사용한다. 중앙 정렬되지 않으며, table 태그와의 위치에 따라 표 위쪽이나 아래쪽에 표시된다.

<!-- 표1 -->
<table border="1">
  <caption>
    <strong>맨 윗줄 제목</strong>
    <p>둘째 줄 제목</p>
  </caption>
  <tr>
    ...</tr>
</table>

<!-- 표2 -->
<figure>
  <figcaption>
    <p>figcaption을 이용한 제목</p>
  </figcaption>
  <table border="1">
    <tr>
      ...</tr>
  </table>
</figure>

<aria-describedby> : 표 설명

table 안에 추가하는 속성으로, 낭독기를 고려해 표에 대한 설명을 문장으로 작성한 것.

<p id="summary">다음 표는 예제를 위한 표이다.</p>
  <table border="1" aria-describedby="summary">
    <caption>표 제목</caption>
    <tr>
      ...</tr>
  </table>

<thead> <tdoby> <tfoot> : 표 구조 정의하기

• 제목, 본문, 요약 등 표의 구조를 정의할 수 있다. HTML4까지는 tfoot를 tbody 다음에 쓰면 오류가 생겼지만, HTML5에서는 상관 없이 쓸 수 있다.
• 화면 낭독기에서 사용하기 쉬우며, CSS를 통해 각각 스타일을 다르게 할 수 있다.
• 본문이 길어 화면을 스크롤 할 경우, thead와 tfoot는 고정하고 tbody만 스크롤되게 만들 수 있다.

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

<!-- HTML5에서는 <tfoot>과 <tbody> 순서가 바뀌어도 상관없음. -->

<col> <colgroup> : 여러 열 묶어서 스타일 지정하기

• 하나 또는 여러 열을 묶어서 스타일을 지정.
• 닫는 태그가 없으며, 둘 이상의 열을 묶으려면 <span> 속성을 사용한다.
• colgroup 사용 시, 안에 묶는 열의 개수만큼 col 태그를 넣는다.
• 두 태그는 <caption> <tr> <td> 태그 이전에 사용해야 한다.
• 행을 묶고 싶을 땐 <tr> 태그를 쓰므로, col이나 colgroup를 쓸 필요 없다.

<table border="1">
    <caption>colgroup 연습</caption>
    <colgroup>
      <col>
      <col span="2" style="background-color:blue;">
      <col style="background-color:gray;">
    </colgroup>
    <tr>
      <td>내용</td>
      <td>내용</td>
      <td>내용</td>
      <td>내용</td>
    </tr>
    <tr>
      <td>내용</td>
      <td>내용</td>
      <td>내용</td>
      <td>내용</td>
    </tr>
</table>

References

• Do it! HTML5+CSS3