본문 바로가기

체르니 놀이터 보기603

7.5 문장 내 간격(Spacing) 처리하기 7.5 문장 내 간격(Spacing) 처리하기 문장이나 단락 등을 보면 사용자들에게 보여지는 글자나 단어들을 잘 알아볼 수 있도록 하기 위해서 글자 혹은 단어들 간의 간격을 조정해야 하는 경우가 있습니다. CSS3에는 이에 대해서 word-spacing, letter-spacing 속성을 이용하여 각각 단어, 글자에 대해서 간격을 조정할 수 있습니다. 7.5.1 word-spacing 속성을 이용한 단어 사이의 간격처리 word-spacing 속성을 이용하면 여러분들은 단어 내에 포함된 단어들 간의 간격을 조정하는데 사용되는 속성으로 다음과 같은 형식을 사용합니다. selector { word-spacing : 단어간 간격값 } 단어간 간격 값으로는 자동적으로 정해지는 normal 값과 앞서 수치 표현에.. 2013. 8. 4.
7.4 텍스트 정렬(Alignment)과 맞추기(Justification) 7.4 텍스트 정렬(Alignment)과 맞추기(Justification) CSS3에서는 텍스트에 대해서 text-align 속성과 text-align-last 속성을 이용하여 정렬할 수 있으며 text-justify 속성을 이용하여 행의 끝을 사용되는 언어에 따라서 적당하게 맞추도록 지원합니다. 7.4.1 text-align 속성을 이용한 텍스트(text) 정렬하기 만일 하나의 인라인 박스 안에 다 나타내지 못할 정도로 텍스트 내용이 많을 경우 어떻게 정렬될 것인지를 설정하는 속성입니다. selector { text-align : 속성값 } 위의 정렬값으로는 다양한 값들이 올 수 있는데 이를 정리하여 표로 나타내면 다음과 같습니다. 정렬값 의미 left 좌측 정렬 right 우측 정렬 center 가운.. 2013. 8. 4.
7.3 줄 바꿈(Line Breaking)과 단어 내 줄 바꿈(Word Boundaries) 7.3 줄 바꿈(Line Breaking)과 단어 내 줄 바꿈(Word Boundaries) 인라인 수준의 문장은 라인 단위로 나타내지게 됩니다. 한 라인 박스 단위로 끊어지게 됩니다. 문장이 한 라인을 넘지 않을 정도로 짧으면 줄 바꿈(Line Breaking)은 일어나지 않습니다. 하지만 반대로 한 라인을 넘을 경우는 줄 바꿈이 발생하게 되는데 보통 한 라인 박스 끝이나 시작에서 혹은 강제적인 줄 바꿈 동작을 통해 줄 바꿈이 발생하게 됩니다. 이러한 줄 바꿈은 line-break 속성을 이용하여 설정할 수 있으며 긴 문장 안에 포함된 단어의 중간에 줄 바꿈을 해야 할 경우에는 word-break 속성을 이용할 수 있습니다. 7.3.1 line-break 속성을 이용한 줄 바꾸기 line-break 속.. 2013. 8. 4.
7. 텍스트(Text) 7. 텍스트(Text) CSS3에서 HTML 요소의 내용(content)에 해당하는 부분에 오는 텍스트에 적용할 수 있는 다양한 속성들에 대해서 표준화가 진행중입니다. 현재 CSS3에 대한 최신 버전은 “http://www.w3.org/TR/css3-text/”에서 확인할 수 있으며 2012년 8월 14일날 개정되었으며 여기에는 텍스트에 대한 간단한 대소문자 변형(Tranforming)부터 시작해서 긴 텍스트에 대한 줄 바꿈, 공백은 어떻게 처리할 수 있는지 명시하고 있습니다. 또한 기본적인 정렬이나 텍스트에 밑줄을 긋거나 그림자 효과 같은 재미난 속성들도 이용할 수 있습니다. 가장 기본적인 대소문자 변형부터 알아봅니다. 7.1 대소문자로 변형(Transforming)하기 text-transform 속성.. 2013. 8. 4.

티스토리툴바