1. <p> 태그와 <pre> 태그 차이

<!DOCTYPE html>
<body>
	<h1>p 태그와 pre 태그의 차이</h1>
    <h3>p 태그</h3>
    <p>- p 태그는 단독으로 줄바꿈을 할 수가 없다.<br>
       - 줄바꿈을 하고 싶으면 br 태그를 이용해야 한다.</p>
    <h3>pre 태그</h3>
    <pre>- pre 태그는 단독으로 줄바꿈을 할 수가 있다.
- pre태그는 입력한 그대로 출력한다.
    </pre>
</body>

<p> ~ </p>

  - <p> 태그는 단독으로 줄바꿈을 할 수 없으므로 <br> 태그를 이용하여 줄바꿈을 해야 한다.

 

<br> ~ </br>

  - <br> 태그는 Line break의 약자로, 줄을 바꾼다는 의미다.

 

<pre> ~ <pre>

  - <pre> 태그는 Preformatted Text의 약자로, <pre> 태그로 감싼 문장은 입력한 그대로 브라우저에 출력할 수 있다.

 

 

 

2. <b> 태그와 <strong> 태그 차이

<!DOCTYPE html>
<body>
    <h1>b 태그와 strong 태그 차이</h1>
    <p><b>b 태그</b>와 <strong>strong 태그</strong>는 글자를 굵게 표현한다.</p>
</body>

<b> ~ </b>

  - <b> 태그는 bold의 약자로, 단순히 글자를 굵게 표현하고 싶을 때 사용한다.

  

<strong> ~ </strong>

  - <b> 태그처럼 글자를 굵게 표현하지만, 중요한 내용을 강조할 때 사용한다.

 

 

 

3. <i> 태그와 <em> 태그의 차이

<!DOCTYPE html>
<body>
    <h1>i 태그와 em 태그 차이</h1>
    <p><i>i 태그</i>와 <em>em 태그</em>는 글자를 이탤릭체로 표현한다.</p>
</body>

<i> ~ </i>

  - <i> 태그는 Italic의 약자로, 단순히 글자를 이탤릭체로 표현하고 싶을 때 사용한다.

 

<em> ~ </em>

  - <i> 태그처럼 글자를 이탤릭체로 표현하지만, 중요한 내용을 강조할 때 사용한다.

 

 

 

4. <mark>, <del>, <ins> 태그 

<!DOCTYPE html>
<body>
    <h1>mark 태그</h1>
    <p><mark>mark 태그는</mark> 텍스트에 하이라이팅 효과를 적용시켜준다.</p>
<hr>
    <h1>del 태그</h1>
    <p><del>del 태그는</del> 텍스트 중앙에 가로선을 만든다.</p>
<hr>
    <h1>ins 태그</h1>
    <p><ins>ins 태그는</ins> 텍스트 밑에 가로선을 만든다.</p>
</body>

<mark> ~ </mark>

  - <mark> 태그는 텍스트에 하이라이팅(highlighting) 효과를 적용시켜 준다.

 

<del> ~ </del>

  - <del> 태그는 Delete의 약자로,  텍스트가 삭제됐음을 나타낸다.

 

<ins> ~ </ins>

  - <ins> 태그는 Insert의 약자로, 텍스트가 새로 추가되었음을 나타낸다.

 

 

 

5. <sup>, <sub> 태그 

<!DOCTYPE html>
<body>
    <h1>sup 태그</h1>
    <p>sup 태그는 위 첨자를 표현하는데 사용</p>
    <p>a<sup>2</sup>+b<sup>2</sup>=(a+b)(a-b)</p>
<hr>
    <h1>sub 태그</h1>
    <p>sub 태그는 아래 첨자를 표현하는데 사용</p>
    <p>물은 H<sub>2</sub>O</p>
</body>

<sup> ~ </sup>

  - <sup> 태그는 Superscript의 약자로, 위 첨자를 표현할 때 사용한다.

 

<sub> ~ </sub>

  - <sub> 태그는 Subscript의 약자로, 아래 첨자를 표현할 때 사용한다.

 

 

 

6. <q>, <blockquote> 태그 

<!DOCTYPE html>
<body>
    <h1>q 태그</h1>
    <p><q>q 태그</q>는 큰따옴표를 표현할 때 사용</p>
<hr>
    <h1>blockquote 태그</h1>
    <p><blockquote>blockquote 태그는 길이가 긴 인용문에 사용</blockquote> </p>
</body>

<q> ~ </q> 

  - <q> 태그는 Quotation의 약자로, 길이가 짧은 인용구를 표현할 때 사용하며, 자동으로 앞뒤에 큰따옴표가 붙는다.

 

<blockquote> ~ </blockquote> 

  - <blockquote> 태그는 Block Quatation의 약자로, 길이가 긴 인용문을 표현할 때 사용하며, 인용 부분을 별도의 단락으로 구분하여 나타낸다.

 

 

 

7. <abbr> 태그 

<!DOCTYPE html>
<body>
    <p><abbr title="abbr태그는 축약어를 쓸 때 사용하는 태그">abbr</abbr></p>
</body>

<abbr> ~ </abbr>

  - <abbr> 태그는 abbreviation의 약자로, 축약어를 쓸 때 사용하는 태그다.

  - 마우스 커서를 abbr로 가져가면 위 사진처럼 내용이 나타난다.

 

 

 

8. <address> 태그 

<!DOCTYPE html>
<body>
    <h1>address</h1>
    <p>address 태그는 주소, 메일, 전화번호 등을 표시할 때 사용</p>
    <p>우리집 주소는 <address>서울특별시<br> 
        강남구 대치동</address></p>
</body>

<address> ~ </address> 

  - <address> 태그는 이탤릭체로 표현된다.

  - 주소, 메일, 전화번호 등을 표시할 때 사용한다.

 

 

9. 주석

<!DOCTYPE html>
<body>
    <h1>주석</h1>
    <!--주석은 코드에 대한 이해를 돕는 설명이나 디버깅을 위해 작성한 구문이다.-->
</body>

<!--   --> 

  - 주석은 개발자가 작성한 해당 코드에 대한 이해를 돕는 설명이나 디버깅을 위해 작성한 구문이다.

  - 웹 브라우저에서는 주석이 표시되지 않는다.

  - HTML 코드에 입력되있는 주석을 읽고 싶다면, 웹 브라우저의 페이지 소스 보기 등을 통해 확인할 수 있다.

  - 단축키는 ctrl + / 이다.

 

 

'FrontEnd > HTMl' 카테고리의 다른 글

[HTML] 리스트와 테이블  (0) 2021.07.17
[HTML] 링크와 이미지  (0) 2021.07.17
[HTML] Style 속성  (0) 2021.07.17
[HTML] 문자셋  (0) 2021.07.17
HTML 의미와 기본 구조  (0) 2021.07.14

티스토리툴바