[HTML 테그강좌] 표제테크(h) 줄바꿈테그(br/p) 수평선테그(hr)

안녕하세요 낭만고양이 입니다. 오늘부터 html 테그강좌를 시작할려고합니다. 이번 시간에는 html 에서 아주 중요한 표제테크(h),줄바꿈테그 (br/p),수평선테그(hr)에 대해 알아보도록 하겠습니다. 요즘에는 테그를 몰라도 포스팅하는데 큰 지장은 없지만 그래도 아는것이 훨신 유익합니다. 이번에 공부할 테그는 가장 기본이 되는 테그이기 때문에 알아두시면 아주 유용할것입니다.

■  표제테그 h1,h2,h3,h4,h5,h6

<h1>h1 낭만고양이와 함께 배우는  쉬운 html </h1>
 
<h2>h2 낭만고양이와 함께 배우는  쉬운 html </h2>
 
<h3>h3 낭만고양이와 함께 배우는  쉬운 html </h3>
 
<h4>h4 낭만고양이와 함께 배우는  쉬운 html </h4>
 
<h5>h5 낭만고양이와 함께 배우는  쉬운 html </h5>
 
<h6>h6 낭만고양이와 함께 배우는  쉬운 html </h6>

위 내용을 메모장으로 복사해서 다른이름으로 저장하기를 누르시고 파일형식을 모든파일로 설정하신후 "test.htm" 이라는 이름으로 바탕화면에다가 저장해보세요. 저장했으면 이제 바탕화면에 가서 저장된 파일을 실행해보시면 아래와 같이 뜰것입니다.

눈치 채셨겠지만 h1 이 제일 큰 글자 이고 h6은 제일 작은 글자입니다. 보통 블로그에서는 h3 정도를 소제목으로 많이 사용합니다. 참고하시면 좋을것같습니다.

■  줄바꿈 테그( br 과 p )

글을 적을때 줄바꿈을 할때는 br 테그를 사용하고 짧은 문장 토막  즉 단락을 표시할때는 p테그를 사용합니다. 따라서 p 테그는 줄바꿈을 하지만 좀더 위아래 간격이 있습니다. 단락을 표시해야하기 때문에 좀더 간격을 뛰우는 것입니다. 그럼 예를 들어 소스를 코딩해보겠습니다.

안녕하세요 br 테그를 사용하여 줄바꿈을 해보았습니다.<br />
 
안녕하세요 br 테그를 사용하여 줄바꿈을 해보았습니다.<br />
 
안녕하세요 br 테그를 사용하여 줄바꿈을 해보았습니다.<br />
 
안녕하세요 br 테그를 사용하여 줄바꿈을 해보았습니다.<br />
 
<p>안녕하세요 p 테그를 사용하여 줄바꿈을 해보았습니다. </p>
 
<p>안녕하세요 p 테그를 사용하여 줄바꿈을 해보았습니다. </p>
 
<p>안녕하세요 p 테그를 사용하여 줄바꿈을 해보았습니다. </p>
 
<p>안녕하세요 p 테그를 사용하여 줄바꿈을 해보았습니다. </p>

마찬가지로 위 소스를 메모장으로 붙여넣기 한후 저장해보시면  아래와 같이 창이 뜰것입니다.

눈치 채셨겠지만 br 테그는 글의 마지막에 한번만 <br> 로 입력하면 되지만 p 테그는 단란의 처음에 <p> 를 넣고 단란의 마지막에는 </p> 를 넣어줘야합니다. 위 이미지와 같이 p 테그를 사용했을때는 간격이 더 커졌음을 알수있습니다. 이제 p 테그와 br 테그의 차이점을 확실하게 아셨으리라 믿습니다.

■  수평선 테그 (hr)

hr 태그를 넣으면 수평선(Horizontal Line, 또는 구분선)이 생깁니다. html 문서에서 문단을 의미적으로 분리하고자 할 때 hr 태그를 사용할 수 있습니다. 그럼 어떻게 사용하는 지 아래를 보도록 하겠습니다.

<h3>낭만고양이와 함께 배우는  쉬운 html </h3><hr>
 
<h3>hr 테그는 수평선을 만듭니다. </h3><hr>
 
<h3>hr 테그는 수평선을 만듭니다. </h3>

hr 테그오 br 테그처럼 한번만 적으면 됩니다.  지금 까지 따라 하시느라 수고하셨습니다. 앞으로도 html 강좌 조금씩 하도록 하겠습니다. 저도 모르는 부분이 많지만 배우면서 강좌를 하고 있답니다. 많은 응원과 댓글 부탁드립니다. 감사합니다.

제 글이 도움이 되셨다면  "공감 (♡)" 한번씩 클릭해주시고 응원의 댓글들도 남겨주세요.