반응형
이번 포스팅은 <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 |