제 4강 - 표준 HTML 태그 만들기

CGI.pm은 HTML 3과 HTML 4에서 지원하는 태그와 무관하게 일반적인 HTML 태그 생성 방법을 제공한다. HTML 생성 메소드의 이름은 하나의 HTML 태그 이름과 동일하며, 원하는 방법으로 출력하거나 조작할 수 있는 HTML 문장을 리턴한다. 각각의 메소드는 문자열을 추가하고, 파일로 저장하거나 화면으로 출력(최종적으로는 브로우저의 창에 출력되는)할 수 있는 HTML 코드를 리턴한다.

이 예는 HTML 메소드를 사용하는 방법을 보이고 있다.

$q = new CGI;
print $q->blockquote(
	"아주 오랜 옛날에",
	"호랑이 담배 먹던 시절에도",
	$q->strong("CGI"),
	"는 있었다",
	$q->a({href=>"mailto:[email protected]";},"도아"),
	),
$q->hr;

이 것은 다음과 같은 HTML 코드를 만든다(개행문자는 가독성을 위해 추가했다).

<blockquote>
아주 오랜 옛날에
호랑이 담배 먹던 시절에도 <strong>CGI</strong> 
는 있었다.
<a HREF="mailto:[email protected]">도아</a>
</blockquote>
<hr>

HTML 메소드를 호출하는 방법을 알게되면 이들을 이름 공간으로 가져올 수 있으며 이렇게 함으로서 개체형식을 사용하지 않을 수도 있다.

use CGI ':standard';
print blockquote(
	"아주 오랜 옛날에",
	"호랑이 담배 먹던 시절에도",
	strong("CGI"),
	"는 있었다",
	a({href=>"mailto:[email protected]"},"도아"),
    ),
    hr;

HTML 메소드에 인자 전달하기

HTML 메소드는 "0"개 이상의 인자를 허용한다. 인자를 제공하지 않으면 하나의 태그를 리턴한다.

print hr;    #  <HR>

하나 이상의 문자열을 인자로 제공하면 이 들은 공백으로 연결되며 HTML 시작 태그와 종료태그 사이에 놓인다.

print h1("1", "장"); # <H1>1 장</H1>"

첫번째 인자가 연관배열 참조이면 연관배열의 키와 값은 HTML 태그의 속성과 값이 된다.

print a({-href=>'fred.html',-target=>'_new'},
	"새로운 프레임을 연다.");

<A HREF="fred.html",TARGET="_new">새로운 프레임을 연다.</A>

원하는 경우 속성 이름 앞에 대쉬(-)를 생략할 수도 있다.

print img {src=>'fred.gif',align=>'LEFT'};

<IMG ALIGN="LEFT" SRC="fred.gif">

때때로 HTML 태그의 속성은 어떠한 값도 갖지 않을 수도 있다. 예를들어 순차목록의 속성, COMPACT는 어떠한 값도 갖지 않는다. 이런 경우 값으로 undef 문자열을 지정하면 된다.

print ol({compact=>undef},li('한놈'),li('두식이'),li('석삼'));

다음은 실행한 결과 이다.

<OL COMPACT><LI>한놈</LI> <LI>두식이</LI> <LI>석삼</LI></OL>

CGI.pm 2.41 이전에는 공백 문자열('')을 값으로 제공하면 undef를 제공하는 것과 동일했었다. 그러나 이 것은 <IMG ALT="">같은 형식의 태그를 만들려는 사람들을 위해 변경되었다. 이들 두 코드의 차이는 다음과 같다.

소스				결과
img({alt=>undef})		<IMG ALT>
img({alt=>''})			<IMT ALT="">

HTML 메소드의 분배 특성

HTML 메소드의 중요한 특징중 하나는 이들이 분배된다는 것이다. 인자를 리스트로 제공하면 해당 태그는 리스트의 요소 각각으로 분배된다. 예를들어 다음은 순차목록을 만드는 한 방법이다.

print ul(
	li({-type=>'disc'},['김희선','김지수','최진실','채시라']);
);

이 예는 다음과 같은 HTML 출력을 만든다:

<UL>
	<LI TYPE="disc">김희선</LI>
	<LI TYPE="disc">김지수</LI>
	<LI TYPE="disc">최진실</LI>
	<LI TYPE="disc">채시라</LI>
</UL>

이 것은 표를 만들때에는 특히 유용하다. 예를들어:

print table({-border=>undef},
	caption('채소먹기'),
	Tr({-align=>CENTER,-valign=>TOP},
	[
		th(['채소', '아침', '점심', '저녁']),
		td(['토마토', '응', '응', '아니']),
		td(['고추', '아니', '아니',  '응']),
		td(['상치', '응', '아니', '응'])
	])
);

HTML 메소드와 리스트 삽입

다음과 같은 코드를 고려해보자

print blockquote(em('하이'),'<A HREF="http://syscon.soongsil.ac.kr/~king/">바보영기</A> <a href='http://syscon.soongsil.ac.kr/~king/' target='_blank' style='border-bottom: none'><IMG src='http://qaos.com/images/external.png' align='middle' border=0 style='border-bottom: 0'></a>!'));

이것은 기대한 대로 다음과 같은 문자열을 리턴한다. 즉,

<BLOCKQUOTE><EM>하이</EM> <A HREF="http://syscon.soongsil.ac.kr/~king/">바보영기!</A> <a href='http://syscon.soongsil.ac.kr/~king/' target='_blank' style='border-bottom: none'><IMG src='http://qaos.com/images/external.png' align='middle' border=0 style='border-bottom: 0'></a></BLOCKQUOTE>

"하이"와 "바보영기 " 사이의 공백에 주의하기 바란다. CGI.pm은 배열에서 공백을 삽입하는 방법을 이용해서 공백을 삽입한다. 따라서 이 공백은 $"로 제어할 수 있다. 때때로 이 추가적인 공백을 원하지 않을 수도 있다. 예를들어 일련의 이미지를 정렬하려 하는 경우를 생각할 수 있다. 이 경우에 $"의 값에 공백문자열을 대입하면 된다.

{
	local($") = '';
	print blockquote(em('하이'),'바보영기!'));
}

여기서 보여진 것처처럼 블럭내에 코드를 두기바란다. 그렇지 않으면 $"를 변경한 효과는 이어지는 모든 코드에 영향을 미친다. 비표준 HTML 메소드

소수의 HTML 태그는 여러가지 이유때문에 표준 형식(HTML 태그의 이름)을 따르지 않는다.

comment()는 HTML 주석문(<!-- comment -->)을 생성한다. 이것은 다음과 같이 호출한다.

print comment('요거이 주석이다.');

내장된 펄 함수와의 충돌 때문에 다음 함수들은 첫 문자를 대문자로 써야 한다.

Select
Tr
Link
Delete

추가로

<A HREF="perl-cgipm3.htm#CREATING_THE_HTML_DOCUMENT_HEADE">start_html()</A>,

<A HREF="perl-cgipm3.htm#ENDING_THE_HTML_DOCUMENT_">end_html()</A>,

<A HREF="perl-cgipm5.htm#STARTING_AND_ENDING_A_FORM">start_form()</A>,

<A HREF="perl-cgipm5.htm#STARTING_AND_ENDING_A_FORM">end_form()</A>,

<A HREF="perl-cgipm6.htm#Server_Push">start_multipart_form()</A>

와 모든 폼 태그는 특수한(HTML 태그의 이름을 함수의 이름으로 사용하지 않는) 메소드이다.