CSS 텍스트

텍스트 (1)

text-align 문자를 정렬하는 속성을 가지고 있습니다. left 왼쪽 정렬 right 오른쪽 정렬 center 가운데 정렬 justify 양쪽 정렬 vertical-align 지정된 요소가 표시되는 행에서 세로 방향으로 위치 정렬을 설정하는 속성입니다. baseline 지정된 박스 베이스라인과 상위 박스의 베이스라인을 정렬합니다. top 지정된 박스 상단과 그 행 전체를 박스로 한 경우의 상단을 정렬합니다. middle 지정된 박스 중심과 상위박스의 소문자 x 의 중심을 정렬합니다. bottom 지정된 박스 하단과 상위박스의 그 행 전체를 박스로 한 경우의 하단을 정렬합니다. text-top 지정된 박스의 상단과 상위 요소의 글꼴의 상단을 정렬합니다. text-bottom 지정된 박스의 하단과 상위 요소의 글꼴의 하단을 정렬합니다. super 지정된 요소의 박스의 베이스라인과 상위 박스의 위첨자로써 적절한 위치를 정렬합니다. sub 지정된 요소의 박스의 베이스라인과 상위 박스의 아래첨자로써 적절한 위치를 정렬합니다. 실수값 + 단위 지정된 요소의 박스 베이스라인과 상위 박스의 베이스라인이 정렬된 상태를 0으로 하고 그 후 어느 정도 이동시킬 것인가를 지정합니다. % 지정된 요소의 박스 베이스라인과 상위 박스의 베이스라인이 정렬된 상태를 0으로 하고 그 우 어느 정도 이동시킬 것인가를 line-heigt 속성값에 대한 비율로 지정합니다.  텍스트 (2) line-height 줄간격을 조절하는 속성입니다. normal 브라우저가 적절한 줄간격을 설정합니다. 실수값 + 단위 수치에 단위를 붙여서 줄간격을 지정하며 음수값을 지정할 수도 있습니다. 실수값 단위를 붙이지 않고 수치만 지정하면 글자 크기에 그 수치를 붙인 값이 높이로써 설정됩니다. 예를 들면 [1.5]라고 지정을 하면 [1.5em]이나 [150%]라고 지정한 경우와 같은 결과가 나옵니다. % 이 요소는 글자 크기에 비례하여 비율로서 지정합니다. [예제] letter-spacing 글자와 글자의 간격을 설정하는 속성입니다. 하지만 text-align 속성으로 양쪽정렬을 하면 지정한대로 나오지 않는 경우가 있으니 주의하세요. 단위는 [실수값+단위] 로 지정하며 마이너스도 가능합니다. [예제] word-spacing 단어와 단어 사이의 간격을 설정하는 속성으로, letter-spacing 와 기능이 같습니다. text-transform 단어의 첫글자만 대문자로 표시하거나 전체를 대문자나 소문자로 표시할 수 있는 속성입니다. none 현재 그대로의 상태를 표시합니다. capitalize 각 단어의 첫글자를 대문자로 표시합니다. lowercase 모든 글자를 소문자로 표시합니다. uppercase 모든 글자를 대문자로 표시합니다. [예제] text-indent 문장의 첫 번째 라인의 들여쓰기를 설정하는 속성으로써 들여쓰기는 음수값을 지정할 수도 있습니다. 그경우의 표시 방법에 대해서는 overflow 속성으로 설정합니다. overflow 는 뒷장에서 설명했으니까 한번 보세요. white-space 이 속성은 지정된 요소 중의 공백, 탭, 줄바꾸기에 대한 처리를 설정하는 속성입니다. normal  연속된 공백이나 탭, 줄바꾸기를 하나의 공백으로 변환하여 표시하며 내용은 박스의 크기에 따라 자동으로 줄바꾸기가 됩니다. pre  연속된 공백이나 탭, 줄바꾸기를 그대로 표시하며 내용은 기술한대로 줄바꾸기가 되어 표시됩니다. nowrap  연속된 공백이나 탭, 줄바꾸기를 하나의 공백으로 변환하여 표시하지만 자동적으로 줄바꾸기를 하지 않습니다.