텍스트 요소

h1~ h6 ( heading)

6단계의 구획 제목

구획 단계는 <h1>이 가장 높고 <h6>가 가장 낮다. 

-제목의 정보를 사용해 자동으로 문서 콘텐츠의 표를 만드는 등의 작업을 수행할 수 있다. 

-글씨 크기를 위해 제목 태그를 하면 x -? CSS 의 font-size 속성 사용

-<h1>~<h6> 순차적으로 기입

-페이지 당 하나의 <h1> 

---

<p>태그

하나의 문단을 나타냄 (이미지나 입력 폼 등 서로 관련있는 콘텐츠 무엇이나 가능) -콘테이너 역할 -> 단독으로 사용 하지 못함 

블록레벨 요소 - 가로 전체를 차지함 

 

ex)

<p>첫 번째 문단입니다.

첫 번째 문단입니다. 

첫 번째 문단입니다.</p>

결과=> 첫 번째 문단입니다. 첫 번째 문단입니다. 첫 번째 문단입니다. 

 

 

브라우저 기본 스타일은 문단끼리 한 줄의 간격으로 분리 

빈 <p> 요소를 사용해 문단 사이에 여백을 추가하지 x 

->첫 줄 들여쓰기 등 다른 구분 방법은 css를 통해 할 수 있음

 

 

 

---

<br> 줄바꿈요소  line break 

텍스트 안에 줄바꿈 (캐리지 리턴)을 생성, 엔터를 대신 쳐준다 생각하면 됨. 

빈요소라 <br>로만 사용 가능  

긴 공백을 위해서 <br>을 많이 쓰면 안되고 <p> 요소로 감싼 후

css의 margin속성을 통해서 해야함

 

 

 

 

---

blockquote, q

인용을 위한 목적 

문서를 작성한 사람이 직접 하고자 하는 말이 아니라 다른 사람이 한 얘기를 가져온다던지 도서나 논문, 영화와 같은 매체에서 가져온 정보를 가져올때 

인용문의 출저 문서나 메세지를 가리키는 url -맥락 혹은 출처 정보를 가르킬 용도-> 브라우저만 알고있고 최종적으로 눈에 보이진 않음. 

 

 

<blockquote> : 인용 블록요소 

문장이 긴 요소 

문단이 안으로 들여쓰기로 나타남

<p>사용하면 x 

->p태그는 자식태그가 블록요소이면 자동으로 p태그가 닫힘. 눈엔안보이지만 </p> 되었는데 밑에 또 </p>가 되어 인식이 되지 않음

 

<q> 인라인 인용문 요소 

비교적 짧아서 문장 사이에 자연스럽게 들어간 경우

" ~~" 식으로 나타남

<p> 사용 가능

---

<pre> 

미리 서식을 지정한 텍스트를 나타냄

 

미리 서식 형식이 정의가 되어있어 별도 처리 없이 그대로 결과물에 보여주고 싶을때 사용 

 

->스페이스 많이 치면 어차피 한칸만 띄워지는데 pre 태그 하면 스페이스 친 대로 그대로 보여짐 <br> 태그도 마찬가지

 

고정폭 글꼴 

A와 I는 폭에 차이가 나지만 pre태그 안에선 I도 A만큼의 폭을 똑같이 갖는다. 

---

<figure>

독립적인 콘텐츠를 표현

<figcation> 요소와 함께 사용 - 부수적인 설명 => <figure> 와 <figcaption>을 함께 사용하면서 두 문장이 연관성이 있다는 것을 알려줌

이미지 <pre>, <blockquote>로 된 인용문, <p>태그로 시를 나타낼 수 있음 

---

<hr>

 

수평선, 가로줄 단독으로 문단과 문단 사이를 나눌때 사용

 

이야기 장면 전환, 구획 내 주제변경 등 문단 레벨 요소에서 주제의 분리를 나타냄

 

빈요소 

 

---

<abbr>

 

약어  

오른쪽 www 에 마우스 커서를 올리면 world wide web 이라고 뜸 

별도 스타일링을 하지 않아도 밑에 점밑줄로 표현됨 

 

 

 

---

<adress>

주소 라는 의미 

주소 뿐만 아니라 sns주소 , 메일 주소를 나타냄 

별도 스타일링을 하지 않아도 기울인 채로 표현됨 

---

<site>

인용한것의 출처를 나타낼 때 사용

<bockquote cite- "~">로도 사용   -----> 눈에 보이진 않음

<cite>는 눈에 보임

---

<bdo>

텍스트가 왼쪽에서 오른쪽으로 되는게 아니라 오른쪽에서 왼쪽으로 보이게 됨. (EX. 아랍어와 같은 텍스트를 쓸때 )