본문 바로가기

제가 쓴 책175

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.
6.5 font-size 속성을 이용하여 글자의 크기를 설정하기 6.5 font-size 속성을 이용하여 글자의 크기를 설정하기 font-size 속성은 글자의 크기를 설정하는데 사용하는 속성으로 다음과 같은 형식을 사용합니다. font-size : 속성값; 대개 “medium”을 기본 속성값으로 사용하며 부모 요소로부터 상속받는 형태인 “inherit”와 “절대 크기”, “상대적 크기”, 그리고 우리가 많이 보아온 15pt, 15px, 15cm 등과 같이 고정된 값을 사용할 수 있으며 마지막으로 부모 요소의 font-size를 기준으로 이를 퍼센트(percentage) 형태로 적용하여 속성값을 설정할 수 있습니다. 예제를 다루기에 앞서 “상대적 크기” 값으로 올 수 있는 값은 가장 작은 크기인 “xx-small”부터 중간 크기인 “medium” 그리고 가장 큰 크기.. 2013. 8. 4.

티스토리툴바