연속된 두 개 이상의 공백 출력하기

By | 2013년 12월 24일

[목적]
브라우저에서 연속된 두 개 이상의 공백 출력하는 방법을 배운다.

[이론]
06-01

이전 실습 ‘줄 바꾸기‘의 과제를 살펴보면 출력 결과가 위와 같으므로 ‘<body>’ ~ ‘</body>’ 태그 사이의 단어에 여러개의 공백을 삽입하여 다음과 같은 HTML 코드를 생각했을 것이다.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>홈페이지</title>
    </head>
    <body>
        안산대학교    인터넷정보과    홈페이지제작
    </body>
</html>

그러나 위와 같이 작성한 HTML 코드를 브라우저로 확인 한다면 단어 사이에 여러개의 공백이 출력되지 않고 단 하나의 공백만이 출력된다. 이는 HTML 코드 내에 연속적으로 삽입된 공백은 브라우저에서 단 하나의 공백으로 처리되기 때문이다.

06-02

홈페이지(HTML) 작성 시 한 개 이상의 공백을 출력하기 위해서는 출력 하고자 하는 공백 위치에 원하는 수만큼의 ‘&nbsp;’를 추가하면 된다. 예를 들어 브라우저 상에 연속된 네 개의 공백을 출력하고 싶으면 해당 위치에 ‘&nbsp;&nbsp;&nbsp;&nbsp;’를 삽입하면 된다.

[실습]
1. 아래 파일을 작성한 후 이름을 ‘exam-06-01.html’로 하여 저장한다.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>홈페이지</title>
    </head>
    <body>
        안산대학교&nbsp;&nbsp;&nbsp;&nbsp;인터넷정보과&nbsp;&nbsp;&nbsp;&nbsp;홈페이지제작
    </body>
</html>

2. 브라우저를 통해 ‘exam-06-01.html’을 확인한다. 그러면 아래 그림과 같이 단어와 단어 사이에 삽입된 ‘&nbsp;’의 개수 만큼의 공백이출력됨을 볼 수 있다.

06-01

[과제]
다음과 같이 브라우저 상에 HTML 태그를 출력하는 HTML 파일을 ‘exam-07-01.html’로 작성해 보자.

07-01