본문 바로가기

Dev. Front-End/HTML

[HTML] dfn/ strong / strike / b / i / u / center / sup / sub / br / p / pre / hr 사용법

▶ dfn/ strong / strike / b / i / u / center / sup / sub / br / p / pre / hr 사용법 

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
	이 글자는<dfn> 용어 정의</dfn><br>
	이 글자는<strong>강한 강조 표시</strong><br>
	이 글자는<strike> 삭제표시</strike><br>
	이 글자는<b> 굵은글씨</b><br>
	이 글자는<i>이태릭(기울임)</i><br>
	이 글자는<u> 밑줄효과</u><br>
	이 글자는<center>중간정렬효과</center><br>
	이 글자는<sup>위 첨자</sup>
	이 글자는<sub>아래 첨자</sub>
</body>
</html>

* <dfn> : 용어를 정의해주는 역할입니다.

* <strong> : 강한 강조표시를 해주는 역할입니다.

 

 

<strike> : 삭제를 표시해줍니다.

* <b> : 굵은 글씨를 만들어줍니다.

* <i> : 기울임을 나타내줍니다.

* <u> : 밑줄을 그어주는 밑줄효과입니다.

* <center> : 중간에 정렬되는 효과를 가지고있습니다.

* <sup> : 위첨자로써의 역할을 합니다.

* <sub> : 아래첨자로써의 역할을 합니다.

 

 

 

 

<body>
	공백을 	넣어보세요...<b>공백 및 공백라인</b>이 적용될까요?<p>
	<pre>공백을 	넣어보세요...<b>공백 및 공백라인</b>이 적용될까요?</pre><p>
	1. 기본 수평선
	<hr>
	2. 선의 두께
	<hr size="10">
	3. 선의 음영 효과 제거
	<hr size="10" noshade>
	4. 선의 길이, 색 지정, 위치 정렬
	<hr width="50%" align="center" color="blue">
	<p align="center">P 태그로도 정렬을 할 수 있다.</p>
	
</body>

 

 

* <br> : 쉽게 "Enter"라고 생각하시면됩니다. 한칸다음줄로 이동합니다.

* <p> : 위아래로 미세하게 한칸씩 띄어주는것을 볼수있습니다.

* <pre> : 결과값을 보면 "공백을 넣어보세요"라고 하면 스페이스바의 모든 값을 제가 원하는대로 넣어줍니다.

하지만, 그냥 넣을경우는 스페이스바 한칸만 띄어줍니다.

 

 


만약에 <pre>를 안쓰고 그냥 넣고싶다면 "공백을 &nbsp; &nbsp; &nbsp; &nbsp; 넣어보세요"라고 입력하면
&nbsp; <-이게 스페이스바 한칸이라서 총 4칸이 띄어져서 출력됩니다.

* <hr> : 밑에 한줄의 라인이 생기는 태그입니다.