HTML5 1번째 - 텍스트 관련 태크

블록 레벨 태그

 

<hn> 태그 - 제목 표시하기 </hn>

 .<h1>~<h6> 까지 사용 가능

 .<h1> 부터 가장 크게 표시 </h1> = 

부터 가장 크게 표시

 

<p> 태그 - 단락 만들기</p>

 .'단락' 이란 앞뒤에 줄바꿈이 있는 텍스트 덩어리

 .브라우저 창의 너비보다 줄이 길어질 경우, 자동 변경

 

<br> 태그 - 줄 바꾸기

 .브라우저 창에서 줄바꿈 하려면 해당 위치에 <br> 사용

 .닫는 태그 없음

 

<hr> 태그 - 수평 줄 넣기

 .텍스트 단락의 주제가 바뀔 때 사용

 .CSS 이용하여 가로선 없앨 수 있음

---

<blockquote> 태그 - 인용문 넣기  </blockquote>

 .인용한 문장은 다른 텍스트보다 안으로 들여 써지므로 구별됨

 .사이트 주소가 명확한 경우, cite 속성을 이용해 인용 사이트 주소를 표시할 수 있음

태그 - 인용문 넣기

 

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

 .많은 공백을 넣어도 브라우저에서는 한 개의 공백만 표시

 .<pre> 태그 사용 시, 소스에 표시한 공백이 그대로 표시

 .소리로 읽어주는 기계나 점자 표시 기계는 <pre> 태그 건너 뜀

 

인라인 레벨 태그

 .모두 닫는 태그가 있음

 

<strong>, <b> 태그 - 굵게 표시하기

 .두 태그의 구분은 화면 낭독기에서의 기능

 .<strong>경고나 주의 사항같은 중요한 내용을 강조할 때 </strong>

=  경고나 주의 사항같은 중요한 내용을 강조할 때

 .키워드처럼 단순 굵게 표시는 <b> 

 

<em>, <i> 태그 - 이탤릭체로 표시하기

 .<em>문장 흐름상 특정 부분 강조 </em> =  문장 흐름상 특정 부분 강조

 .마음 속 생각, 기술 용어, 다른 언어의 관용구 <i> 

 .중요한 것은 <em>, 단순 강조 <i>

 

<q> 태그 - 인용 내용 표시하기

 .<blockquote> 는 블록 레벨 태그로 인용 내용이 줄 바뀜

 .<q> 태그는 줄바꿈없이 다른 내용과 한 줄로 표기, 따옴표 붙여 표시 </q> = 

태그는 줄바꿈없이 다른 내용과 한 줄로 표기, 따옴표 붙여 표시

 

<mark> 태그 - 형광펜 효과 내기

 .선택한 부분의 배경색이 노란색이 됨, 형광펜 효과

 .<mark> CSS 내 background-color 속성으로 색 변경 가능 </mark> = 

CSS 내 background-color 속성으로 색 변경 가능

 

<span> 태그 - 줄바꿈 없이 영역 묶기 

 .자체로는 의미 없으나, 일부 텍스트만 묶어 스타일 적용 시 사용

 .단락을 통체로 묶고 싶다면 <div>태그 사용

 

<ruby> 태그 - 동아시아 글자 표시하기

 .동아시아 국가 글자들에 주석을 함께 표기하기 위한 용도

 .<ruby> 내용<rt> 주석 </rt> </ruby>  =

내용 주석

 

<abbr> 태그 - 약자 표시

 .title 속성을 함께 사용할 수 있음.

 .<abbr title="풀네임">약어</abbr> = 

약어

 

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

 .<cite> '비포선셋' </cite> = 

'비포선셋'

 

<code> 태그 - 컴퓨터 인식을 위한 소스 코드

 

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

 

<small> 태그 - 작게 표시하는 텍스트

 .내용<small>작은 내용</small> = 내용

작은 내용

 

<sub> 태그 - 아래 첨자 

 .H₂O =  H₂O

 

<sup> 태그 - 위 첨자

 

<s> 태그 - 취소선

 .<s>34,000원</s> =  34,000원

 

<u> 태그 - 밑줄

 

---

목록을 만드는 태그

 

<ul>, <li> 태그 - 순서 없는 목록 만들기

 .<ul> 태그 안에 <li> 태그 사용해 각 항목 표시 

 .각 항목 앞에 불릿(bullet)이 붙음, CSS list-style-type 속성으로 수정

 .<ul>

    <li> 내용 1 </li>

    <li> 내용 2 </li>

 </ul> 

↓↓↓↓↓↓↓↓↓

• 내용 1
• 내용 2

 

<ol>, <li> 태그 - 순서 목록 만들기 

 .속성에 따라 숫자 표기 방법이나 시작 숫자 변경 가능

   ..type 속성 - 기본 항목 앞에 1,2 붙으나 조절 가능 

   

속성 값	설명
1	숫자 (기본값)
a	영문 소문자
A	영문 대문자
i	로마숫자 소문자
I	로마숫자 대문자

 

  ..start 속성 - 시작 숫자 변경 

  ..reversed 속성 - 항목을 역순으로 표시

.</li> 생략되어도 다음 <li>태그 만나면 자동 인식

 

<dl>, <dt>, <dd> 태그 -설명 목록 만들기

 .사전 구성처럼 '제목'과 '설명'이 한쌍인 목록

 .<dt> 제목, <dd> 설명 

 . <dl>

      <dt> 제목 </dt>

      <dd> 설명 </dd>

   </dl>

↓↓↓↓↓↓↓↓↓

제목

설명

---

표를 만드는 태그

 

<table border="1"> <!-- 전체적인 윤곽, 기본형은 테두리 x, border 속성으로 테두리 추가 

   <tr> <!--하나의 행

   <td> 내용 </td> <!-- 하나의 셀

   <td> 내용 </td>

  </tr>

</table>

 

<th> 태그 - 표에 제목 셀 만들기

 .<td> 대신 사용하면 제목셀 형성

 .셀 안에 내용을 중앙 배치하고 굵게 표시

 

colspan, rowspan 속성 - 행 또는 열 합치기

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

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

 

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

 .<caption> 태그는 <table> 태그 다음에 사용하며, 표의 위쪽 중앙에 표시됨

 .<caption> 태그 안에 다른 태그 사용 가능, 여러줄 가능 등

 .<figure> <figcaption>제목이나 설명글 </figcaption> </figure>

 .<figure>는 표 전체를 감싼 후 <figcaption> 위치에 따라 제목이 표 위or아래에 표시됨

 

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

 .화면 낭독기에서 표를 읽어줄 때 표 설명을 별도로 문장으로 작성 후 <table> 속성 추가해 연결

 .<p id="summary"> 설명 </p>

  <table aria-describedby="summary">

 

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

 .각각 제목, 본문, 요약 구조 정의

 .화면 낭독기를 통해 표의 구조를 쉽게 이해할 수 있음

 .본문이 길 경우, 자바스크립트 이용하여 제목과 요약 부분을 고정할 수 있음

 .<tr>태그 감싸서 사용

 

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

 .<col> 한 열에 있는 모든 셀에 같은 스타일 적용, 닫는 태그 없음

 .<colgroup> 여러 열을 묶어 스타일 적용, 내부 <col> 태그 넣어야 함

 .위 태그는 <caption> 뒤, <tr>,<td> 태그 전에 사용해야 함

 .<col> 태그는 표의 열 개수와 같아야하며, 순서가 동일하게 매칭