Front/HTML

[HTML4] p, hn , hr, span 태그

시월해 2021. 4. 20. 16:48

* p(paragraph 태그 : 하나의 문단(문장, 단락)을 사용하는 태그 
br 태그는 줄바꿈을 해 주는 태그이다.끝 태그가 없다.
==> 단독태그라고 한다.

* hn(제목 태그)와 p태그는 자체적으로 줄바꿈 기능을 제공해 줌.
==> 상단 한 줄, 하단 한 줄 공백 지원(블록레벨 요소)

 

* hr 태그 : 선그리기(수평) 태그 ==> 단독태그 
==> 문단의 분리를 위해서 사용되는 태그. 기본적으로 위치가 가운데 정렬.

 

* span 태그는 단어나 문장의 글자만 선택을 하는 태그.(인라인레벨 요소)

 

* pre(preformatted text)태그 : 사용자가 입력한 그대로 출력시키는 태그.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

	<p> 1절 : 동해물과 백두산이 마르고 닳도록 <br>
	         하느님이 보우하사 우리나라 만세. <br>
	         무궁화 삼천리 화려강산 <br>
	         대한사람 대한으로 길이 보전하세.</p>

	 <span>span 태그입니다.</span>
	 <span>span 태그입니다.</span>
	 <span>span 태그입니다.</span>
</body>
</html>

구역이 나눠진 것을 볼 수 있다.


<title>Insert title here</title>
</head>
<body>
	<p> 1절 : 동해물과 백두산이 마르고 닳도록 <br>
		         하느님이 보우하사 우리나라 만세. <br>
		         무궁화 삼천리 화려강산 <br>
		         대한사람 대한으로 길이 보전하세.</p>

	<hr>
	<hr width="800">
	<hr width="80%">
	         
	<p> 2절 : 남산 위에 저 소나무 철갑을 두른 듯 <br>
		         바람 서리 불변함은 우리 기상일세. <br>
		         무궁화 삼천리 화려강산 <br>
		         대한사람 대한으로 길이 보전하세.</p>
</body>
</html>

hr 선


<title>Insert title here</title>
</head>
<body>

	<pre>
	1절 : 동해물과                         백두산이 마르고 닳도록
	 하느님이 보우하사 우리나라 만세.
	 무궁화 삼천리 화려강산
	 대한사람 대한으로 길이 보전하세.
	 </pre>
</body>
</html>

따로 공백문자를 쓰지 않아도 돼서 편함.