태그 출력하기

By | 2013년 12월 24일
0 Comment

[목적]
브라우저에서 HTML 태그를 출력하는 방법을 배운다.

[이론]

07-01

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>홈페이지</title>
    </head>
    <body>
        <html><br/>
        <head><br/>
        <body><br/>
    </body>
</html>

위 그림의 내용을 출력하기 위해 위와 같이 HTML 코드를 작성하면 브라우저는 ‘<‘ ~ ‘>’ 사이의 내용도 하나의 태그로 인식하므로 아래 그림과 같이 아무 것도 출력하지 않는다.

07-02

모든 HTML 태그는 ‘<‘과 ‘>’으로 둘러싸여 있으므로 ‘<‘과 ‘>’을 출력하기 위한 특수문자 ‘&lt;’와 ‘&gt;’를 사용하면 브라우저에 태그를 출력할 수 있다. 참고로 ‘<‘를 표현하기 위한 ‘&lt;’의 ‘lt’는 ‘less than’을 의미하며 ‘>’를 표현하기 위한 ‘&gt;’의 ‘gt’는 ‘greater than’을 의미한다.

[실습]
1. ‘<‘과 ‘>’을 출력하기 위해 각각 ‘&lt;’와 ‘&gt;’를 사용하여 위 HTML 코드를  아래와 같이 수정한 후 이름을 ’exam-07-01.html’로 하여 저장한다.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>홈페이지</title>
    </head>
    <body>
        &lt;html&gt;<br/>
        &lt;head&gt;<br/>
        &lt;body&gt;<br/>
    </body>
</html>

2. ‘&lt;’와 ‘&gt;’를 사용하면 브라우저 상에 아래와 같이 태그를 출력할 수 있다.

07-01

[과제]
다음과 같이 브라우저 상에 ‘&lt;’, ‘&gt’를 출력하는 HTML 파일 ‘exam-08-01.html’을 작성해 보자.

08-01