&ampnbsp; 와 <br> 태그

작성자 정보

  • 작성자 관리자
  • 아이피 122.♡.189.76
  • 작성일

컨텐츠 정보

본문

▷ 공백과 줄바꿈 처리 태그

⊙ 태그요소

HTML 문서는 공백(Space)을 한 칸만 허용한다.
두 칸 이상의 공백과 줄바꿈은 모두 한 칸으로 인식한다.

아래 실행결과에서처럼 줄도 여백도 없이 모두 공백(Space) 하나로 처리된다.
즉, 줄바꿈과 공백을 처리하기 위한 별도의 방법을 강구하여야 한다.

코드 작성

실행결과

&lthtml>
&lthead>
&lttitle>문단 태그의 사용 예&lt/title>
여기와' '저기 사이에 한칸을 띄웠습니다.
여기와'  '저기 사이에 두칸을 띄웠습니다.

윗줄와 아랫줄 사이에서 줄바꿈을 하였습니다.
화면에는 어떻게 나올까요?
이번에는 아주 긴 문장을 써보기로 합니다. 내용은 이렇습니다. 쥐손이풀과의 여러해살이풀. 높이는 1미터 정도이며, 잎은 마주나고 손바닥 모양이다. 6~8월에 분홍색 꽃이 잎 사이에서 나온 긴 꽃줄기에 두 개씩 피고 열매는 삭과(?果)를 맺는다. 풀 전체를 말려서 약용한다. 산과 들에서 자라는데 한국, 일본, 중국 등지에 분포한다. (Geranium sibiricum) - 사전내용
&lt/body>
&lt/html>

여기와 저기 사이에 한칸을 띄웠습니다. 여기와 저기 사이에 한칸을 띄웠습니다. 윗줄와 아랫줄 사이에서 줄바꿈을 하였습니다. 화면에는 어떻게 나올까요? 이번에는 아주 긴 문장을 써보기로 합니다. 내용은 이렇습니다. 쥐손이풀과의 여러해살이풀. 높이는 1미터 정도이며, 잎은 마주나고 손바닥 모양이다. 6~8월에 분홍색 꽃이 잎 사이에서 나온 긴 꽃줄기에 두 개씩 피고 열매는 삭과(?果)를 맺는다. 풀 전체를 말려서 약용한다. 산과 들에서 자라는데 한국, 일본, 중국 등지에 분포한다. (Geranium sibiricum) - 사전내용

① : non-breaking spaces - 공백을 나타내는 특수 문자

위에서 언급한 바와 같이 HTML 문서는 한 칸 이상의 공백(Space)은 모두 무시하므로 를 공백으로 사용한다.
즉, 공백 대신에 사용한다. 그런데 공백은 한 칸의 자리를 차지 하는데 반해 는 다섯 글자로 되어 있어 공백을 표시에 너무 많은 칸을 차지하는 단점이 있다.

코드 작성

실행결과

&lthtml>
&lthead>
&lttitle>태그의 사용 예&lt/title>
&lt/head>
&ltbody>
▷   ◁ 스페이스바로 세칸 띄움
▷&nbsp;&nbsp;&nbsp;◁&nbsp;을 세번
&lt/body>
&lt/html>
▷ ◁ 스페이스바로 세칸 띄움  ▷   ◁ 을 세번

② &ltbr> : 줄바꿈 태그

HTML 문서는 줄바꿈도 무시한다.
줄을 바꾸어 써도 공백 한칸을 두고 한 줄에 나타난다.
즉, 줄바꿈을 할 방법이 필요하게 되는데 이때 사용하는 태그가 &ltbr>이다.
다음 줄로 바뀌는 것을 볼 수 있다.
한 줄을 띄우고 싶다면 &ltbr>을 두 번 사용하면 된다.

코드 작성

실행결과

&lthtml>
&lthead>
&lttitle>태그의 사용 예&lt/title>
&lt/head>
&ltbody>
▷◁을 두번
한 줄을 건너 뛴 효과를 나타낸다.
&lt/body>
&lt/html>



을 두번 한 줄을 건너 뛴 효과를 나타낸다.

③ &ltnobr>...&lt/nobr> : 줄바꿈 방지 태그

HTML 문서는 창의 크기가 작아지면 자동으로 줄을 바꾸어 표시하도록 되어 있다.
이 기능을 사용하지 않겠다는 태그이다.
Nobr을 사용하면 창의 크기가 줄어들어도 한 줄로 나타나게 된다.
짧은 글에서는 아무런 변화도 나타나지 않는다.

코드 작성

실행결과


&lthead>
&lttitle>태그의 사용 예&lt/title>
&lt/head>
&ltbody>
일반 문장
&lthr>
웃음(笑)은
세상을 움직이는 힘의 근원이며
숨어 숨 쉬는 살아있는 萬病通治
의사와 같은 무한한 꿈의 에너지입니다.
&ltbr>&ltbr>
NoBR 문장
&lthr>
&ltnobr>
웃음(笑)은
세상을 움직이는 힘의 근원이며
숨어 숨 쉬는 살아있는 萬病通治
의사와 같은 무한한 꿈의 에너지입니다.
&ltbr>&ltbr>
&lt/nobr>
&lt/body>
&lt/html>

관련자료

댓글 0
등록된 댓글이 없습니다.
Total 30 / 1 Page
번호
제목
이름