W3C15 정렬, 폰트 스타일과 수평 줄Trio 홈페이지
목차
  1. 양식화(formatting)
    1. 배경색
    2. 정렬(alignment)
    3. 유동(float) 오브젝트
  2. 폰트(font)
    1. 폰트 스타일 엘레멘트: TT, I, B, BIG, SMALL, STRIKE, S, U
    2. 폰트 변경자(modifier) 엘레멘트: FONT,BASEFONT
  3. 줄(rule): HR 엘레멘트

이 항목에서는 이 규격의 보는(visual) 엘레멘트의 양식화(formatting)에 사용 될 수 있는 일부 HTML 엘레멘트(element)와 애트리뷰트(attribute)들에 대해 알아 본다. 이 중 많은 것이 불량한 것이다.

15.1 양식화(formatting)

15.1.1 배경색

애트리뷰트의 정의

bgcolor = color [대소문자 구별 없이: CI]
불량한 것이다. 이 애트리뷰트는 문서 본체(body) 또는 표(table) 셀(cell)의 배경색을 지정한다.

이 애트리뷰트는 문서 본체(BODY 엘레멘트) 또는 표(TABLE, TR, TH, TD 엘레멘트)의 배경색을 지정한다. 글자 색상을 지정하기 위 한 추가적인 애트리뷰트를 BODY에 사용 할 수 있다.

배경색 정보를 스타일쉬트로 지정 할 수 있으므로 이 애트리뷰트는 불량한 것이 되었다.

15.1.2 정렬(alignment)

align 애트리뷰트로 표(table), 이미지, 오브젝트(object), 문단들, 등 블럭(block) 엘레멘트를 화면 위에서 정렬이 가능하다. 이 애트리뷰트는 많은 HTML 엘레멘트들을 설정 할 수 있으나, 때로는 엘레멘트에 따라 그 값의 가능 한 범위가 다르다. 여기서는 단지 텍스트에서 align(정렬) 애트리뷰트의 의미 만을 알아 본다.

애트리뷰트의 정의

align = left | center | right | justify [대소문자 구별 없이: CI]
불량한 것이다. 이 애트리뷰트는 그 주위 내용에 대 한 수평적인 정렬 위치를 지정하며, 가능한 값은:
  • left: 텍스트 열들을 왼쪽에 붙여 표현.
  • center: 텍스트 열들을 중앙에 표현.
  • right: 텍스트 열들을 오른쪽에 붙여 표현.
  • justify: 텍스트 열들을 양쪽에 맞추어 표현.

디폴트는 기본 글자 방향에 따라 다른데, 왼쪽에서 오른쪽으로의 텍스트(ltr)에서 디폴트는 align=left이고, 오른쪽에서 왼쪽으로의 텍스트(rtl)에서 디폴트는 align=right이다.

불량한 예제:
이 예제는 헤딩을 화면 중앙에 위치시킴.

<H1 align="center">나무를 어떻게 화면에 배치 시키는가</H1>

예를 들어, CSS를 사용하여, 같은 효과를 내려면 다음과 같다.

<HEAD>
 <TITLE>나무를 어떻게 화면에 배치 시키는가</TITLE>
 <STYLE type="text/css">
   H1 { text-align: center}
 </STYLE>
<BODY>
 <H1>나무를 어떻게 화면에 배치 시키는가</H1>

여기서 모든 H1 선언들을 중앙에 배치 했음을 주시하라. 엘레멘트에 class 애트리뷰트를 설정 함으로서 그 스타일의 적용 범위를 줄일 수 있다.

<HEAD>
 <TITLE>나무를 어떻게 화면에 배치 시키는가</TITLE>
 <STYLE type="text/css">
   H1.wood {text-align: center}
 </STYLE>
<BODY>
 <H1 class="나무를 어떻게 화면에 배치 시키는가</H1>

불량한 예제:
이와 유사하게, HTML의 align 애트리뷰트로 문단을 화면의 오른쪽에 정렬시키려면:

 <P align="right">... 문단의 텍스트 ...

CSS로는:

<HEAD>
 <TITLE>나무를 어떻게 화면에 배치 시키는가</TITLE>
 <STYLE type="text/css">
   P.mypar {text-align: right}
 </STYLE>
<BODY>
 <P class="mypar">... 문단의 텍스트 ...

불량한 예제:
일련의 문단들을 오른쪽에 정렬 하려면, DIV 엘레멘트로 그들을 구룹지운다.

<DIV align="right">
 <P>... 텍스트의 첫번째 문단 ...
 <P>... 텍스트의 두번째 문단 ...
 <P>... 텍스트의 세번째 문단 ...
</DIV>

CSS로, 텍스트 정렬 특성은 모체(parent) 엘레멘트로 부터 전달(inherite)되므로, 다음과 같이 사용 할 수 있다.

<HEAD>
 <TITLE>나무를 어떻게 화면에 배치 시키는가</TITLE>
 <STYLE type="text/css">
   DIV.mypars {text-align: right}
 </STYLE>
<BODY>
 <DIV class="mypars">
   <P>...텍스트의 첫번째 문단 ...
   <P>...텍스트의 두번째 문단 ...
   <P>...텍스트의 세번째 문단 ...
 </DIV>

전체 문서를 중앙에 배치하기 위하여, CSS로:

<HEAD>
 <TITLE>나무를 어떻게 화면에 배치 시키는가</TITLE>
 <STYLE type="text/css">
   BODY {text-align: center}
 </STYLE>
<BODY>
 ... 본체(body)가 중앙에 배치된다...
</BODY>

CENTER 엘레멘트는 DIV 엘레멘트에 align 애트리뷰트를 "center"로 지정 한 것과 꼭 같다. 이 CENTER 엘레멘트는 불량한 것이다.

15.1.3 유동(float) 오브젝트

이미지와 오브젝트는 인라인에 직접 기재할 수 있고, 또는 임시적으로 오브젝트의 양 쪽으로 유동 될 수 있는 텍스트는 테두리에 대해 페이지의 한 쪽에 유동되어 나타날 수 있다.

오브젝트 유동(float)

오브켁트, 이미지, 표(table), 프레임(frame) 등의 align 애트리뷰트는 오브젝트를 왼쪽 혹은 오른쪽 테두리로 유동하게한다. 오브젝트 유동(float)은 일반적으로 새 열(line)에서 시작한다. 이 애트리뷰트는 다음 값을 갖는다.

불량한 예제:
다음 예제는 어떻게 IMG 엘레멘트가 화면의 현재 왼쪽 테두리로 유동(float)하는가를 보여 준다.

 <IMG align="left" src="http://foo.com/animage.gif" alt="my boat">

일부 정렬 애트리뷰트(attribute)는 값 "center"도 허용하는데, 이는 유동(float) 시키지 않고, 오브젝트를 현재 테두리들의 중앙에 위치 시킨다. 그러나, PDIV에서, 값 "center"는 엘레멘트의 내용을 중앙에 위치시킨다.

오브젝트 주위의 텍스트 유동

BR 엘레멘트를 지정하는 애트리뷰트는 오브젝트(object) 주위의 텍스트 흐름을 제어한다.

애트리뷰트의 정의

clear = none | left | right | all [대소문자 구별 없이: CI]
불량한 것이다. 이 엘레멘트에 의하여 생긴 줄바꿈(line break) 다음, 보는 브라우저가 다음 열(line)을 어디에 나타 내야 하는가를 지정한다. 이 애트리뷰트는 이미지, 표(table), 등 오브젝트를 유동을 시킨다. 가능한 값은:
  • none: 다음 열(line)이 정상적으로 시작된다. 디폴트 값이다.
  • left: 다음 열이 유동 오브젝트 다음 열 왼쪽 테두리에서 시작된다.
  • right: 다음 열이 유동 오브젝트 다음 열 오른쪽 테두리에서 시작된다.
  • all: 다음 열이 유동 오브젝트 다음 열 양 쪽 테두리들 사이에서 시작된다.

다음 보는 씨나리오(scenario)에서, 텍스트는 BR에 의하여 열이 바뀔 때 까지 이미지의 오른쪽을 흐른다.

*********  -------
|       |  -------
| image |  --<BR>
|       |
*********

만일 clear 애트리뷰트가 none으로 설정되면, BR 다음 열은 이미지의 오른쪽 테두리의 바로 아래서 시작된다.

*********  -------
|       |  -------
| image |  --<BR>
|       |  ------
*********

불량한 예제:
만일 애트리뷰트 clearleft 또는 all로 설정되면, 다음 열은 아래 처럼된다.

*********  -------
|       |  -------
| image |  --<BR clear="left">
|       |
*********
-----------------

스타일쉬트를 사용하여, 모든 줄바꿈(line break)들이 왼쪽 테두리(margin)에 대해 유동하는 이미지, 표, 등을 이 오브젝트의 방식으로 작용하도록 지정 할 수 있다. CSS로 이를 다음과 같이 할 수 있다.

<STYLE type="text/css">
 BR { clear: left }
</STYLE>

이 작용을 특정 BR 엘레멘트에 설정하기 위하여, 스타일 정보와 id 애트리뷰트를 결합 할 수 있다.

<HEAD>
 ...
 <STYLE type="text/css">
   BR#mybr { clear: left }
 </STYLE>
</HEAD>
<BODY>
<P>...
*********  -------
|       |  -------
| table |  --<BR id="mybr">
|       |
*********
-----------------
...
</BODY>

15.2 폰트(font)

다음 HTML 엘레멘트들은 폰트 정보를 지정한다. 그것들이 모두불량한 것은 아니지만, 이들의 사용보다는 스타일쉬트를 사용하는 것이 좋다.

15.2.1 폰트 스타일 엘레멘트:
    TT, I, B, BIG, SMALL, STRIKE, S, U

<!ENTITY % fontstyle
 "TT | I | B | BIG | SMALL">
<!ELEMENT (%fontstyle; | %phrase;) - - (%inline;)*>
<!ATTLIST (%fontstyle; | %phrase;)
 %attrs;                              -- %coreattrs, %i18n, %events --
>

시작태그: 필요 함, 종료태그: 필요 함

다른 곳에서 정의 된 애트리뷰트

폰트(font) 스타일(style) 엘레멘트의 표현은 사용도구에 따라 다르다. 다음은 참고 만을 위한 설명이다.

TT: 텔레타이프(teletype)나 글자 간격이 일정한(monospace) 텍트트를 표현.
I: 이태릭(italic) 텍스트 스타일로 표현.
B: 굵은(bold) 폰트 스타일로 표현.
BIG: 큰 글자로 표현.
SMALL: 작은 글자로 표현.
STRIKES: 불량한 것이다. 삭제 표시(strike-through) 스타일 표현.
U: 불량한 것이다. 밑줄 친(underlined) 글자로 표현.

다음 문장은 여러 텍스트 타입들을 보여 준다.

<P><b>bold</b>,
<i>italic</i>, <b><i>bold italic</i></b>, <tt>teletype text</tt>, and
<big>big</big> and <small>small</small> text.

이 단어들은 다음과 같이 표현된다.

다양한 폰트 스타일을 표현 한 예제

스타일쉬트(style sheet)를 사용하여 훨씬 풍부하고 다양한 효과를 내는 것이 가능하다. CSS로 푸른색의 이태릭 텍스트로 문단을 지정하려면:

<HEAD>
 <STYLE type="text/css">
   P.mypar {font-style: italic; color: blue}
 </STYLE>
</HEAD>
<P id="mypar">... 푸른색의 이태릭 텍스트 ...

폰트 스타일 엘레멘트들은 적정하게 네스팅(nest)되어야 한다. 네스팅 된 폰트 스타일의 표현은 사용도구에 따라 다르다.

15.2.2 폰트 변환(modifier) 엘레멘트: FONT, BASEFONT

FONTBASEFONT불량한 것이다.

변이(transitional) DTD의 공식적 정의를 참조하라.

애트리뷰트의 정의

size = cdata [대소문자 중립: CN]
불량한 것이다. 이 애트리뷰트는 폰트(font)의 크기를 지정하며, 가능한 값은:
  • 1과 7 사이 정수로 폰트를 고정 크기로 설정하는데, 사용도구에 따라 표현이 다를 수 있고, 모든 7 규격을 표현하지 못하는 사용도구도 있다.
  • 폰트 크기의 상대적인 증가. 그 값이 "+1"이면 한 단계 큰 글자이고, 그 값이 "-3"이면 세 단계 작은 글자이며 모든 글자 크기는 1과 7 사이의 값이다.
color = color [대소문자 구별 없이: CI]
불량한 것이다. 이 애트리뷰트는 글자 색상을 지정한다.
face = cdata [대소문자 구별 없이: CI]
불량한 것이다. 이 애트리뷰트는 사용도구가 순위에 따라 검색하여야 하는 컴마로 분리된 폰트 이름들의 목록을 지정한다.
다른 곳에서 정의 된 애트리뷰트

FONT 엘레멘트는 그 내용의 텍스트 폰트 크기와 색상을 변경시킨다.

BASEFONT 엘레멘트는 size 애트리뷰트를 사용하여 기본 폰트 크기를 설정한다. FONT로 폰트 크기를 변경하면, BASEFONT로 설정한 기본 폰트 크기에 상대적인 것이 얻어진다. 만일 BASEFONT가 지정되지 않았으면, 디폴트 기본 폰트 크기는 3이다.

불량한 예제:
다음 예제는 FONT에서 사용 할 수 있는 7 폰트 크기들 사이의 차이가 보여 준다.

<P><font size=1>size=1</font>
<font size=2>size=2</font>
<font size=3>size=3</font>
<font size=4>size=4</font>
<font size=5>size=5</font>
<font size=6>size=6</font>
<font size=7>size=7</font>

이는 다음과 같이 표현 될 것이다.

다양한 폰트 크기들로 표현 된 예제

다음은 기본 폰트 크기 3에서 부터 상대적인 폰트 크기들의 효과를 보여주는 예제이다.

기본 폰트로 부터 다양한 폰트 크기들을 표현 한 예제

기본 폰트 크기는 FONT 엘레멘트를 상대적인 폰트 크기 변경으로 사용하여 변경 시켰을 때 외에는, 헤딩(heading)에 적용되지 않는다.

15.3 줄(rule): HR 엘레멘트

<!ELEMENT HR - O EMPTY -- 수평 줄(rule) -->
<!ATTLIST HR
 %coreattrs;                          -- id, class, style, title --
>

시작태그: 필요 함, 종료태그: 사용 금지

애트리뷰트의 정의

align = left | center | right [대소문자 구별 없이: CI]
불량한 것이다. 이 애트리뷰트는 줄의 주위 내용에 대 한 수평 정렬을 지정하며, 가능 한 값은:
  • left: 줄을 왼쪽에 붙여 표현.
  • center: 줄을 중앙에 표현.
  • right: 줄을 오른쪽에 붙여 표현.

디폴트는 align=center이다.

noshade [대소문자 구별 없이: CI]
불량한 것이다. 이것이 설정되면, 이 불린(boolean) 애트리뷰트는 사용도구에게 전통적인 두 색상의 줄("groove") 대신 줄을 굵은(solid) 색상으로 표현한다.
size = pixels [대소문자 구별 없이: CI]
불량한 것이다. 이 애트리뷰트는 줄의 높이를 지정한다. 디폴트 값은 사용도구에 따라 다르다.
width = length [대소문자 구별 없이: CI]
불량한 것이다. 이 애트리뷰트는 줄의 너비를 지정한다. 디폴트 너비는 100%, 말하자면 줄이 전체의 화면에 맞게 확장된다.
다른 곳에서 정의 된 애트리뷰트

HR 엘레멘트는 보는 사용도구에 의하여 수평 줄을 표현한다.

줄과 주위의 내용 사이에 삽입되는 수직 공간의 양은 사용도구에 따라 다르다.

불량한 예제:
이 예제는 가용 테두리의 너비의 반으로 줄들은 중앙에 오로록 한 것이다. 맨 위의 줄은 디폴트 두께를 가진 것이고, 아래 두개는 5 픽셀(pixel)로 설정 된 것이다. 제일 아래 줄은 그림자(shading) 없이 굵은(solid) 색으로 표현되었다.

<HR width="50%" align="center">
<HR size="5" width="50%" align="center">
<HR noshade size="5" width="50%" align="center">
이 줄들은 다음과 같이 표현 될 것이다.

다양한수평 줄들의 표현 예제

Trio 홈페이지 문서(http://trio.co.kr/webrefer/html/present/graphics.html)는 자유로이 연결 사용이 가능함.