| 15 정렬, 폰트 스타일과 수평 줄 | |
| 이전순서 | 다음순서 | 목록 | 엘레멘트 | 애트리뷰트 | 색인 | 원문 |
이 항목에서는 이 규격의 보는(visual) 엘레멘트의 양식화(formatting)에 사용 될 수 있는 일부 HTML 엘레멘트(element)와 애트리뷰트(attribute)들에 대해 알아 본다. 이 중 많은 것이 불량한 것이다.
애트리뷰트의 정의
이 애트리뷰트는 문서 본체(BODY 엘레멘트) 또는 표(TABLE, TR, TH, TD 엘레멘트)의 배경색을 지정한다. 글자 색상을 지정하기 위 한 추가적인 애트리뷰트를 BODY에 사용 할 수 있다.
배경색 정보를 스타일쉬트로 지정 할 수 있으므로 이 애트리뷰트는 불량한 것이 되었다.
align 애트리뷰트로 표(table), 이미지, 오브젝트(object), 문단들, 등 블럭(block) 엘레멘트를 화면 위에서 정렬이 가능하다. 이 애트리뷰트는 많은 HTML 엘레멘트들을 설정 할 수 있으나, 때로는 엘레멘트에 따라 그 값의 가능 한 범위가 다르다. 여기서는 단지 텍스트에서 align(정렬) 애트리뷰트의 의미 만을 알아 본다.
디폴트는 기본 글자 방향에 따라 다른데, 왼쪽에서 오른쪽으로의 텍스트(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 엘레멘트는 불량한 것이다.
이미지와 오브젝트는 인라인에 직접 기재할 수 있고, 또는 임시적으로 오브젝트의 양 쪽으로 유동 될 수 있는 텍스트는 테두리에 대해 페이지의 한 쪽에 유동되어 나타날 수 있다.
오브켁트, 이미지, 표(table), 프레임(frame) 등의 align 애트리뷰트는 오브젝트를 왼쪽 혹은 오른쪽 테두리로 유동하게한다. 오브젝트 유동(float)은 일반적으로 새 열(line)에서 시작한다. 이 애트리뷰트는 다음 값을 갖는다.
불량한 예제:
다음 예제는 어떻게 IMG 엘레멘트가 화면의 현재 왼쪽 테두리로 유동(float)하는가를 보여 준다.
<IMG align="left" src="http://foo.com/animage.gif" alt="my boat">
일부 정렬 애트리뷰트(attribute)는 값 "center"도 허용하는데, 이는 유동(float) 시키지 않고, 오브젝트를 현재 테두리들의 중앙에 위치 시킨다. 그러나, P와 DIV에서, 값 "center"는 엘레멘트의 내용을 중앙에 위치시킨다.
BR 엘레멘트를 지정하는 애트리뷰트는 오브젝트(object) 주위의 텍스트 흐름을 제어한다.
애트리뷰트의 정의
다음 보는 씨나리오(scenario)에서, 텍스트는 BR에 의하여 열이 바뀔 때 까지 이미지의 오른쪽을 흐른다.
********* ------- | | ------- | image | --<BR> | | *********
만일 clear 애트리뷰트가 none으로 설정되면, BR 다음 열은 이미지의 오른쪽 테두리의 바로 아래서 시작된다.
********* ------- | | ------- | image | --<BR> | | ------ *********
불량한 예제:
만일 애트리뷰트 clear가 left 또는 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>
다음 HTML 엘레멘트들은 폰트 정보를 지정한다. 그것들이 모두불량한 것은 아니지만, 이들의 사용보다는 스타일쉬트를 사용하는 것이 좋다.
<!ENTITY % fontstyle "TT | I | B | BIG | SMALL"> <!ELEMENT (%fontstyle; | %phrase;) - - (%inline;)*> <!ATTLIST (%fontstyle; | %phrase;) %attrs; -- %coreattrs, %i18n, %events -- >
시작태그: 필요 함, 종료태그: 필요 함
폰트(font) 스타일(style) 엘레멘트의 표현은 사용도구에 따라 다르다. 다음은 참고 만을 위한 설명이다.
다음 문장은 여러 텍스트 타입들을 보여 준다.
<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)되어야 한다. 네스팅 된 폰트 스타일의 표현은 사용도구에 따라 다르다.
변이(transitional) DTD의 공식적 정의를 참조하라.
애트리뷰트의 정의
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)에 적용되지 않는다.
시작태그: 필요 함, 종료태그: 사용 금지
애트리뷰트의 정의
디폴트는 align=center이다.
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">이 줄들은 다음과 같이 표현 될 것이다.
| 이전순서 | 다음순서 | 목록 | 엘레멘트 | 애트리뷰트 | 색인 | 원문 |
이 문서(http://trio.co.kr/webrefer/html/present/graphics.html)는 자유로이 연결 사용이 가능함.