TIL #4 - HTML 텍스트

rosarang·2020년 12월 23일
0

HTML

목록 보기
2/6
post-thumbnail

텍스트 관련 태그

1. 블록 텍스트

<hn> 태그

  • heading. 제목에 쓰이는 태그

  • <h1> ... <h6> 총 여섯 가지가 있다.

<p> 태그

  • paragraph. 단락을 만들 때 쓰는 태그

  • <p> 태그 내부에 <br> 태그 두개를 입력하면 단락이 나뉜 것 처럼 보이나 실제 웹 브라우저는 단락으로 인식하지 못한다.

<br> 태그

  • break. 줄바꿈할 때 쓰인다.

  • 닫는 태그가 없다.

<hr> 태그

  • horizontal. 주제를 바꾸는 등의 상황에서 내용을 구분하기 위해 넣는 수평 줄 태그

  • 입력 시 기본 가로선이 생기며 CSS로 가로선을 없앨 수 있다.

  • 닫는 태그가 없다.

<blockquote> 태그

  • 인용문 태그

  • 기본으로 들여 써지며 인용한 사이트 주소가 명확할 경우 cite 속성으로 인용 사이트 주소 표시가 가능하다.

<pre> 태그

  • preformat. 입력한 그대로 화면에 표시하는 태그

  • 소스에 표시한 공백 등이 브라우저에 그대로 표시된다.

  • <code>, <samp>, <kbd> 같은 태그를 사용해 프로그램 소스를 보여줘야할 때에도 사용된다.

  • <pre> 태그가 적용되면 해당 부분이 읽히지 않기 때문에 웹 접근성을 위해서는 대체 텍스트를 추가하는 것이 좋다.




2. 인라인 텍스트

<strong>, <b> 태그

  • 텍스트가 굵게 표시되는 태그

  • <strong> - 굵게 표시될 뿐만 아니라 화면낭독기에서 강조되었음을 알려준다.

  • <bold> - 시각적으로 굵게 표시된다.

  • 중요도를 더 높이고 싶다면 <strong> 태그를 여러 번 겹쳐서 쓸 수 있다.

<em>, <i> 태그

  • 텍스트를 기울일 때 쓰는 태그

  • <em> - emphasis. 문장 흐름상 특정 부분 강조할 때 사용된다.

  • <i> - italic. 마음 속의 생각이나 꿈, 기술적인 용어, 다른 언어의 관용구 등에 쓰인다.

  • 필요할 경우 CSS에서 색상이나 글자 크기 등을 조절할 수 있다.

<q> 태그

  • quote. 인용한 내용 표기하는 태그

  • <blockquote> 는 인용 내용이 블록으로 나뉘지만 <q> 태그는 인라인으로 따옴표가 붙는 태그이다.

<mark> 태그

  • 형광펜처럼 표시되는 태그

  • CSS background-color 설정으로 색상을 바꿀 수 있다.

<span> 태그

  • 태그 자체로는 아무 의미가 없으나 텍스트 단락 안에서 줄바꿈 없이 일부 텍스트만 묶어 스타일을 적용할 때 사용된다.

<ruby> 태그

  • 동아시아 국가들의 글자에 주석을 함께 표기하기 위한 용도로 사용된다.

  • <ruby> 태그 안에 <rt> 태그로 표시한다.
    <ruby> 내용 <rt> 주석 </rt> </ruby>

기타 텍스트 관련 태그

  • <abbr> - 약자 표시. title 속성과 함께 사용 가능함

  • <cite> - 웹 문서나 포스트에서 참고 내용 표시

  • <code> - 소스 코드

  • <kbd> - 키보드 입력이나 음성 명령 같은 사용자 입력 내용

  • <small> - 작게 표시해도 되는 텍스트

  • <sub> - 아래 첨자

  • <sup> - 위 첨자

  • <s> - 취소선

  • <u> - 밑줄




3. 목록

<ul>, <li> 태그 - unordered list

<ul>
	<li> 목록 1 </li>
	<li> 목록 2 </li>
</ul>
  • 작은 원이나 사각형의 불릿으로 목록이 생성된다.

  • CSS의 list-style-type 속성으로 불릿을 수정한다.

<ol>, <li> 태그 - ordered list

  • 목록에 순서가 필요할 때 쓰인다.

  • 여러 속성과 함께 사용되어 순서 표기와 시작하는 순서, 항목 역순 여부를 바꿀 수 있다

    • type 속성 - 1(숫자 - 기본값), a(영문 소문자), A(영문 대문자), i(로마숫자 소문자), I(로마숫자 소문자)
    • start 속성 - 순서를 중간 번호로 시작할 수 있다.
    • reversed 속성 - 항목을 역순으로 표시한다.
  • </li> 태그 생략 가능

    • <li> 여러 항목이 나열될 때 </li> 항목을 생략해도 <li> 태그를 만나면 자동으로 </li> 가 있는 것처럼 인식된다.
<ol>
	<li> 목록 1
	<li> 목록 2
	<li> 목록 3
	<li> 목록 4
</ol>

<dl>, <dt>, <dd> 태그 - description list

<dl>
	<dt> 제목 </dt>
	<dd> 설명 </dd>
	...
</dl>
  • <dl> 태그는 제목과 설명이 한 쌍인 설명 목록을 만든다.



4. 표

<table>, <tr>, <td>, <th> 태그

<table>
	<tr>
		<th> 제목 </th>
		<td> 내용 </td>
		<td> 내용 </td>
		...
	</tr>
	...
</table>
  • <th> 태그

    • 다른 글자보다 굵고 셀 중앙에 배치된다.
  • colspan, rowspan 속성 - 행 또는 열 합치기

    • colspan - 가로로 합쳐짐
    • rowspan - 세로로 합쳐짐
<th rowspan = "합칠 셀의 개수"> 내용 </th>
<td colspan = "합칠 셀의 개수"> 내용 </td>

<caption>, <figcaption> 태그 - 표 제목

  • <caption> 태그

    • <table> 태그 바로 밑에 사용된다.

    • 표 위쪽 중앙에 표시

    • 다른 태그들을 사용해 제목을 여러 줄로 표시하거나 꾸밀 수 있다.

<table>
	<caption>
		<strong> 큰 제목 </strong>
		<p> 작은 제목 </p>
	</caption>
	<tr>...</tr>
	...
</table>
  • <figcaption>

    • 글을 붙일 대상을 <figure> 태그로 감싼 후 위나 아래에 <figurecaption> 태그로 제목을 입력한다.

    • <caption> 과 다르게 중앙 정렬되지 않는다.

<figure>
	<figcaption>
		<p> 제목 </p>
	</figcaption>
	<table>
	</table>
</figure>
  • aria-describedby 속성 - 표 설명 제공

    • 화면 낭독기로 표를 읽어줄 때 도움이 되는 설명을 입력하고 해당 속성으로 표와 설명을 연결해줄 수 있다.
<p id="summary"> 표에 대한 설명 </p>
	<table aria-describedby="summary">
		<caption> </caption>
		<tr> ... </tr>
	</table>

<thead>, <tbody>, <tfoot> - 표 구조 정의

<thead> - 테이블 제목
<tbody> - 본문
<tfoot> - 요약

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

or

<thead>
	<tr> ... </tr>
</thead>
<tfoot>
	<tr> ... </tr>
</tfoot>
<tbody>
	<tr> ... </tr>
</tbody>
  • HTML4에서는 <tfoot> 태그를 <body> 다음에 쓰면 오류가 생겨 앞에 놓았으나 HTML5에서는 앞이나 뒤 모두 가능하다.

  • 표 구조 정의 시 화면낭독기를 통해 표의 구조를 알기 쉬워진다.

  • 표가 긴 경우에도 자바스크립트를 통해 본문만 스크롤 가능하도록 할 수 있다.

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

  • 하나 혹은 여러 열을 묶어 스타일을 한꺼번에 지정할 수 있다.

  • 닫는 태그가 없다.

  • 둘 이상의 열을 묶어 같은 스타일을 지정하려면 span 속성을 사용하여 적용할 수 있다.

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

  • <colgroup> 태그 안에 있는 <col> 태그를 비롯해 단독으로 사용한 <col> 태그의 개수와 표의 열 개수가 같아야 한다.

  • 테이블은 행을 기준으로 만들기 때문에 행을 묶는 태그는 따로 없다. 그리고 열을 만드는 태그가 따로 없어 열을 조절할 때 <col> 태그나 <colgroup> 태그를 따로 사용한다.

<colgroup>
	<col>
	<col span="2">
	<col>
</colgroup>

5. 기타

  • 코드에 주석을 추가하고 싶을 때
    <!— HTML 주석 —> /* CSS 주석 */

  • 온라인 HTML 검사기 - http://validator.w3.org/



출처 : Do it! HTML5+CSS3 웹 표준의 정석

profile
UX에 관심 많은 개발 초보 Front-end Developer

0개의 댓글