텍스트 관련 태그

---

http://www.yes24.com/Product/Goods/96674934

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - YES24

⌜Do it! HTML+CSS+자바스크립트 웹 표준의 정석⌟ 책을 공부하며 요약・정리한 내용입니다.

---

 

<hn>

(heading) 제목을 나타냄

<h1>이 가장 크고 <h2>, <h3>, <h4>, <h5>, <h6>순으로 크기가 작아짐

e.g.

<h1>불고기</h1>
<h2>불고기 레시피</h2>
<h3>상품 구성</h3>

실행 결과

<p>

단락을 입력함

<p>태그 사이에 앞뒤로 개행한다.

편집기의 <p>태그 내에서 개행을 하더라도 웹 브라우저에서는 한줄로 표시된다.

<br>

개행을 시켜줌

e.g.

<h1>불고기</h1>
<p>고기를 썰어 양념으로 재운 뒤 구워 먹는
   한국 요리 중 하나이다.</p>
<p>고기를 양념에 재우고<br>센 불에 올려 양념한 고기를 넣고 
   익히면서 볶아준다.</p>
<!-- html 문서에서 개행해도 웹 브라우저에서는 한 줄로 표시 -->

실행 결과

 

<blockquote>

인용할 때 사용하는 태그로 브라우저가 인용문을 인식할 수 있도록 사용

<h1>불고기</h1>
<p>고기를 썰어 양념으로 재운 뒤 구워 먹는
   한국 요리 중 하나이다.</p>
<p>고기를 양념에 재우고<br>센 불에 올려 양념한 고기를 넣고 익히면서 볶아준다.</p>
<blockquote>
    불고기는 고려시대 요리인 설하멱과 비슷한 형태의 요리라고 한다.
</blockquote>

실행 결과

 

<strong>, <b>

둘다 텍스트를 굵게 표시할 때에 사용

<strong>굵게 강조할 텍스트</strong>
<b>굵게 표시할 텍스트</b>

<strong>태그, <b> 태그는 차이가 느껴지지 않지만 경고나 주의 사항처럼 중요한 내용을 강조할 때는 <strong> 태그를 사용하고

단순히 글자만 굵게 표시할때는 <b> 태그 사용

보이는 것이 아니라 의미 중심인것이다.

HTML은 웹의 구조를 담당한다! 웹의 시각적인 표현은 CSS에게!

<h1>불고기</h1>
<p>고기를 썰어 양념으로 재운 뒤 구워 먹는
   한국 요리 중 하나이다.</p>
<p>고기를 양념에 재우고<br>센 불에 올려 양념한 고기를 넣고 익히면서 볶아준다.</p>
<p><b>불고기</b>는 고려시대 요리인 <strong>설하멱</strong>과 비슷한 형태의 요리라고 한다.</p>

실행 결과

 

<em>, <i>

<em> 태그와 <i> 태그는 텍스트를 기울여 표시할 때 사용

<em>이탤릭체로 강조할 텍스트</em>
<i>이탤릭체로 표시할 텍스트</i>

<em>태그는 emphasis의 줄임말

문장에서 특정 부분을 강조하고 싶을 때 사용

<i>태그는 italic의 줄임말

생각이나 용어, 관용구 등에서 사용

e.g.

<h1>불고기</h1>
<p>고기를 썰어 양념으로 재운 뒤 구워 먹는
    <i>한국 요리</i> 중 하나이다.</p>
<p>고기를 양념에 재우고<br>센 불에 올려 양념한 고기를 넣고 익히면서 볶아준다.</p>
<p><b>불고기</b>는 <em>고려시대 요리</em>인 <strong>설하멱</strong>과 비슷한 형태의 요리라고 한다.</p>

실행 결과

 

다양한 텍스트 관련 태그

종류	설명	예시
			<cite>	참고 내용 표시	<p>내가 경험한 가장 흥미진진한 일은 누군가를 만나는 일이다 - 영화, <cite>’비포선셋’</cite>중</p>
<code>	컴퓨터 인식을 위한 코드	<code>function savetheLocal()</code>
<small>	작게 표시해도 되는 택스트	<p> 가격 13,000원 <small>(부가세 별도)</small></p>
<sub>	아래 첨자 표시	<p> 물의 화학식: H<sub>2</sub>O</p>
<sup>	위 첨자 표시	<p>E=mc<sup>2</sup></p>
<s>	취소선 표시	<p><s>30%</s>40%</p>
<u>	밑줄 표시	<u>텍스트에 밑줄 긋기</u>
<ins>	공동 작업 문서에서 새로운 내용 삽입	<ins>새로운 내용 삽입</ins>
<del>	공동 작업 문서에서 기존 내용 삭제	<del>기존 내용 삭제</del>

 

 

 

---

https://www.instagram.com/p/CG4ii0ppQmb/?utm_source=ig_web_copy_link

부족하거나 잘못된 내용이 있을 경우 댓글 달아주시면 감사하겠습니다.

이 글에 부족한 부분이 존재할 경우 추후에 수정될 수 있습니다.

---