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 |