[프론트엔드][html5] 6. 글자태그

Front-End/HTML 5

[프론트엔드][html5] 6. 글자태그

nanee_ 2021. 6. 29. 00:47

728x90

SMALL

제목태그

<h1> ~ <h6> : 숫자가 뒤로 갈수록 글자사이즈가 줄어든다. 타이틀에 주로 사용하고, 볼드체로 표현된다.

<body>
	<h1>header-1</h1>
	<h2>header-2</h2>
    	<h3>header-3</h3>
    	<h4>header-4</h4>
    	<h5>header-5</h5>
    	<h6>header-6</h6>
</body>

<body> 영역에 h1 ~ h6을 차례로 입력해서 출력을 확인해보면,

h 뒤의 숫자가 커질 수록 글자가 점점 줄어들고 있는 것을 확인할 수 있다.

단락 태그

<p> : 본문에서 단락을 구분하거나 나타낼 때 사용한다. 주로 글자를 담아서 표현한다.

*<br/> : 줄바꿈 태그

<body>
	<p>
    	Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br/>
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <br/>
        when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br/>
        It has survived not only five centuries, but also the leap into electronic typesetting, <br/>
        remaining essentially unchanged. <br/>
        It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, <br/>
        and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <br/>
    </p>
</body>

출력을 해서 확인해보면,

만약, 태그로 줄 바꾸는 것을 표현해주지 않았더라면 창의 크기에 맞춰서 줄 구분 없이 이어서 출력된다.

구분선 태그

<hr></hr> : 수평줄을 나타내는 태그로, 단락의 구분 주제가 바뀔 때 입체적으로 표현된다.

<body>
	<hr>수평줄을 나타내는 태그, 단락의 구분 주제가 바뀔 때 입체적으로 표현된다<hr/>
</body>

인용문 태그

<blockquote></blockquote> : 긴 인용문을 나타낼 때 사용하는 태그로 들여쓰기가 되어서 표현된다.

<body>
	<p>What is Lorem Ipsum?</p>
    	<blockquote>
        	"Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
    	</blockquote>
</body>

들여쓰기를 확인하기 위해서 <p> 태그와 함께 써보았다.

들여쓰기가 되어서 출력된다는 것을 확인할 수 있다.

글자 태그

<pre></pre> : 공백이나 줄바꿈 등이 그대로 표현되어지는 태그

<body>
	<pre>
more obscure Latin words, consectetur, 
from a Lorem Ipsum passage, and going through 
the cites of the word in classical literature, 
discovered the               undoubtable source.         Lorem Ipsum comes
    	</pre>
</body>

작성하고 싶은대로 작성하면 그대로 출력된다.

728x90

LIST