데니스의 놀이터

1. <hr> 태그 - 수평 줄 넣기

 기본형 : <hr>

 - <hr> 태그의 hr은 수평선 이라는 뜻을 가진 horizontal 에서 스펠링 hr을 따와서 사용하는 태그입니다.

   보통 여러 개의 텍스트 단락을 나열하는 도중에 텍스트 단락의 주제가 바뀔 때 분위기 전환용으로 사용합니다.

<hr>태그를 사용하여 간단한 예제를 작성해보겠습니다.

<사진 1.1>

<hr> 태그, 즉 수평선을 기준으로 위에는 프로그래밍 언어를 입력하고 수평선 밑에는 나라별 언어를 작성했습니다. 

결과 화면은 아래와 같습니다.

<사진 1.1 결과 화면>

프로그래밍 언어와 나라별 언어를 구분하기 쉽게 <hr> 태그를 사용하여 구분지었습니다.

1. <br> 태그 - 줄 바꾸기

 기본형 : <br>

 - 코드 작성시 줄바꿈(엔터)을 하더라도 결과 화면은 줄바꿈 없이 한 줄로 표시됩니다.

<사진 1.1>

<사진 1.1>은 Hello, World!를 입력 후 엔터를 눌렀고 HTML5를 입력 후 엔터를 눌렀으며 CSS와 JavaScript도

마찬가지입니다. 우리가 예상하는 결과와는 달리 결과 화면은 아래와 같습니다.

<사진 1.1 결과 화면>

이렇게 웹 브라우저 창에는 줄바꿈 없이 한 줄로 표시됩니다. 웹 브라우저 창에서 줄바꿈을 하려면 줄을 바꿀 위치에

<br> 태그를 사용합니다. <br>태그는 닫는 태그가 없습니다.

<사진 1.2>

<사진 1.2>과 같이 줄바꿈을 희망하는 곳에 <br>태그를 입력하면 마치 엔터를 누른 것과 같은 기능을 합니다.

<사진 1.2 결과 화면>

1. <p> 태그 - 단락 만들기

기본형 : <p> 텍스트 </p>

 - 텍스트를 표시할 때 가장 많이 사용하는 태그가 <p> 태그입니다. <p> 태그는 단락을 만드는데 '단락'이란 앞뒤에 줄바꿈이

   있는 텍스트 덩어리를 의미합니다.

   <p> 태그는 다음 </p> 태그를 만날 때까지 줄바꿈 없이 텍스트를 한 줄로 표시하는데 텍스트 줄이 웹 브라우저의 창의

   너비보다 길어질 경우, 줄이 자동으로 바뀝니다.

   아래 코드는 <p>태그를 사용하여 다섯 문장을 작성했습니다.

 <사진 1.1>

<사진1.1> 코드의 결과 화면은 아래와 같습니다.

<사진 1.1 결과 화면>

결과 화면을 보시면 <br>태그를 사용하지 않았지만 <p>태그를 사용하여 자동 줄바꿈이 되는 것을 확인할 수 있습니다!

 * <br> 태그를 두 개 삽입하면 <p> 태그와 비슷한 기능을 한 것처럼 보일 수 있으나 웹 브라우저는 이것을 텍스트 단락으로

   인식하지 않는다는 것을 주의해주세요!