본당웹에서 웹페이지를 깔끔하게 꾸밀 때 간단하게 사용할 수 있는 유용한 HTML 태크(Tag)를 소개해드립니다.

다른 페이지에서 이미지와 동영상 처리에 대한 설명을 하였으므로, 이에 대한 것은 아래의 링크를 참조해 주십시요. (이미지 삽입 방법, 동영상 삽입 방법)

여기에서는 다음과 같은 간단한 코드 사용법을 알려드리겠습니다.

글씨체 굵게 만들기 b(bold) 또는 strong

[codefilter_code]$m[1][/codefilter_code]식으로 [codefilter_code]$m[1][/codefilter_code]사이에 글씨체를 넣어주면 됩니다. [codefilter_code]$m[1][/codefilter_code]을 사용해도 거의 비슷한 효과가 생깁니다.

링크 걸어주기 a(anchor)

특정 글자나 그림 사이에 원하는 웹주소(URL)로 링크를 걸어주실 때 사용하며, [codefilter_code]$m[1][/codefilter_code]코드를 이용합니다. 예로:

[codefilter_code]$m[1][/codefilter_code]

식으로 href 다음에 따옴표인 "" 사이에 웹주소를 넣어주면 됩니다. 그렇게 하면 다음과 같이 링크가 생깁니다.

링크가 삽입된: 본당웹

목록(리스트) 만들기 ol(Ordered List) / ul(Unordered List)

경우에 따라 숫자를 이용하여 다음과 같이 표현하고 싶을 때가 있습니다.

1. 첫번째 항목
2. 두번째 항목
3. 세번째 항목

그러한 경우 다음과 같은 [codefilter_code]$m[1][/codefilter_code]로 전체를 묶어주고, 사이에 들어갈 내용들을 [codefilter_code]$m[1][/codefilter_code]사이에 넣어주면 됩니다. 그 전체적인 코드는 아래와 같습니다.

[codefilter_code]$m[1][/codefilter_code]

쉽죠? 마찬가지로 번호순이 아니라 그냥 번호없이 목록을 점같은 것으로 표현하고 싶을 때가 있습니다. 그럴때는 [codefilter_code]$m[1][/codefilter_code]대신 [codefilter_code]$m[1][/codefilter_code]를 사용하시면 됩니다.

• 첫번째 항목
• 두번째 항목
• 세번째 항목

이에 대한 전체적인 코드는 아래와 같습니다.

[codefilter_code]$m[1][/codefilter_code]

이제 충분히 이해하셨겁니다.

가운데로 정렬하기: center

제목, 문장, 그림 등을 가운데로 오게 하려면 양쪽을 [codefilter_code]$m[1][/codefilter_code] 로 감싸주면 됩니다..

즉..

식으로 하려면

[codefilter_code]$m[1][/codefilter_code]

위와 같이 하면 됩니다.

인용문 표시: blockquote

문장 중간에 특별한 인용문을 삽입하여 강조하고자 할 경우, [codefilter_code]$m[1][/codefilter_code][codefilter_code]$m[1][/codefilter_code]를 넣어 멋지게 표현할 수 있습니다.

예로 다음과 같은 구절 양쪽에 위의 태그를 붙여보겠습니다.

[codefilter_code]$m[1][/codefilter_code]성인들은 하느님께 대한 변함없는 신앙이야말로 유한한 생명을 뛰어넘어 영원한 생명을 얻을 수 있는 길임을 알려주셨습니다.[codefilter_code]$m[1][/codefilter_code]

그러면 아래와 같은 결과가 나옵니다.

성인들은 하느님께 대한 변함없는 신앙이야말로 유한한 생명을 뛰어넘어 영원한 생명을 얻을 수 있는 길임을 알려주셨습니다.

위와 같은 모양은 본당웹에서 정의한 Style Sheet를 통해 표현되는 것입니다.

HTML 코드를 본당웹에서 사용하시고자 할 경우: [codefilter_code]$m[1][/codefilter_code]태그

혹 웹페이지 코드에 대한 질문을 하고 싶거나 할때, HTML 코드를 직접 입력하고 싶을 때가 있습니다.(위에서 제가 설명해놓은 것처럼요.) 그러나 본당웹은 모든 HTML 코드를 바로 웹형식으로 바꾸므로 HTML 방식의 코드를 그대로 표현할 수 없습니다.

예로 [codefilter_code]$m[1][/codefilter_code]를 폼에서 입력하시면 바로 그림이 뜰 것입니다. 바로 이때 사용하는 것이 [codefilter_code]$m[1][/codefilter_code]란 태그입니다. 이 태그는 본당웹에서 각종 코드를 표현할 때 사용할 수 있습니다. 본당웹이 모든 HTML 태그를 웹형식으로 변환시키므로 특별한 용도로 사용할 때 편리합니다.

HTML 코드 양쪽 끝에 [codefilter_code]$m[1][/codefilter_code][codefilter_code]$m[1][/codefilter_code]를 삽입시키면 글꼴이 바뀌어 표현됩니다. 예로 아래와 같이 됩니다.

[codefilter_code]$m[1][/codefilter_code] 이렇게 표현됩니다.

테이블 만드는 태그 table, tr, td

표와 같은 테이블을 만들고 싶은 경우 사용합니다. 테이블 코드는 복잡한 방식으로도 구현할 수 있으나 본당웹에서는 간단한 테이블 태그만을 이용해줄 것을 권고합니다. 이유는 테이블 태그로 너무 복잡하게 만들면, 공동관리를 원칙으로 하는 본당웹 컨텐츠를 다른 분들이 쉽게 고치는데 어려움이 있기 때문입니다. 그리고 간혹 문서를 다양하게 편집하기 위해 테이블을 이용하는 경우가 많은데, 가능한 테이블은 표를 만드는데 국한해서 사용하고, 문서 편집의 다양성은 Style 을 이용해서 해주는 것이 더 좋습니다. 본당웹에서는 테이블을 다음과 같이 간단히 만들 수 있습니다. (본당웹에서는 class=data 라는 style을 따로 정의해 이용해하고 있습니다.)

[codefilter_code]$m[1][/codefilter_code]

위와 같은 식으로 표현되며, 결과는 아래와 같습니다.

Table 태그를 비롯한 많은 태그는 Stylesheet에 의해 모양이 정의되어 표시됩니다. 본당웹은 Theme의 변경으로 각종 태그의 글자크기, 색깔, 선모양 등을 다양하게 바뀔 수 있습니다. 이로 인해 Table 태그의 결과가 다르게 보일 수 있음을 참조하여 주십시요.

그외의 HTML 태그

그 외에도 테이블을 만드는 태그 등등 여러가지가 있으나 여기서는 HTML 전문 지식을 다루는 것이 목적이 아니기 때문에 다루지 않겠습니다. 만약 더 흥미를 느끼시고, 공부를 하시고 싶은 분은, http://www.w3.org 에서 모든 정보를 얻으실 수 있습니다.

HTML 태그를 이용하여 문서를 다양하게 표현할 때에는 가급적 태그를 너무 복잡하게 이용하는 것을 권하지 않습니다. 그 이유는 문서내용이 데이터베이스에 저장되는데, 불필요하게 복잡한 태그를 이용하면(특히 테이블은 자제하여 주시면 좋겠습니다.) 향후 자료의 보관, 이전, 또는 편집을 해야할 때 어려움이 있을 수 있기 때문입니다.

많은 도움이 되시었기를 바라며, 사용시 질문 등은 나눔방에 있는 게시판(포룸)에 올려주십시요.