html <br> <h1>~<h6><hr><p><pre> 태그에 대해 알아보자.

html 에서 단락을 구성하는 태그들이 있다.

 

(1) <br> 줄바꿈 태그

See the Pen Untitled by han (@rsfreegood) on CodePen.

• <br>은 키보드의 Enter 랑 똑같다
• <br><br>은 Enter 두번 누른것과 같다 (ex. 상단 '나나나' 밑에 한칸 더 떨어진 것을 보면 알수있다.)
• </br> 이렇게 써도 되지만 홈페이지 전체 작업 후 더 깔끔하게 보이기 위해 <br> 이렇게 쓰고있다.  크게 중요하진 않지만 홈페이지를 다 만들고 나면 소스들이 정말 많기 때문에 습관적으로 첨부터 작업할때 </br> 은 <br>로 수정해서 작업한다.

 

(2) <h1></h1>~<h6></h6> 글자크기 제어 및 단락 구분

See the Pen Untitled by han (@rsfreegood) on CodePen.

• h 뒤에 붙는 숫자가 작을수록 글자크기가 크다 <h1> 이 제일 크기가 크고 <h6> 이 가장 작다.
• 글자 양옆으로 <h1> 글자  </h1>  으로 써준다 ( 글자를 감싸주어 이부분만 적용하겠다 라고 생각하면 좋을 것 같다. 아니면 닫아준다라는 의미도 좋다.)

 

See the Pen Untitled by han (@rsfreegood) on CodePen.

• <h1>~<h6>태그는 단락을 구분짓는다. 상단 예시처럼 <br>을 쓰지않아도 '나나나' 위 아래로 줄바꿈이 되었다.

 

(3) <hr> 글자아래 선추가 및 단락 구분

See the Pen Untitled by han (@rsfreegood) on CodePen.

• '가가가' 옆에 <hr> 추가하므로 수평선이 생기고  <br>을 준것같이 줄이 자동으로 바뀐것을 확인할 수있다.

 

(4) <p></p> 글자아래 선추가 및 단락 구분

See the Pen Untitled by han (@rsfreegood) on CodePen.

• <p> 내용 </p>  p태그도 <h1>태그와 마찬가지고 </p>로 닫아주어야 한다.
• <p></p> 는 단락을 구분하기 때문에 줄바꿈 하려면 <br> 따로 써줘야 한다.
• '가가가 나나나' 사이에는 <br>이 없어 한줄로 적용되며 '다다다 라라라' 사이에는 <br>이 있어서 줄바꿈되어 보여진다.