[HTML] 텍스트 태그

텍스트와 관련된 태그

 

 

1. 제목

 

 

Heading 태그 ⭐

 

• 제목이나 주제
• <h1>부터 <h6>까지
• 숫자가 작을수록 제목의 크기가 커지고 중요도도 크다.
• 검색 엔진에서 키워드로 인식한다. 따라서 검색 엔진 최적화(SEO)를 위해 본문에서 핵심이 되는 내용으로 제목이나 주제를 잘 선택해서 작성한다.
• hn 태그는 단계적으로 태그를 검색하다가 중간에 h4가 없으면 h5, h6 검색하지 않는다. 그래서 숫자를 건너뛰지 말고 단계적으로 사용해야 한다.
• 블록 레벨

 

 

🌐 검색 엔진 최적화(SEO) ?

SEO는 구글이나 네이버와 같은 검색 엔진에서 상위 랭크될 수 있도록 검색 엔진에 친화적으로 마크업 작성하는 것을 말한다. SEO는 어떤 한 부분으로 결정하지 않고, 여러 요인을 종합해 결정하기 때문에 항상 태그의 목적에 맞는 쓰임새로 마크업을 작성해야 한다.

 

 

---

2. 문단

 

 

1)  p 태그 (paragraph) ⭐

 

• p 태그는 본문의 문단을 작성할 때 사용
• HTML에서는 제목이나 주제를 나타내는 텍스트가 아니면 대부분 본문이기 때문에 p태그 주로 사용
• 블록 레벨 요소
• 예외적으로 블록 요소이지만 자식 요소로 블록 요소를 가질 수 없음✅

 

 

2) hr 태그 (horizontal rule)

 

• 구분선을 표시하는 태그로 주제 변경이나 내용 구분시에 사용
• CSS로 가로선 없앨 수 있다.
• 빈 요소
• 블록 레벨

 

 

3) br 태그 (break line)

 

• 줄바꿈
• 개행할 때 사용
• 단락이 나눠진 것처럼 보이지만 실제로는 단락이 만들어진 것은 아니다.
• 블록 레벨

 

 

4) pre (preformatted text)

 

• 입력한 서식을 그대로 화면에 표시
• 태그 내에 작성된 텍스트의 모든 띄어쓰기와 줄 나누기는 웹 브라우저에 그대로 표현된다.
• 태그 내에 작성된 텍스트의 font는 고정폭 글꼴로 자동변환된다.
• 블록 레벨

 

 

---

3. 서식 (Formatting)

 

 

 

📌 볼드체 

b (bold text): 시각적으로만 볼드체

 strong : 정말 중요한 볼드체 ☑️

📌  이탤릭체

i (italic text): 시각적으로만 이탤릭체

em (emphasized text): 강조하는 이탤릭체 ☑️

 

 

 

<small>: 작은 글자

 

<big>: 큰 글자 

 

<mark>: 텍스트에 형광펜 효과 적용

 

<del>: 가운데 줄이 그어진 글자 태그

 

<lins>(insert): 밑줄 글자 태그

 

<u>: 텍스트에 밑줄

 

<sup>(superscript): 위첨자

 

<sub>(subscript): 아래첨자

 

---

4. 인용구 (Quotation)

 

 

1) q 태그 (quotation)

• 짧은 인용문
• 자동으로 앞뒤에 "큰따옴표"로 묶인다.
• 인라인

 

 

2) blockquote 태그 (block quatation)

• 문단 단위 인용문
• 이때 출처가 확실한 인용문은 cite 속성으로 출처 경로를 명시해야 한다.
• 반드시 한 개 이상의 p태그를 포함해야 한다. p 태그 내용에 blockquote 포함할 수 없다.
• 다른 텍스트 단락보다 안으로 들여 쓰게 표현이 된다.
• 블록 레벨

 

 

3) abbr 태그 (abbreviation)

 

•  축약형 표현, <abbr>태그 위에 마우스를 위치시키면 title 속성에 명시한 용어의 원형이 나타난다.

 

 

 

4) address 태그

• 주소 표현, 이탤릭체로 표현되며, 위아래로 약간의 공백이 자동으로 삽입

 

 

---

 

🌐 연습 

 

텍스트 서식 코드

 

결과

 

---

5. 주석(Comment)

 

<!-- 주석 -->

 

• 개발자가 작성한 해당 코드에 대한 이해를 돕는 설명이나 디버깅을 위해 작성한 구문을 의미
• 주석은 다른 HTML 코드와는 달리 웹 브라우저에 표현되지 않는다.
• HTML 코드의 어느 부분에서라도 사용 가능
• 여러 줄에 걸쳐 주석을 작성해도 정확히 인식할 것
• HTML 코드에 삽입된 주석을 읽고 싶다면, 웹 브라우저의 페이지 소스 보기(F12) 등을 통해서 확인할 수 있다. 그러므로 중요한 내용은 주석으로 표시하지 않는다.

 

---

6. 엔티티(Entity)

 

출처 : tcpschool.com

 

 

---

7. 심볼(symbol) 특수문자

 

• HTML 예약어 이외에도 키보드에 입력할 수 없는 문자를 표현하기 위한 심볼 특수문자를 사용

출처 : tcpschool.com

 

---

💡 <p>, heading tag의 디폴트 마진

 

• <p> 태그와 헤딩 태그는 디폴트로 위아래 마진을 갖는다.
• 마진은 폰트 사이즈에 비례한다.
• p 태그의 마진은 폰트 크기와 같다. p태그의 폰트 사이즈가 10px라면 margin은 상하로 각각 10px이 된다.
• 위 태그들의 마진 단위가 em이기 때문이다.