텍스트 관련 태그

텍스트를 덩어리로 블록 레벨(줄바꿈)

• h1~6: 제목표시
• p: 단락
• br: 줄 바꿈(닫x)
• hr: 가로선(닫x)
• blockquote: 인용문(cite속성-사이트주소 표시), 들여쓰기 됨
• pre: 입력하는 그대로 화면에 표시(공백, 코드)

텍스트를 한 줄로 인라인 레벨

• strong(굵게 강조), b(굵게 표시): 화면 낭독기에서 기능의 차이

• em(이탤릭체로 강조), i(이탤릭테로 표시)

• q: 인용내용 표시, 따옴표생김, cite속성

  <q cite="http://~~~">안녕</q>

• mark: 형광펜

• span: 줄바꿈 없이 영역 묶기, 스타일 적용할 때> 단락단위 div

• ruby: 동아시아 글자 표시, 주석 rt

목록

• ul,li: 순서 없는 목록

  <ul> 
  <li>...</li> 
  </ul>

• ol, li: 순서 목록

  • <ol type="a" start="3">
  • type 속성: 숫자 종류 다양
  • start 속성: 중간 번호부터 시작
  • reversed 속성: 항목 역순

• /li 생략가능

• dl, dt, dd: 설명 목록

  <dl> 
  <dt>제목</dt> 
  <dd>설명</dd> 
  </dl>

• W3C HTML 검사기 https://validator.w3.org/

표 태그

• table, tr, td, th: 표 만들기
• <table border="1"> <thead> <tr> <th>제목</th> <td>내용</td> <th>제목</th> <td>내용</td> </tr> </thead> <tbody> <tr> <th>제목</th> <td colspan="3">내용</td> </tr> </tbody> <tfoot> <tr> <th>제목</th> <td colspan="3">내용</td> </tr> </tfoot> </table>
• 순서: 윤곽table> 행tr> 셀td
• th: 표에 제목 셀
• colspan, rowspan 속성: 열, 행 합치기
• <td colspan(or rowspan)="합칠 셀 개수">내용</td>(th 가능)
• 표에 제목 붙이기
  • caption: table 바로다음, 위쪽 중앙
  • figcaption: table 앞뒤 따라 위치 위아래, 왼쪽 정렬, figure로 감싼 후 사용
• thead(제목), tbody(본문), tfoot(요약) 태그: 표 구조 정의
• col, colgroup 태그: 여러 열 묶어 스타일 지정, caption 뒤 tr,td 앞에서 사용