따라하며 배우는 HTML - #3 ( 줄바꿈 / 엔티티코드 )

HTML 줄바꿈 및 특수문자코드 (엔티티코드)

이번에는 내용을 쓸 때 꼭 쓸 수 밖에 없는 중요한 태그인 <br /> 태그와 HTML 에서 사용되는 특수 문자 중에 자주 사용되어지는 것으로만 몇개 나열해 보도록 하겠습니다. 

<p> 태그내에서 글을 쓸 때 내용을 입력하고 엔터를 치고 또 내용을 입력하면 실제 화면상에서는 줄바꿈이 되어 있지 않아서 당황할 수 있습니다. 

HTML 문서에서는 줄바꿈을 하기위해서 <br /> 태그를 사용해 주셔야 합니다. ( <br> 로 사용하셔도 됩니다. ) 

줄바꿈과 마찬가지로 내용 중에 띄어쓰기를 여러번 하셔도 띄어쓰기가 한번만 되어지도록 되어 있어서 실제화면상에서는 한칸만 띄어쓰기 됩니다. 

이 때는 특수 문자 코드인 엔티티코드를 써주셔야 하는데 &nbsp; 라고 써 주시면 한칸 공백문자 (띄어쓰기) 됩니다. 

당연히 여러번 써주시면 여러칸 띄어쓰기 되겠죠..^^

아래의 내용을 따라해 보기 전에 동영상으로 미리보는 시간을 가져보고 차근차근 따라해 보아요 ^^

<p>

나비야 나비야 이리 날아 오너라

노랑나비 흰나비 춤을 추며 오너라

봄바람에 꽃잎도 방긋방긋 웃으며

참새도 짹짹짹 노래하며 춤춘다

</p>

이렇게 태그 내용을 쓰게 되면 실제 화면상에는 아래와 같이 보이게 됩니다. 

나비야 나비야 이리 날아 오너라 노랑나비 흰나비 춤을 추며 오너라 봄바람에 꽃잎도 방긋방긋 웃으며 참새도 짹짹짹 노래하며 춤춘다

여기에 <br /> 태그를 줄바꿈 할 곳에 써주면 실제로 줄바꿈을 하지 않더라도 

<p>

나비야 나비야 이리 날아 오너라 <br />

노랑나비 흰나비 춤을 추며 오너라 <br />

봄바람에 꽃잎도 방긋방긋 웃으며 <br /> 참새도 짹짹짹 노래하며 춤춘다 <br />

</p>

아래와 같이 화면상에서 잘 표현되어 집니다. 

나비야 나비야 이리 날아 오너라

노랑나비 흰나비 춤을 추며 오너라

봄바람에 꽃잎도 방긋방긋 웃으며

참새도 짹짹짹 노래하며 춤춘다

이렇게 줄바꿈을 하실 수 있습니다. 

이제 엔티티코드를 알아보도록 하겠습니다. 이건 외워두시면 편리하게 사용하실 수 있습니다. 

그렇다고 못 외우셔도 상관 없습니다. 검색엔진에서 엔티티코드라고 치시면 수두룩하게 나오니까 걱정하실 필요는 전혀 없으실거에요

가장 많이 쓰이는 엔티티코드 다섯 개만 나열해 보겠습니다.

&lt;	<
%gt;	>
&nbsp;	띄어쓰기( 공백문자 " " )
&amp;	&
&copy;	ⓒ

여기서 우리가 알아볼 코드는 띄어쓰기 를 한번 알아보겠습니다. 

띄어       쓰기 

라고 쳐도 화면상에는 

띄어 쓰기

라고 나오게 됩니다. 

이 때 &nbsp; 코드를 띄어쓰기 할 곳에 여러번 넣게 되면 저는 다섯번 넣어보도록 하겠습니다. 

띄어&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;쓰기

그러면 결과 화면은 아래와 같이 다섯칸 띄어쓰기된 화면이 나오게 될 것입니다. 

띄어     쓰기

다른 엔티티코드들은 한번씩 해보세요 ~ ^^

더 많은 엔티티 코드 들이 있으니 더 알아보시고 싶으시면 검색엔진에 엔티티코드라고 쳐보시면 많은 정보를 보실 수 있으실 겁니다.

그럼 오늘은 여기까지 하고 다음에 또 뵈요 ~ ^0^y