[HTML] 텍스트 관련 태그(Text)

Text관련 태그

<!-- head태그 -->
<!-- h$*6 ($는 숫자내림차순 *(곱하기)는 입력할 태그갯수)-->
<!-- h${안녕$}*6(h$(내림차순)에 {안녕$(내림차순)} * 6 (6번입력) 단축명령어 -->
<h1>안녕1</h1>
<h2>안녕2</h2>
<h3>안녕3</h3>
<h4>안녕4</h4>
<h5>안녕5</h5>
<h6>안녕6</h6>

---

단락 Paragraph(block요소)

<!-- 단락 paragraph -->
<!-- block 요소 -->
<!-- lorem ipsum 채우기 텍스트 -->
<!-- 하나이상의 공란, 개행, 탭문자는 모두 공란 하나로 처리된다. -->
<p>Lorem ipsum,              dolor sit amet consectetur, adipisicing elit. Iure amet eum repellendus beatae voluptates quos fugiat cupiditate repellat iusto vitae, ipsum, facilis dolores eaque reiciendis autem magnam soluta ratione sed?</p>
<p>Lorem ipsum 
       dolor sit amet consectetur adipisicing elit. Culpa corporis sed laborum at eveniet eius. Corrupti quae, omnis libero, ipsam similique, quibusdam sapiente id commodi doloremque labore accusantium obcaecati numquam?</p>
<p>Lorem ipsum                 dolor sit amet, consectetur adipisicing elit. Alias, enim beatae, saepe praesentium consequuntur deserunt veniam odit inventore sunt vel vero! Praesentium alias ipsa ex, dolores voluptatum eos aut. Aliquid!
Numquam, tempora ut vitae nisi blanditiis placeat eligendi voluptatum excepturi mollitia perspiciatis temporibus perferendis neque in quam similique? Inventore sed atque dicta est at impedit nostrum sint qui ipsum quo?
Necessitatibus asperiores harum voluptatum. Dicta perferendis, ratione, porro natus aut veritatis quae qui est voluptatibus maiores laborum laboriosam, ab voluptates omnis praesentium? Soluta, eius rerum. Velit fuga doloribus similique nesciunt!</p>

 

<!-- 공란, 개행문자 처리 -->
<!-- &(앰퍼센드)문자를 통해 처리, &nbsp : 1칸의 공란만 적용 -->
<!-- 개행은 br태그(enter) -->
<p>Lorem ipsum &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dolor, sit amet consectetur adipisicing elit. 
<br>
Delectus debitis ipsam architecto quod nihil ab beatae error eveniet expedita voluptatibus, ipsum quasi omnis commodi assumenda nostrum modi non in incidunt!</p>

---

짧은 글자 그룹 Span(Inline요소)

<!-- span 짧은글자그룹 -->
<!-- <span> ~ </span> -->
<!-- inline 요소 -->
<span style="background-color:blueviolet">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, molestias. Quae tempora, eius, vel tempore doloremque est quibusdam explicabo eligendi impedit enim officiis hic, consequatur ut quod assumenda corporis illo?</span>
<span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Modi, eligendi quo aperiam tempore quasi expedita debitis laborum adipisci pariatur eius ex, aliquid aut ullam, maxime architecto alias. Dolorem, nisi aspernatur?</span>

---

Pre-formatted

<!-- pre-formatted 작성한 그대로 화면에 render -->
<pre> ~ </pre>
<!-- 지정된 글꼴 너비로 출력 -->
<pre>Lorem ipsum 
            
      dolor 
sit amet consectetur,                 adipisicing elit. Deserunt, numquam. Facere beatae reiciendis maiores architecto omnis. Eius illum, ab optio ea placeat eligendi dolores officia officiis quas consequuntur inventore ut!</pre>

---

특수 문자 표현

<!-- 여는< : &lt; / 닫는> : &gt; -->
출력할 텍스트 : <pre>태그를 사용하면 작성한 그대로 렌더됩니다. <span>태그는 한뼘길이의 텍스트를 감쌉니다.
&lt;pre&gt;태그를 사용하면 작성한 그대로 렌더됩니다. &lt;span&gt;태그는 한뼘길이의 텍스트를 감쌉니다.

---

Phrase Tags

<!-- 부가기능을 가진 Phrase Tage : 시각적효과뿐 아니라 태그의 의미도 함게 해석된다. 
strong이 최신태그, b는 옛날태그-->
<strong>bold체로 강조한 안녕 </strong> 
<b>b로 강조한 안녕</b>
<br>

<!-- <em> 기울이기 -->
<em>기울여서 강조한 잘가</em>
<br>

<!-- <del> 취소선(중간글긋기) -->
<!-- <span style="text-decoration: line-through"> 시각장애인을 위한 취소선 표시. 중요 -->
<del>취소선</del>
<span style="text-decoration: line-through">나도취소</span>
<br>

<!-- <mark> 하이라이트효과(형광팬) -->
<mark>하이라이팅 효과</mark>
<br>

<!-- <ins> 밑줄긋기 -->
<ins>비 구름 가을 밑줄(추가내용)</ins>
<br>

<!-- <code> 코드텍스트 -->
<code>System.out.println("안녕");</code>
<br>

<!-- 
	<blockquote> ul인용태그 
	title = 인용구에 마우스를 올리면 나오는 문구
-->
<blockquote 
	title="http://osen.mt.co.kr/article/G1111659541"
  cite="http://osen.mt.co.kr/article/G1111659541">
두 차례나 사망설에 휩싸였던 배우 서이숙이 오늘 경찰서에 고소장을 제출했다.
</blockquote>

<!-- <hr> : 수평선 / <br> : 개행(앤터) -->