고정 헤더 영역
상세 컨텐츠
본문
반응형
<h1> 태그 - 제목 표시하기
제목 텍스트는 일반 텍스트보다 굵고 진하게 표시된다. <h1> 태그는 제목을 뜻하는 heading의 줄임말로 'h'와 제목 크기를 나타내는 숫자(1~6)를 사용해서 제목을 표시할 수 있다.
<h1> 제목 </h1>
<p> 태그 - 단락 만들기
텍스트를 표시할 때 가장 많이 사용하는 태그다. <p> 태그는 parapraph의 줄임말로, 텍스트 단락을 만드는데 이때 '단락'이란 앞 뒤에 줄바꿈이 있는 텍스트 덩어리를 말한다. <p>태그로 시작해서 </p> 만날 때까지 줄바꿈 없이 텍스트를 한 줄로 표시한다.
<p> 텍스트 </p>
<br> 태그 - 줄 바꾸기
텍스트 단락에서 줄바꿈을 하더라도 웹 브라우저 창에는 줄바꿈 없이 한줄로 표시된다. 줄바꿈을 할 경우 줄 바꿀 위치에 <br> 태그를 사용한다.
<br/>
<hr> 태그 - 수평 줄 넣기
<hr> 태그는 horizontal의 줄임말로 수평 줄을 사용할 때 사용한다. 텍스트 단락의 주제가 바뀔 때 분위기 전환용으로 사용한다.
<hr>
<blockquote> 태그 - 인용문 넣기
다른 블로그나 사이트의 글을 인용할 경우, <blockquote> 태그를 이용해 표시한다.
<!DOCTYPE PUBLIC contentType="text/html; charset="utf-8">
<html>
<head>
<title>텍스트</title>
</head>
글의 본문입니다.
<body>
<blockquote>
오늘의 이야기는 여기있었다고 이야기를 한다. 다른 블로그에서 작성된 내용을 입력하는 곳입니다.
</blockquote>
</body>
</html>
실행 결과
<pre> 태그 - 입력하는 그대로 화면에 표시하기
html 에서는 아무리 공백을 넣더라도 브라우저 창에는 한 개의 공백만 표시된다. <pre> 태그를 사용한 경우, 소스에 표시한 공백이 브라우저에 그대로 표시된다.
<!DOCTYPE PUBLIC contentType="text/html; charset="utf-8">
<html>
<head>
<title>텍스트</title>
</head>
글의 본문입니다.
<body>
<pre>
function showTag() {
var a =1;
var b = 2;
console.log(`a : ${a} / b : ${b}`);
}
</pre>
</body>
</html>
실행결과
반응형
'IT > HTML 및 CSS' 카테고리의 다른 글
| [HTML 기초] 링크 만들기 (0) | 2021.03.30 |
|---|---|
| [HTML 기초] 목록을 만드는 태그 (0) | 2021.03.29 |
| [HTML 기초] 텍스트를 한 줄로 표시하는 태그 (0) | 2021.03.28 |
| [HTML 기초] 테이블 태그 (0) | 2021.03.21 |
| [HTML 기초] HTML의 기본 개념 이해하기 (0) | 2021.03.18 |
댓글 영역