|
▷ 공백과 줄바꿈 처리 태그
|
|
|
|
| |
|
|
|
⊙ 태그요소
|
|
|
|
HTML 문서는 공백(Space)을 한 칸만 허용한다.
두 칸 이상의 공백과 줄바꿈은 모두 한 칸으로 인식한다.
아래 실행결과에서처럼 줄도 여백도 없이 모두 공백(Space) 하나로 처리된다.
즉, 줄바꿈과 공백을 처리하기 위한 별도의 방법을 강구하여야 한다.
|
|
|
|
|
코드 작성
|
실행결과
|
<html>
<head>
<title>문단 태그의 사용 예</title>
여기와' '저기 사이에 한칸을 띄웠습니다.
여기와' '저기 사이에 두칸을 띄웠습니다.
윗줄와 아랫줄 사이에서 줄바꿈을 하였습니다.
화면에는 어떻게 나올까요?
이번에는 아주 긴 문장을 써보기로 합니다. 내용은 이렇습니다. 쥐손이풀과의 여러해살이풀. 높이는 1미터 정도이며, 잎은 마주나고 손바닥 모양이다. 6~8월에 분홍색 꽃이 잎 사이에서 나온 긴 꽃줄기에 두 개씩 피고 열매는 삭과(?果)를 맺는다. 풀 전체를 말려서 약용한다. 산과 들에서 자라는데 한국, 일본, 중국 등지에 분포한다. (Geranium sibiricum) - 사전내용
</body>
</html>
|
여기와 저기 사이에 한칸을 띄웠습니다. 여기와 저기 사이에 한칸을 띄웠습니다. 윗줄와 아랫줄 사이에서 줄바꿈을 하였습니다. 화면에는 어떻게
나올까요? 이번에는 아주 긴 문장을 써보기로 합니다. 내용은 이렇습니다. 쥐손이풀과의 여러해살이풀. 높이는 1미터 정도이며, 잎은 마주나고
손바닥 모양이다. 6~8월에 분홍색 꽃이 잎 사이에서 나온 긴 꽃줄기에 두 개씩 피고 열매는 삭과(?果)를 맺는다. 풀 전체를 말려서 약용한다.
산과 들에서 자라는데 한국, 일본, 중국 등지에 분포한다. (Geranium sibiricum) - 사전내용
|
|
|
|
|
|
|
|
① : non-breaking spaces - 공백을 나타내는 특수 문자
|
|
|
|
위에서 언급한 바와 같이 HTML 문서는 한 칸 이상의 공백(Space)은 모두 무시하므로 를 공백으로 사용한다.
즉, 공백 대신에 사용한다. 그런데 공백은 한 칸의 자리를 차지 하는데 반해 는 다섯 글자로 되어 있어 공백을 표시에 너무 많은 칸을 차지하는 단점이 있다.
|
|
|
|
|
코드 작성
|
실행결과
|
<html>
<head>
<title>태그의 사용 예</title>
</head>
<body>
▷ ◁ 스페이스바로 세칸 띄움
▷ ◁ 을 세번
</body>
</html>
|
▷ ◁ 스페이스바로 세칸 띄움
▷ ◁ 을 세번
|
|
|
|
|
|
|
|
② <br> : 줄바꿈 태그
|
|
|
|
HTML 문서는 줄바꿈도 무시한다.
줄을 바꾸어 써도 공백 한칸을 두고 한 줄에 나타난다.
즉, 줄바꿈을 할 방법이 필요하게 되는데 이때 사용하는 태그가 <br>이다.
다음 줄로 바뀌는 것을 볼 수 있다.
한 줄을 띄우고 싶다면 <br>을 두 번 사용하면 된다.
|
|
|
|
|
코드 작성
|
실행결과
|
<html>
<head>
<title>태그의 사용 예</title>
</head>
<body>
▷◁을 두번
한 줄을 건너 뛴 효과를 나타낸다.
</body>
</html>
|
▷
◁
을 두번
한 줄을 건너 뛴 효과를 나타낸다.
|
|
|
|
|
|
|
|
③ <nobr>...</nobr> : 줄바꿈 방지 태그
|
|
|
|
HTML 문서는 창의 크기가 작아지면 자동으로 줄을 바꾸어 표시하도록 되어 있다.
이 기능을 사용하지 않겠다는 태그이다.
Nobr을 사용하면 창의 크기가 줄어들어도 한 줄로 나타나게 된다.
짧은 글에서는 아무런 변화도 나타나지 않는다.
|
|
|
|
|
코드 작성
|
실행결과
|
<head>
<title>태그의 사용 예</title>
</head>
<body>
일반 문장
<hr>
웃음(笑)은
세상을 움직이는 힘의 근원이며
숨어 숨 쉬는 살아있는 萬病通治
의사와 같은 무한한 꿈의 에너지입니다.
<br><br>
NoBR 문장
<hr>
<nobr>
웃음(笑)은
세상을 움직이는 힘의 근원이며
숨어 숨 쉬는 살아있는 萬病通治
의사와 같은 무한한 꿈의 에너지입니다.
<br><br>
</nobr>
</body>
</html>
|
|
|
|
|
|
|
|
|
|
|
