text-align Property

Home > Document > CSS > Text > text-align

페이지 목차

text-align Property

text-align Property 는 글자의 수평 정렬을 다루는 Property입니다. 수평 정렬 방식에는 왼쪽 맞춤(left : default, direction ltr 에서), 오른쪽 맞춤(right), 가운데 맞춤(center), 양쪽 맞춤(justify), 글자 맞춤(string) 방식이 있는데 글자 맞춤은 적용되지 않습니다.

  [표 보는 방법]
text-align Property
Value left | right | center | justify | <string> | Inherit
Initial depends on user agent and writing direction
Applies to block-level elements
Inherited yes
Percentages N/A
Media Visual
HTML Syntax { text-align: sAlign }
Scripting object.style.textAlign [ = sAlign ]



CSS Scripting
onMousedown="this.style.textAlign='center';"



Tag 자신(this)이 아닌 다른 Tag에 동적인 변화를 주는 방법

무슨 뜻인지 설명하기 위해서 다음의 object-1 과 object-2에 마우스를 올려 보시죠. 그러면 Tag 에 Mouse가 올라 갔을 때 그 Tag 스스로에 글자가 center로 정렬하는 변화가 생깁니다.

object-1 object-2

이번엔 아래의 object-1 과 object-2 에 마우스를 올려보면 먼가 다른 변화가 생기게 됩니다. 즉, object-1에 마우스를 올리면 object-2가 center에 정렬이 되고, object-2에 마우스를 올리면 object-1 의 글자가 center에 정렬되는 것을 볼 수 있습니다. 바로 이렇게 하는 방법에 대해 설명하려고 하는 거져.

object-1 object-2


준비 사항

먼저 자신(this)이 아닌 다른 object Element 의 속성(Attribute) 중에 'name' 속성이 있는지 확인 합니다. 있으면 이름을 붙혀 줍니다. 예를 들어
  1. 먼저 자신(this)이 아닌 다른 object Element 의 속성(Attribute) 중에 'name' 속성이 있는지 확인 합니다. 있으면 이름을 붙혀 줍니다. 예를 들어

    <IMG name="img_1" src="..."> 과 같이...

  2. name 속성이 없어서 naming을 할 수 없다면 바로 이 때 사용하는 물건이 id 라는 넘이져. 아래와 같이 합니다.
    <TABLE border="0" cellspacing="10" width="100%">
    <TR>
        <TD id="td_1">object-1</TD>
        <TD id="td_2">object-2</TD>
    </TR>
</TABLE>
  3. 이와 같이 name 또는 id 로 Tag 을 호출 할 수 있는 object 로 만들었다면 이제 아래와 같이 scripting 합니다.

    <HTML>
    <HEAD>
        <TITLE></TITLE>
    <STYLE type="text/css">
    <!-- 
    .gold {border:1px solid #000000;background-color:gold;}
    .blue {border:1px solid #000000;background-color:royalblue;color:#ffffff;}
    -->
    </STYLE>
    </HEAD>
    <BODY>
        <TABLE border="0" cellspacing="10" width="100%">
            <TR>
                <TD id="td_1" class="gold" onMouseOver="td_2.style.textAlign='center';"
                onMouseOut="td_2.style.textAlign='';">object-1</TD>
                <TD id="td_2" class="blue" onMouseOver="td_1.style.textAlign='center';"
                onMouseOut="td_1.style.textAlign='';">object-2</TD>
            </TR>
        </TABLE>    
    </BODY>
</HTML>


출력결과
object-1 object-2



text-align Property DHTML
입력 
<HTML>
    <HEAD>
        <TITLE></TITLE>
    <STYLE type="text/css">
    <!-- 
        .para{
        text-align:center;
        color:#333366;
        width:100%;
        border:1px solid #c0c0c0;
        background:#dfdfdf;
        font:11px/1.6em Verdana;
        padding:10px;
        }
				
        .td_btn{
        height:18px;
        background-color:royalblue;
        border:1px solid #808080;
        cursor:pointer;
        font:11px;
        color:#EFEFEF;}  
    -->
    </STYLE>
    </HEAD>
    <BODY>
    <DIV id="div_1" class="para">
        Powell's April 14 letter to Defense Secretary Donald H. Rumsfeld said the U.S. still was 
        questioning some 660 prisoners from 42 countries about al-Qaida and other terrorist 
        activities. The prisoners have been held without trial and do not have access to lawyers.
        A Pentagon official, speaking on condition of anonymity, said the "strongly worded" 
        letter made it clear that the secretary of state wanted the Defense Department to quickly
        determine which prisoners could be released.
    </DIV>
    <table border="1" width="100%" cellspacing="2" cellpadding="0" style="table-layout:fixed;">
        <tr align="center">
            <td class="td_btn" onmousedown="div_1.style.textAlign='left';">left (default)</td>
            <td class="td_btn" onmousedown="div_1.style.textAlign='right';">right</td>
            <td class="td_btn" onmousedown="div_1.style.textAlign='center';">center</td>
            <td class="td_btn" onmousedown="div_1.style.textAlign='justify';">justify</td>
        </tr>
    </table>    
    </BODY>
</HTML>

출력 결과 (Mouse Down & Up)
Powell's April 14 letter to Defense Secretary Donald H. Rumsfeld said the U.S. still was questioning some 660 prisoners from 42 countries about al-Qaida and other terrorist activities. The prisoners have been held without trial and do not have access to lawyers. A Pentagon official, speaking on condition of anonymity, said the "strongly worded" letter made it clear that the secretary of state wanted the Defense Department to quickly determine which prisoners could be released.
left (default) right center justify


참고사항
위의 입력 Source 와 같이 Style block 속에 class selector를 지정할 때 class 에 사용되는 Property 가 많으면 1 줄에 1개의 Property 씩 정리하는 것이 좋은 방법 일 수 있습니다. 한 줄로 길게 나열하게 되면 보기도 불편할 뿐더러 colon ( : ) 이나 semi-colon ( ; ) 을 잘 못 찍거나 빼 놓았을 경우 한 눈에 들어오지 않지만 1 줄에 1개의 Property 씩 정리하면 그런 실수를 줄일 수 있습니다.




이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색