[HTML] 태그의 기초 ,   , br , pre , p 태그 사용법

안녕하세요 오늘은 HTML 태그의 기초에 무엇이 있는지 알아보겠습니다.

 

1.   

 

  는 non breaking space의 약자로 태그는 아니지만 문자사이에 공백을 넣어주는 기능을 합니다.

 

예를들어서 <div>제목</div>를 입력했을때 출력은 기본으로 "제목"으로 되지만 제목 사이에 &nbsp;를 넣어주면

 

<div>제&nbsp;목</div>

출력은 "제  목"

 

제목 사이에 일정한 공백이 생기게됩니다.

더 띄우고 싶다면 여러개를 넣어주면 됩니다.

 

<div>제&nbsp;&nbsp;목</div>

출력은 "제    목" 

 

<div>제&nbsp;&nbsp;&nbsp;목</div>

출력은 "제       목" 

 

 

2. br

 

<br>태그는 line break의 약자로 줄바꿈을 해주는 기능을 가집니다.

<br>태그는 다른 태그들과 다르게 닫는 태그를 갖고 있지않습니다.

<div>안녕하세요</div> 

<div>안녕<br>하세요</div> 안녕하세요 사이에 <br>을 넣어주게되면

출력 

"안녕

하세요" 

 

br을 넣어준 기점으로 줄바꿈이 되어 출력됩니다.

 

 

3. pre

 

<pre>는 performatted text의 약자로 입력한 대로 화면 출력되는 태그입니다.

 

즉 코드자체를 표시할때 프로그램 소스를 표현하는데 많이 사용합니다.

그리고 원하는 만틈의 공백이나 문단을 바꿀 때에 <br>과<p>태그가 필요하지만 <pre>태그를 이용하면

입력한 그대로를 반영하여 출력해줍니다.

pre태그는 이해가 쉽도록 코드펜을 아래 캡쳐화면을 활용해보았습니다.

 

 

4. p

 

<p>태그는 paragraph 약자로 문단을 구분할 때 씁니다.

즉 p태그는  br태그가 두번 들어간 것과 같은 결과가 나옵니다.

 

<p>안녕하세요</p>

<p>안녕하세요</p>

<p>안녕하세요</p>

 

출력 

"

안녕하세요

 

안녕하세요

 

안녕하세요

"