논리(Logical) 태그란?

태그에 한가지 의미를 가지고 있는 것으로서,

초보자용 HTML 서적이나, 웹디자인 학원, 일선현장에서

전혀 사용되지 않는 태그들입니다.

이는 익스플로러와 넷스케이프같은 비주얼 브라우저에 국한하여 디자인하는 것 때문에 이같은 일이 계속되고 있습니다.

HTML4.1에서 제시한,
사용자 접근성이 높은 웹페이지 디자인, 논리구조를 가진 Structure Design을 제작함에 있어...
HTML과 CSS의 분리(CSS Based Design)와함께
논리 태그를 씀으로서 웹페이지 자체에 논리와 의미를 가지도록 하는 것이 중요합니다.

 1. Block속성의 논리 태그

<p>

이 태그는 문단과 문단의 시작과 끝을 나타내는 태그입니다.
<div>를 제외한 모든 태그들의 상위개념으로 사용되어야 합니다.

<h1>,<h2>,<h3>,<h4>,<h5>,<h6>
이 태그는 글내에서 제목을 표시하는 태그들입니다.

글을 보면 큰 제목이 있고, 그보다 하위레벨의 제목이 있듯이...

HTML4.1에서는 각각 1부터 6까지 그 대,중,소를 단계적으로 사용할 것을 제시하였습니다.

<p>와 <h1>의 사용예

여학생이 남학생보다 허리 많이 휘어" 市교육청 초등5년생 13만명 조사결과.."예방엔 자세.운동.식사 좋아" 척추가 비틀어지면서 에스(S)자 모양으로 휘어지는 `척추측만증' 질환이 남학생보다는 여학생들한테 더 많이 나타나는 것으로 집계됐다.   서울시교육청 학교보건원은 작년 4∼12월 시내 551개 초등학교 5학년생 13만1천54명을 대상으로 조사한 결과, 척추가 많이 휜 학생들은 전체의 0.7%인 911명에 달했다고 25일 밝혔다.   이 가운데 남학생은 전체 6만9천229명 중 0.52%인 362명인 반면 여학생은 6만1천825명 중 0.89%인 549명에 달했다.   척추측만증으로 발전하기 전 단계인 척추만곡증 환자도 여학생이 남학생에 비해 최고 8배 가량 많은 것으로 나타났다.

HTML Code

<h1>여학생이 남학생보다 허리 많이 휘어" </h1> <h2>市교육청 초등5년생 13만명 조사결과.."예방엔 자세.운동.식사 좋아"</h2> <p>척추가 ...집계됐다.</p> <p>서울시...밝혔다.</p> <p>이 가운데 ... 달했다.</p> <p>척추...나타났다.</p>

<blockquote>

이 태그는 글 중에 인용문이 있을 때 사용됩니다.
좌측에 40pixel의 MARGIN을 가지고 있습니다.
사용예

25일 이임식에서 유 교육감은 “서울교육의 변화와 개혁은 다시 과거로 되돌릴 수 없으며 후퇴해서도 안된다. 앞으로도 미력이나마 서울교육 발전에 힘을 보탤 것” 이라고 말했다. 그러나 이날 이임식에는 그가 발탁해서, 요직에 기용하고, 승진까지 시킨 공무원 상당수가 보이지 않았다. 시교육청 주변에서는 “쓸쓸한 그의 퇴임은 자업자득”이라는 말이 돌았다.

HTML Code

<p>25일 이임식에서 유 교육감은 <blockquote>서울교육의 변화와 ...힘을 보탤 것”</blockquote> 이라고 말했다.</p> <p>그러나 ...돌았다.</p>

<address>

이 태그는 글의 작자, 저작자의 정보를 담는 태그입니다.
일반적으로 신문사사이트에서 기자의 이름과 이메일부분을 이 태그를 적용하여야 합니다.
사용예

25일 이임식에서 유 교육감은 “서울교육의 변화와 개혁은 다시 과거로 되돌릴 수 없으며 후퇴해서도 안된다. 앞으로도 미력이나마 서울교육 발전에 힘을 보탤 것” 이라고 말했다. 그러나 이날 이임식에는 그가 발탁해서, 요직에 기용하고, 승진까지 시킨 공무원 상당수가 보이지 않았다. 시교육청 주변에서는 “쓸쓸한 그의 퇴임은 자업자득”이라는 말이 돌았다. 이낙진 기자 lee**@kfta.or.kr

HTML Code

<p>25일 이임식에서 유 교육감은 <blockquote>서울교육의 변화와 ...힘을 보탤 것”</blockquote> 이라고 말했다.</p> <p>그러나 ...돌았다.</p> <address>이낙진 기자 <a href="mailto:lee**@kfta.or.kr">lee**@kfta.or.kr</a></address>

2. Block속성의 물리태그

아래의 태그들은 HTML4.1에서 사용을 자제할 것을 제시하였습니다.
<marquee>
<pre>
<listing>
<xmp>
<plaintext>
<hr>

3. Inline속성의 논리태그

<abbr>, <acronym>, <dfn>
<abbr>은 abbreviation의 줄임말로 "축약어" 을 뜻하며             (말을 줄여쓰는 것)
<acronym>는 "두문자어" 를 뜻하며                                       (긴 단어의 첫문자를 모아쓰는 것)
<dfn> 은 instance definition의 줄임말로 새로운 단어에 대한 정의을 붙이는 태그입니다.
<dfn>태그는 이탤릭체로 구현이 되며,
<abbr>, <acronym>태그들은 일정한 비주얼을 가지지 못하여, 일반 텍스트와 별 차이가 없습니다.
이들을 강조하고자 할 때에는 CSS로 스타일을 만들어주면 됩니다. 
이 태그들에는 title속성을 써서 글에 대한 설명을 해주어야 합니다.

사용예

Massachusetts(메사추세츠 주)를 줄여 Mass. 라고 쓰고, Apartmention(아파트)를 Apt.라고 줄여씁니다. 이처럼 단어의 자음이나 모음만 맞춰서, 혹은 아무상관없이 긴 단어을 단순하게 줄여쓰는 경우가 말합니다. 우리나라에서는 이러한 형태로 줄여쓰는 경우가 그다지 많지 않아 예를 따로 만들기가 힘들군요. 두문자어는 축약어와 비슷하지만 여러 단어로 이루어진 문장 또는 복합단어의 앞글자만 따서 줄여쓰는 것을 말합니다. USA는 United States of America의 두문자어이고, NATO는 North Atlantic Treaty Organization의 두문자어입니다. 우리글의 경우에는, 경실련이나 노사모 같은 단체 이름을 두문자어로 자주 부르져. <dfn>태그는 꽤 설명하기가 애매한데, 음악하는 밴드나 그룹의 경우 그룹명을 이것저것 짜맞춰 만드는 경우가 많죠. 오래된 밴드 015B의 경우, "까마귀날자 배떨어진다."라는 말을 숫자와 영어로 만들어낸 단어이지요. 이런 단어에 <dfn>태그를 씁니다.

HTML Code

<p>Massachusetts(메사추세츠 주)를 줄여 <abbr title="Massachusetts">Mass.</abbr> 라고 쓰고, Apartmention(아파트)를 <abbr title="Apartmention">Apt.</abbr>라고 줄여씁니다. 이처럼 단어의 자음이나 모음만 맞춰서, 혹은 아무상관없이 긴 단어을 단순하게 줄여쓰는 경우가 말합니다. 우리나라에서는 이러한 형태로 줄여쓰는 경우가 그다지 많지 않아 예를 따로 만들기가 힘들군요.</p> <p>두문자어는 축약어와 비슷하지만 여러 단어로 이루어진 문장 또는 복합단어의 앞글자만 따서 줄여쓰는 것을 말합니다. <acronym title="United States of America">USA</acronym>는 United States of America의 두문자어이고, <acronym title="North Atlantic Treaty Organization">NATO</acronym>는 North Atlantic Treaty Organization의 두문자어입니다. 우리글의 경우에는, <acronym title="경제 실업인 연합">경실련</acronym>이나 <acronym title="노무현을 사랑하는 모임">노사모</acronym> 같은 단체 이름을 두문자어로 자주 부르져.</p> <p><dfn>태그는 꽤 설명하기가 애매한데, 음악하는 밴드나 그룹의 경우 그룹명을 이것저것 짜맞춰 만드는 경우가 많죠. 오래된 밴드 <dfn title="까마귀날자 배떨어진다.공일오비의 줄임말">015B</dfn>의 경우, "까마귀날자 배떨어진다."라는 말을 숫자와 영어로 만들어낸 단어이지요. 이런 단어에 <dfn>태그를 씁니다.</p>

<q>, <cite>
<q>는 다른 사람의 말이나 글을 인용했음을 나타내는 태그이고,
<cite>태그는 인용문의 출처, 출처에 대한 설명들을 나타내는 태그입니다.
<q>태그는 문장의 앞과 뒤에 인용부호(")가 붙도록 되어 있으나, 익스플로러에서는 지원하지 않으며, 넷스케이프6.0에서만 지원합니다. HTML4.1에서 <q>태그에 lang속성을 써서 인용문의 언어를 표시하기를 권장하고 있습니다.
사용예

25일 이임식에서 유 교육감은 “서울교육의 변화와 개혁은 다시 과거로 되돌릴 수 없으며 후퇴해서도 안된다. 앞으로도 미력이나마 서울교육 발전에 힘을 보탤 것”이라고 말했다. 그러나 이날 이임식에는 그가 발탁해서, 요직에 기용하고, 승진까지 시킨 공무원 상당수가 보이지 않았다. 시교육청 주변에서는 “쓸쓸한 그의 퇴임은 자업자득”이라는 말이 돌았다. 출처 : 한국교육신문

HTML Code

<p>25일 이임식에서 유 교육감은 <q lang="euc-kr">서울교육의 변화와 ...힘을 보탤 것”</q>이라고 말했다.</p> <p>그러나 ...돌았다.</p> <p>출처 : <cite>한국교육신문</cite></p>

<code>,<kbd>,<samp>,<var>

<code>는 프로그램코드를 화면에 출력할 때
<kbd>는 키보드로 입력된 문자나 글을 화면에 출력할 때 이용
<var>는 프로그램코드의 변수, 정수를 브라우저에 출력할 때 사용
<samp> 는 프로그램을 거쳐 출력되는 글이나 문자임을 나타낼 때

<var>는 이탤릭체로 구현이 되며, 다른 3가지는 Monospace Font로 구현이 됩니다.

                                                     (Monospace font에 대한 설명)

사용예

function X_alert() {         window.alert('잘 둘러보구 가란 마랴!!'); } Log1 = 12 Log2 = 2 Log3 = 23 구매결제인증이 완료되었습니다. frui2store 님이 입력하신 별명: Tough Guy (을)를 사용하시겠습니까?

HTML Code

<code> function X_alert() {       window.alert('잘 둘러보구 가란 마랴!!'); }</code> <var>    Log1 = 12<br>    Log2 = 2<br>    Log3 = 23<br> </var> <samp> 구매결제인증이 완료되었습니다. </samp> frui2store 님이 입력하신 별명: <kbd>Tough Guy</kbd> (을)를 사용하시겠습니까?

<del>,<ins>
<del>은 수정으로 인해 삭제된 문자를 남겨둘 필요가 있을 때 이 태그를 사용합니다.
Line-through로 구현이 됩니다.

<ins>는 수정으로 인해 수정(삽입)된 단어를 표시할 때 사용하며, Underline으로 구현됩니다.

사용예

제 96회 재동 국민학교초등학교 의 동창회를 개최합니다.

HTML Code

제 96회 재동 <del>국민학교</del><ins>초등학교</ins> 의 동창회를 개최합니다.

<em>,<strong>
<em>은 emphasis의 준말로 강조를 뜻할 때 사용하며,
<strong>은 strong emphasis의 준말로, <em>태그보다 더 강조되는 사항에 사용합니다.
즉, 강조하고자 하는 사항을 2단계로 구분하여 사용할 때 사용됩니다.
<em>은 이탤릭체로 구현이 되며, <strong>은 볼드체로 구현합니다.
이탤릭체는 한글사용에 있어, 강조의 뜻을 전하기는 커녕, 기독성마져 떨어트리는 경우가 많습니다. 강조의 단계를 두어 <em>을 사용할 때에는 <em>, <strong>태그 두가지에 각각 단계가 구분되는 디자인 스타일을 지정해놓고 사용하는 것이 좋습니다.

사용예

웹 페이지의 디자인은 클라이언트 보다는 사용자 가 우선임을 잊지 말아야 합니다.

HTML Code

웹 페이지의 디자인은 <em>클라이언트</em> 보다는 <strong>사용자</strong> 가 우선임을 잊지 말아야 합니다.

4. Inline속성의 물리태그

아래의 태그들은 태그 자체에 아무런 의미없이,
단지, 비주얼적인 용도로만 사용되는 태그로서
HTML4.1에서 사용을 자제하라고 제시하였습니다.

font
b
i
u
s,strike
sup sub
big small
bdo
tt
blink

※
위의 태그들을 사용을 자제하라는 W3C의 제안,
CSS를 이용하여 구현하라는 HTML4.1에서의 제시한 내용의 의미는...

이쁜 모양새만를 위한 Design을 함으로서 사용되는 태그들의 사용을 제한하라는 것입니다.
웹페이지는 논리태그들을 적극적으로 사용하여 글의 정보를 담도록 하고,
웹페이지의 디자인은 CSS를 이용하여 구현하라고 한 것입니다.

논리태그의 사용과
HTML, CSS의 분리사용(CSS Based Design)은
이런 의미를 가지고 있는 것입니다.