프론트엔드 개발/HTML CSS
HTML - HTML 태그 (제목, 단락, 인용구, 서식)
snowman95
2021. 5. 30. 14:25
728x90
반응형
HTML 태그
제목(Heading) , 단락(Paragraph)
텍스트 크기/구분/위치 등에 영향주는 태그
| 태그명 | empty tag |
설명 | 예시 이미지 |
| <h1> | X | (heading) 제목을 나타내는 태그 <h1> ~ <h6> 순서로 텍스트 크기 점점 작아진다. 위아래 자동 여백 들어간다. 검색엔진이 이 <h> 태그로 키워드 수집함. |
 |
| <p> | X | (paragraph) 내용 구분하기 위한 문단, 단락을 나타내는 태그 텍스트 앞 뒤로 빈 줄이 생기면서 단락 만들어 진다. ※ br태그와 비슷하지만, 스타일 적용하려면 p태그 사용 |
  |
| <br> | O | (break line) 줄을 바꿔주는 태그 웹 문서의 텍스트는 Enter, 개행(\n) 넣어도 띄워지지 않으며, 여러번의 Spacebar도 1번으로 인식된다. 줄을 바꿔주고 싶을때 br 태그 사용. |
  |
| <pre> | X | (preformatted text) 우리가 알던 평소방식 그대로 텍스트 표현하는 태그 HTML 코드에서도 평소처럼 띄워쓰기, 줄 나누기 하고 싶을때 사용. 텍스트의 글꼴(font)은 고정폭 글꼴(fixed-width font)로 자동변환 |
  |
| <hr> | X | (horizontal rule) 수평 가로 구분선을 추가 |
  |
인용구(Quotation)
| 태그명 | empty tag |
설명 | 예시 이미지 |
| <q> | X | (quotation) 짧은 인용구를 표현한다. 자동으로 큰따옴표 붙음 |
  |
| <blockquote> | X | (blockquote) 블록 인용문을 표현하는 태그 별도 단락으로 구분되어진다. |
  |
서식(Formatting)
텍스트에 다양한 효과주는 여러 태그
| 태그명 | empty tag |
설명 | 예시 이미지 |
| <strong> <b> |
X | (strong) (bold) 텍스트를 굵게 표시합니다. <strong>은 경고, 주의사항 같은 중요 내용 강조할 때 <b>는 단순히 글자를 굵게 표시할 때 사용 |
 |
| <mark> | X | (highlighted or marked text) 노란색 형광효과 |
  |
| <em> <i> |
X | (emphasis) (italic) 텍스트를 기울여 표시합니다. <em>은 문장에서 내용 강조하고 싶을 때 <i>는 단순히 글자 기울이고 싶을 때 사용 |
 |
| <abbr> | X | (abbreviation) 줄임말, 축약어를 표시합니다. 택스트에 마우스 위치시키면 작은 툴팁이 나온다. |
  |
| <cite> | X | (cite) 인용 내용을 표시합니다. |
  |
| <code> | X | (code) 컴퓨터 인식을 위한 소스 코드를 표시합니다. |
  |
| <small> | X | (small) 글자를 작게 표시합니다. |
  |
| <sub> | X | (Subscript) 아래 첨자를 표시합니다. 화학식 등을 표현할때 사용 (H2O) |
  |
| <sup> | X | (Superscript) 위 첨자를 표시합니다. 수학식, 단위 등을 표현할때 사용 (㎡) |
  |
| <s> | X | (Strikethrough) 취소선을 표시합니다. |
  |
| <u> | X | (Underline) 밑줄을 표시합니다. 이것 |
  |
| <ins> | X | (insert) 공동 작업 문서에서 새로운 내용 삽입합니다. |
  |
| <del> | X | (delete) 공동 작업 문서에서 기존 문서내용 삭제합니다. |
  |
| <address> | x | (address) 주소를 표현합니다. 이탤리체로 표현되며, 위아래 자동 공백 삽입 |
  |
주석(Comment)
코드 설명이나 디버깅 위해 작성한 구문.
웹 브라우저에 표현되지 않음. 소스보기에는 나타남.
<!-- 주석내용 -->
<!--
주석내용
...
-->
반응형