에러 탈출 일지

[HTML] 텍스트 태그(block, inline), 테이블 태그, 시맨틱 태그 본문

개발/HTML & CSS

[HTML] 텍스트 태그(block, inline), 테이블 태그, 시맨틱 태그

뉴NEW 2022. 8. 25. 21:57

< 텍스트 태그 >

태그는 줄바꿈의 여부에 따라 2가지 유형으로 구분
- 블럭(block) 태그
- 인라인(inline) 태그: 줄바꿈을 하지 않는 태그

 

< 텍스트 태그 - 블럭(block) 태그 > ★

- 자주사용 하는 태그 : hn, p, br, hr
1. hn 태그: 제목, h1 ~ h6, header, 굵은 글씨, 줄바꿈 처리, 글자크기: h1 > h6 
2. p 태그: 문단(단락), paragraph, 일반적인 문단의 텍스트를 표시할 때 많이 사용
3. br 태그: 줄바꿈, 단독 태그, line break
4. hr 태그: 수평선, 단독 태그, horizontal line
5. pre 태크: 태그에 쓰는대로 화면으로 출력, 들여쓰기 속성과 글자크기 줄여서 출력, preformat, 필요에 따라 사용
6. blockquote 태그: 인용문에 사용, 들여쓰기 속성이 적용, 필요에 따라 사용

< 텍스트 태그 - 인라인(inline) 태그> ★ 

- 자주사용 하는 태그: span, b, i
- strong 태그, b 태그 (bold) 글자를 굵게 표시 
  ▷화면낭독기 기능에서의 차이점: strong 태그는 강조해서 낭독하게 되는 태그
- em 태그, i 태그 (emphasis, italic) 글자를 기울림꼴로 표시 
  ▷화면낭독기 기능에서의 차이점: em태그는 강조해서 낭동하게 되는 태그
- q 태그 (quotation):인용문, 쌍따음표로 싸서 표시 
mark 태그: 강조 태그, 노란색 형광펜으로 표시
- span 태그: 줄바꿈없이 영역을 묶어서 한꺼번에 처리할 때 많이 사용하는 태그
- small 태그: 주변 글자보다 작게 표시하는 태그 
- sup 태그 (supper subscript) 위 첨자 표시
- sub 태그 (subscript) 아래 첨자 표시
- s 태그 (strikethrough) 취소선, 가운데선을 표시,
- u 태그 (underline) 밑줄을 표시
- ruby, rt 태그 동아시아 문자 표기

 

< 테이블 태그 >

- table: 테이블 전체 태그
- tr: 행, table row 
- th: 열, table head, 제목, 긁게, 가운데 맞춤
- td: 열, table data, 일반, 기본, 왼쪽 맞춤

 

< 시맨틱(semantic) 태그 > 

- 특별한 기능이 있는 것이 아니라, 의미를 가지는 태그
- 테이블에서 사용하는 시맨틱 태그 
- thead: 테이블의 제목
- tbody: 테이블의 본문

- tfoot: 테이블의 꼬리말