[목적]
브라우저에서 연속된 두 개 이상의 공백 출력하는 방법을 배운다.
이전 실습 ‘줄 바꾸기‘의 과제를 살펴보면 출력 결과가 위와 같으므로 ‘<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 코드 내에 연속적으로 삽입된 공백은 브라우저에서 단 하나의 공백으로 처리되기 때문이다.
홈페이지(HTML) 작성 시 한 개 이상의 공백을 출력하기 위해서는 출력 하고자 하는 공백 위치에 원하는 수만큼의 ‘ ’를 추가하면 된다. 예를 들어 브라우저 상에 연속된 네 개의 공백을 출력하고 싶으면 해당 위치에 ‘ ’를 삽입하면 된다.
[실습]
1. 아래 파일을 작성한 후 이름을 ‘exam-06-01.html’로 하여 저장한다.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>홈페이지</title> </head> <body> 안산대학교 인터넷정보과 홈페이지제작 </body> </html>
2. 브라우저를 통해 ‘exam-06-01.html’을 확인한다. 그러면 아래 그림과 같이 단어와 단어 사이에 삽입된 ‘ ’의 개수 만큼의 공백이출력됨을 볼 수 있다.
[과제]
다음과 같이 브라우저 상에 HTML 태그를 출력하는 HTML 파일을 ‘exam-07-01.html’로 작성해 보자.