CSS 글자정렬과 꾸밈속성 (Text Align, Effect Property)

글자들을 정렬하고 들여쓰고, 대소문자를 강제하는 방법들에 대하여 알아봅니다.

그림출처 : http://blog.anthonyjones.biz/2009/01/typography-101-alignment/

text-align

글자를 왼쪽 정렬, 오른쪽 정렬, 가운데 또는 양쪽 정렬할지를 설정한다. 이 값은 상속된다.

h1 {text-align:center;}
h2 {text-align:left;}
h3 {text-align:right;}

• 블록 요소에 적용된다.

속성값

• left : 기본값으로 글자를 왼쪽에 정렬한다.
• center : 글자를 가운데에 정렬한다.
• right : 글자를 오른쪽에 정렬한다.
• justify : 글자를 양쪽에 정렬한다.

text-align 데모 보기

자바스크립트 문법

object.style.textAlign="right"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.

text-align-last

CSS3에 추가된 속성으로 text-align 이 justify 로 설정되어 있을 때 마지막 줄 또는 강제 줄 바꿈 바로 앞의 줄을 맞추는 방법을 설정한다.

p {
text-align: justify;
text-align-last: right;
-moz-text-align-last: right;  /* Code for Firefox */
}

속성값

• auto : 기본값으로 The last line is justified and aligned left
• left : 글자를 왼쪽에 정렬한다.
• right : 글자를 오른쪽에 정렬한다.
• center : 글자를 가운데 정렬한다.
• justify : 글자를 양쪽에 정렬한다.
• start : direction(글자 읽는 순서) 방향이 왼쪽에서 오른쪽이면 왼쪽정렬과 동일하고 direction 방향이 오른쪽에서 왼쪽이면 오른쪽 정렬과 동일하다.
• end : direction 방향이 왼쪽에서 오른족이면 오른쪽 정렬과 동일하고, direction 방향이 오른족에서 왼쪽이면 왼쪽 정렬과 동일하다.

자바스크립트 문법

object.style.textAlignLast="right"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	미지원	미지원	미지원

파이어폭스는 -moz-text-align-last 속성으로 지원한다. start 와 end 속성값은 IE에서 지원하지 않는다.

text-decoration

글자의 밑, 위, 중앙에 글자와 같은 색상의 선을 넣는다. 선굵기는 브라우저마다 다르다.

h1 {text-decoration: overline;}
h2 {text-decoration: line-through;}
h3 {text-decoration: underline;}

속성값

• none : 기본값으로 글자 장식이 적용되지 않는다.
• underline : 글자에 밑줄을 표시한다.
• overline : 글자에 윗줄을 표시한다.
• line-through : 글자 가운데로 관통하는 줄을 표시한다.
• inherit : 부모 요소로부터 값을 상속 받는다.

text-decoration 데모 보기

자바스크립트 문법

object.style.textDecoration="overline"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.

text-decoration-color

CSS3에 추가된 속성으로 글자 장식(text-uderline, text-overline, text-through)의 색을 지정한다.

p {
text-decoration: underline;
text-decoration-color: red;
-moz-text-decoration-color: red; /* Code for Firefox */
}

속성값

• color(색상) : text-decoration의 색상을 지정한다.

자바스크립트 문법

object.style.textDecorationColor="red"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
미지원	지원	미지원	미지원	미지원

파이어폭스는 -moz-text-decoration-color와 같이 사용해야 한다.

text-decoration-line

요소에 적용되는 줄 장식을 지정한다.

p {
text-decoration-line: overline;
-moz-text-decoration-line: overline; /* Code for Firefox */
}

속성값

• none : 기본값으로 글자 장식이 적용되지 않는다.
• underline : 글자에 밑줄을 표시한다.
• overline : 글자에 윗줄을 표시한다.
• line-through : 글자 가운데로 관통하는 줄을 표시한다.
• inherit : 부모 요소로부터 값을 상속 받는다.

자바스크립트 문법

object.style.textDecorationLine="overline"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
미지원	지원	미지원	미지원	미지원

파이어폭스는 -moz-text-decoration-line와 같이 사용해야 한다.

text-indent

글자 첫 줄 들여쓰기를 설정한다.

p {text-indent:50px;}

• 이 속성은 음수값을 가질수 있다.

속성값

• length(길이) : 부동 소수점 숫자 뒤에 절대 단위 지정자( cm , mm , in , pt , pc ) 또는 상대 단위 지정자( em , ex , px )가 오는 값이다.
• %(퍼센트) : 퍼센트 부호(%)가 뒤에 오는 정수. 이 값은 부모 개체 너비의 백분율이다.
• inherit : 부모 요소로부터 값을 상속 받는다.

자바스크립트 문법

object.style.textIndent="50px"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.

text-justify

CSS3에 추가된 속성으로 글자를 정렬하는데 사용되는 정렬 형식을 설정한다.

div {
text-align:justify;
text-justify:inter-word;
}

속성값

• auto : 기본값. 적용할 맞춤 알고리즘을 브라우저에서 결정하도록 한다.
• inter-word : 단어 사이의 간격을 증가/감소 시킨다.
• inter-ideograph : 표의 문자 텍스트 줄을 맞추고 표의 문자 및 단어 사이 간격을 늘리거나 줄인다.
• inter-cluster : 단어 사이 간격을 포함하지 않는 텍스트 줄을 맞춘다. 이 맞춤 형식은 아시아 언어로 되어 있는 문서에 최적화되어 있다.
• distribute : newspaper 값과 매우 유사하게 간격을 처리한다. 이 맞춤 형식은 태국어 같은 아시아 언어로 되어 있는 문서에 최적화되어 있다.
• kashida : 선택한 위치에서 문자를 늘려 텍스트 줄을 맞춘다. 이 맞춤 형식은 아랍어 스크립트용으로 사용된다.
• trim
• none : 사용하지 않는다.

자바스크립트 문법

object.style.textJustify="inter-word"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	미지원	미지원	미지원	미지원

text-transform

글자 렌더링을 설정한다.

p.uppercase {text-transform: uppercase;}
p.lowercase {text-transform: lowercase;}
p.capitalize {text-transform: capitalize;}

속성값

• none : 기본값으로 글자가 변환되지 않는다.
• capitalize : 각 단어의 첫 문자를 대문자로 변환한다.
• lowercase : 모든 문자를 소문자로 변환한다.
• uppercase : 모든 문자를 대문자로 변환한다.
• inherit : 부모 요소로부터 값을 상속 받는다.

자바스크립트 문법

object.style.textTransform="uppercase"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.