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

안녕하세요 낭만고양이 입니다 이번 시간에는 html 에서 아주 중요한 표제테크(h),줄바꿈테그 (br/p),수평선테그(hr)에 대해 알아보도록 하겠습니다. 가장 기본이 되는 테그이기 때문에 알아두시면 아주 유용할것입니다.

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

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

※위소스가 제대로 안보이면 아래를 보세요(모바일용)

<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 테그를 사용하여 줄바꿈을 해보았습니다.

안녕하세요 p 테그를 사용하여 줄바꿈을 해보았습니다. 
안녕하세요 p 테그를 사용하여 줄바꿈을 해보았습니다. 
안녕하세요 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 태그를 사용할 수 있습니다. 그럼 어떻게 사용하는 지 아래를 보도록 하겠습니다.

낭만고양이와 함께 배우는  쉬운 html 

hr 테그는 수평선을 만듭니다. 

hr 테그는 수평선을 만듭니다. 

※위소스가 제대로안보이면 아래를 보세요(모바일)

<h3>낭만고양이와 함께 배우는  쉬운 html </h3><hr>

<h3>hr 테그는 수평선을 만듭니다. </h3><hr>

<h3>hr 테그는 수평선을 만듭니다. </h3>

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

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