반응형
이번 포스팅은 <body> 태그 안에 들어가는 기본적인 태그들 중에 글꼴 태그를 위주로 알아보겠습니다. HTML에도 한글, 엑셀, 파워포인트 등에서 볼 수 있는 [텍스트 진하게], [텍스트 기울기], [밑줄] 등의 다양한 글꼴 기능을 사용할 수 있습니다.
1. 줄바꿈 태그 <br>과 공백 nbsp;
<!DOCTYPE html> <html> <head> <title>.</title> <meta charset="UTF-8"> </head> <body> 두부 블로그에서 HTML을 배우자! 두부 블로그에서 HTML을 배우자! 두부 블로그에서 자바스크립트를 배우자! </body> </html>
위의 코드를 보면 알 수 있듯이 <body>태그에서 아무리 'spacebar'와 'Enter'키를 눌러도 웹브라우저 상에서는 변화가 없습니다. 그렇다면 줄바꿈을 할 수 없는 걸까요? 아닙니다! <br>태그를 이용해서 줄 바꿈을 할 수 있습니다.
또한, 여러번의 공백에도 불구하고 웹브라우저 상에서는 단 한 번의 공백만 이루어졌습니다. 이러한 문제점도 를 통해서 해결할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>.</title> <meta charset="UTF-8"> </head> <body> 두부 블로그에서 HTML을 배우자!<br> 두부 블로그에서 HTML배우자!<br> 두부 블로그에서 HTML을 배우자!<br> </body> </html>
2. 문단 태그 <p>
<!DOCTYPE html> <html> <head> <title>.</title> <meta charset="UTF-8"> </head> <body> 두부 블로그에서 HTML을 배우자!<p> HTML은 정말 쉬워! </body> </html>
글을 쓰다 보면 문단 단위로 끊어야 하는 순간이 옵니다. 그런 경우에 <p>태그를 사용하시면 됩니다. <br>태그와 다르게 문단 단위의 태그이기 때문에 줄 간격이 큽니다.
3. 제목 태그 <h1> ~ <h6>
<!DOCTYPE html> <html> <head> <title>.</title> <meta charset="UTF-8"> </head> <body> <h1>두부 블로그에서 HTML을 배우자!</h1> <h2>두부 블로그에서 HTML을 배우자!</h2> <h3>두부 블로그에서 HTML을 배우자!</h3> <h4>두부 블로그에서 HTML을 배우자!</h4> <h5>두부 블로그에서 HTML을 배우자!</h5> <h6>두부 블로그에서 HTML을 배우자!</h6> </body> </html>
HTML은 제목을 표현할 수 있는 태그가 <h1>태그부터 <h6>까지 총 6개가 있습니다. 다양한 크기를 제공하며 웹브라우저에서 공간을 많이 차지한다고 메모리를 많이 차지하는 건 아닙니다.
4. 서식 태그
| b, strong | 굵게 | s, strike, del | 취소선 |
| i, em | 기울기 | u, ins | 밑줄 |
| mark | 형광펜 | sup | 위 첨자 |
| sub | 아래 첨자 |
<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"> </head> <body> <b>두부 블로그에서 자바스크립트를 배우자!</b><br> <strong>두부 블로그에서 자바스크립트를 배우자!</strong><br> <br> <strike>두부 블로그에서 자바스크립트를 배우자!</strike><br> <s>두부 블로그에서 자바스크립트를 배우자!</s><br> <del>두부 블로그에서 자바스크립트를 배우자!</del><br> <br> <i>두부 블로그에서 자바스크립트를 배우자!</i><br> <em>두부 블로그에서 자바스크립트를 배우자!</em><br> <br> <u>두부 블로그에서 자바스크립트를 배우자!</u><br> <ins>두부 블로그에서 자바스크립트를 배우자!</ins><br> <br> <mark>두부 블로그에서 자바스크립트를 배우자!</mark><br> <br> 두부 블로그에서 자바스크립트를 배우자!<sup>두부 블로그에서 자바스크립트를 배우자!</sup><br> <br> 두부 블로그에서 자바스크립트를 배우자!<sub>두부 블로그에서 자바스크립트를 배우자!</sub> </html>
반응형
'웹 디자인 > HTML · CSS' 카테고리의 다른 글
| [HTML/CSS] table 태그로 표 만들기 (tr, th, td 태그) (0) | 2021.12.17 |
|---|---|
| [HTML/CSS] a 태그와 이미지 태그 사용해보기 (map 태그) (0) | 2021.12.16 |
| [HTML/CSS] 필수 태그와 주석 처리 알아보기 (html, head, body 등) (0) | 2021.12.07 |
| [HTML/CSS] 블록과 인라인 요소 태그 종류와 특징 (0) | 2021.12.04 |
| [HTML/CSS] 편집 프로그램 Sublime Text 다운로드 및 사용법 (0) | 2021.12.03 |