text-align

카테고리 없음 2008. 4. 28. 11:49

text-align


텍스트를 포함한, 적용 가능한 요소들의 가로 또는 세로의 정렬에 대한 설명과 함께 텍스트의 들여쓰기 및 행처리에 관한 내용을 살펴보도록 합니다.


[ 텍스트의 가로 정렬 ]

text-align: left (default value);

이 값은 하위 요소로 상속이 되며, 모든 요소에 적용할 수 있는 값입니다. 예를 들어, 블록 레벨 요소인 박스에 설정을 해두면, 해당 박스 안쪽에 있는 모든 요소에 적용이 됩니다. 디폴트 값은 브라우저와 글자의 표기 방향에 따라 다르지만, 일반적으로 left인 경우가 많습니다.


* left, right, center, justify

테이블의 tr, td태그에 사용되는 HTML속성값인 align과 비슷한 방법으로 박스등에 사용할 수 있습니다.

justify는 브라우저에 의해 자동으로 줄바꿈 되는 하나의 행을, 좌우 배분 정렬합니다. 블록 레벨 요소나 라인 브레이크와 같이, 강제적으로 줄바꿈 되는 부분까지 좌우 배분하는 것은 아닙니다. 그리고, justify속성값은 letter-spacing(자간), word-spacing(단어 간격)설정보다 우선시 됩니다.

[ 텍스트의 세로 정렬 ]

vertical-align: baseline (default value);

값을 지정한 요소가 표시되는 하나의 행에서 세로 방향의 위치 정렬에 관한 속성입니다.

단, 인라인 요소에만 적용되며, 테이블의 tr, th, td등의 요소에는 적용됩니다. 값은 상속되지 않습니다.


tr, HTML tr CSS
align="center" text-align: center;
valign="top" vertical-align: top;

위에서와 같이, text-align속성은 모든 요소에 적용할 수 있으며, vertical-align속성은 tr, td등의 요소에는 적용이 됩니다. 따라서, HTML의 align, valign을 대치하여 같은 효과를 얻을 수 있습니다.

주) tr, td등에 사용되는 vertical-align의 경우, 속성값 top, middle, bottom만이 valign값에 대응하여 적용됩니다. 브라우저간의 차이는 있으나, 기타 속성값은 대부분 무효화되며 기본값으로 처리됩니다.


아래와 같이 블록레벨 요소인 박스에 vertical-align속성을 부여하는 경우, tr, td등에 적용했던 것과 같은 결과를 얻을 수 없습니다. vertical-align은 tr, td에 적용할 수는 있으나, 인라인 요소에만 사용할 수 있기 때문입니다. 즉, 해당 요소가 표시되는 하나의 행에서의 세로 방향의 위치 정렬을 설정하는 것이 vertical-align의 정의입니다.

text-align: center; vertical-align: text-bottom;

박스 안에서의 세로 정렬은, 박스의 세로 크기를 지정하기 보다는, 다음과 같이 적절한 패딩값을 이용합니다.

text-align: center; margin: 0; padding: 10px 0;
* baseline, bottom, text-bottom
인라인 요소간의 베이스 라인을 맞추는 값입니다.
<img src="naver_logo.gif" style="border: 1px solid #000000; vertical-align:xxxx;"/>
  • vertical-align:not used;
  • vertical-align:baseline;
  • vertical-align:bottom;
  • vertical-align:text-bottom;
위와 같이, 텍스트 사이에 있는 이미지에 vertical-align옵션을 주었습니다.
디폴트 값은 baseline이기 때문에, 아무런 설정을 하지 않으면 baseline과 같이 표현됩니다. 참고할 점은 baseline과 text-bottom의 차이입니다. baseline은 텍스트의 ex(소문자 x의 상하)의 아래에 맞추기 때문에, 외곽 박스와는 맞아 떨어지지 않습니다. 그러나, text-bottom은 텍스트의 em(전각: 전체의 상하)에 맞추기 때문에, 외곽 박스와도 맞아 떨어지게 됩니다.
주) bottom 속성값은 IE7의 경우 정상적으로 적용되지 않습니다. 그러나, Firefox2.0의 경우 text-bottom과 같은 결과를 보여 줍니다.
* top, text-top
인라인 요소간의 탑 라인을 맞추는 값입니다.
<img src="naver_logo.gif" style="border: 1px solid #000000; vertical-align:xxxx;"/>
  • vertical-align:not used;
  • vertical-align:top;
  • vertical-align:text-top;
위와 같이, 텍스트 사이에 있는 이미지에 vertical-align옵션을 주었습니다.
별다른 차이없이, 텍스트의 em(전각: 전체의 상하)에 맞추어 표시해 줍니다. IE7과 Firefox2 사이의 차이도 없습니다. 단, 앞서 설명하였듯이 text-top속성값은 tr, td태그에는 적용되지 않습니다.
* 실수값+단위
디폴트 상태(baseline)에서, 해당 요소를 세로 방향으로 어느정도 이동시킬 것인지를 결정합니다.
양수값은 해당요소를 위쪽으로 이동시키게 되며, 음수값은 아래쪽으로 이동시킵니다.
<img src="naver_logo.gif" style="border: 1px solid #000000; vertical-align:xxxx;"/>
  • vertical-align:not used;
  • vertical-align:0px;
  • vertical-align:-1px;
이미지를 기본정렬 상태에서 1px만큼 아래쪽으로 내려보았습니다.
퍼센티지(%)의 경우는, 디폴트 상태(baseline)에서, line-height의 비율만큼 이동시킵니다. 예를 들어, line-height가 20px이고, vertical-align: 10%으로 설정하면 2px만큼 위쪽으로 올리게 됩니다.
* middle, super, sub
세로의 가운데 정렬을 하는 속성값으로 middle이 있으며, 위첨자(super), 아래첨자(sub)속성으로 해당 요소를 배치하는 값입니다.
<img src="naver_logo.gif" style="border: 1px solid #000000; vertical-align:xxxx;"/>
  • vertical-align:middle;
  • vertical-align:super
  • vertical-align:sub
middle의 경우, baseline과 같이 ex(소문자 x의 상하)의 중심을 기준으로 정렬합니다. 위와 같이, IE7에서는 1px정도의 어긋남이 발견됩니다. super, sub 속성값은, HTML의 sup, sub태그와 비슷한 용도로 사용이 가능합니다. 다만, 첨자 요소에 이미지를 사용한다거나, 첨자의 글꼴, 색상, 크기를 자유롭게 조절할 수 있다는 점이 CSS의 vertical-align: super, sub이 갖는 장점이라고 할 수 있습니다.

[ 문단 들여쓰기 ]

text-indent: 0 (default value);

하위 레벨 요소에 값이 상속되며, 블록 레벨 요소에 지정하여, 해당 요소에 포함된 문잔의 첫번 째 라인을 들여쓰기 해줍니다. 따라서, 음수값을 지정할 수도 있으며, 문단 들여쓰기라는 특성상 인라인 레벨 요소에는 설정되지 않습니다.

* 실수값+단위

<div style="width: 500px; line-height: 15px; text-indent: 1em; text-align:justify;">

Wie has been mixing school and tour golf since she played three LPGA Tour events at age 12. She turned professional in October 2005 and earned close to $20 million this year from endorsements, earnings and appearance money overseas.

And while she still hasn't won on the LPGA Tour -- she had three close calls in the majors -- Wie said her nerves were never more jangled than
waiting to see if she had been accepted. She got the news Friday.

위 예는 <p></p>로 묶인 2개의 문단이 있으며, 그 외곽을 <div></div>태그로 감싸고 있습니다.
외곽 박스(div)에 text-index: 1em즉, 전각 1개의 문자 만큼 들여쓰기 설정을 해 두었습니다. 안쪽의 모든 문단(<p></p>로 묶인 2개의 문단)에 들여쓰기가 적용됩니다. 중간의 빨간색으로 설정한 텍스트에는 라인브레이크(<br/>)가 적용되어 있습니다. 들여쓰기는, 문단의 첫줄에만 적용되기 때문에, 라인브레이크에는 영향을 주지 않습니다.
* 퍼센티지(%)
기본적으로, 적용된 요소(박스)를 포함하는 상위 박스의 너비값에 대한 비율로 지정합니다.
그러나, Firefox는 적용한 요소(박스)의 너비값을 기준으로 들여쓰기를 하고 있으며, IE의 경우, 마크업에 에러를 종종 경험하게 됩니다. 그다지, 퍼센티지(%)를 사용해야할 이유는 없어 보입니다.

[ 공백 및 행 처리 ]

white-space: normal (default value);

HTML의 <Pre>태그와 비슷한 역할을 수행할 수 있으며, nowrap이라는 추가적인 속성을 사용할 수 있습니다. 모든 요소에 적용할 수 있으며, 하위 요소에 설정값이 상속됩니다.

* normal, nowrap, pre

<div style="width: 500px; margin: 0; padding: 10px; white-space: normal;">

function resetRadio(){ for(var i=0; i<document.form1.type.length; i++){ if(document.form1.type[i].defaultChecked == true) document.form1.type[i].checked = true else document.form1.type[i].checked = false } }

일 반적으로, 박스안에 스크립트 코드와 같은 내용을 입력하면, HTML을 기본 마크업에 따라, 연속된 공백이나 탭, 줄바꾸기(소스상 줄바꾸기)가 하나의 공백으로 변환되어 표시됩니다. 또한, 박스의 너비에 따라 자동으로 줄바꾸기가 됩니다.

<div style="width: 500px; white-space: nowrap; overflow: hidden;">

function resetRadio(){ for(var i=0; i<document.form1.type.length; i++){ if(document.form1.type[i].defaultChecked == true) document.form1.type[i].checked = true else document.form1.type[i].checked = false } }

디폴트 상태와 같이 연속된 공백이나 탭, 줄바꾸기(소스상 줄바꾸기)를 하나의 공백으로 변환하여 표시합니다. 그러나, 박스의 너비를 무시하고 줄바꾸기를 하지 않습니다. (박스 외곽으로 넘치는 부분은 overflow속성을 이용해, 숨김설정으로 해두었습니다.)

<div style="width: 500px; margin: 0; padding: 10px; white-space: pre; overflow: hidden;">

function resetRadio(){
  for(var i=0; i<document.form1.type.length; i++){
    if(document.form1.type[i].defaultChecked == true) document.form1.type[i].checked = true
    else document.form1.type[i].checked = false
  }
}

HTML 소스에 입력한 데로 공백이나 탭, 줄바꾸기를 그대로 표시합니다. 이 경우도, 박스의 너비를 무시하고 줄바꾸기를 하지 않습니다. (박스 외곽으로 넘치는 부분은 overflow속성을 이용해, 숨김설정으로 해두었습니다.)

<div style="width: 500px; margin: 0; padding: 10px; white-space: pre; overflow: hidden;">

function resetRadio(){

...

}

</div>

위와 같이, 박스 태그와 내용의 첫번째 줄바꿈의 경우 IE7은 표기하지 않지만, Firefox2는 표기합니다.

따라서, 다음과 같이 박스 태그와 박스 내용 사이의 소스에 줄바꿈을 없도록 해주어야 합니다.

<div style="width: 500px; margin: 0; padding: 10px; white-space: pre; overflow: hidden;">function resetRadio(){

...

}

</div>

[ 참고 ]

HTML :: pre

다음은, HTML의 pre태그를 사용한 예입니다.

<div style="width: 500px; margin: 0; padding: 10px;">

<pre style="margin: 0; padding: 0; width: 480px; overflow: hidden;">

위와 같이 pre태그 역시, 글꼴등의 기본스타일을 따로 지정해 사용해야 합니다. 따라서, 상위레벨에서 지정된 스타일을 적용받으면서, 공백 및 행처리를 하는데에는 white-space를 이용하는 것이 유리합니다.

pre태그는 white-space와 달리, 박스 태그와 내용의 첫번째 줄바꿈에 대하여, IE7, Firefox2 모두 표기하지 않습니다.


Posted by [czar]
,

티스토리툴바