본문 바로가기

css340

7.7 Text Decoration 7.7 Text Decoration 텍스트에 효과를 주는 방법은 현재 정의된 명세에는 크게 선을 긋는 형태인 text-decoration 속성과 텍스트를 강조하는데 사용하는 text-emphasis 속성 그리고 텍스트에 그림자 효과를 주는 text-shadow 속성이 있습니다. 첫 번째 text-decoration은 또 세부적으로 들어가면 선의 색상이나 실선인지 점선인지 등을 설정하는 세부 속성들로 구분할 있는데 현재는 선을 긋는 형태만을 대부분에 브라우저에서 지원합니다. 다음으로 텍스트를 강조하는데 사용하는 text-emphasis 속성은 특정한 경우(Webkit 이용)을 제외하고는 지원이 되지 않으므로 여기서는 생략합니다. 마지막으로 텍스트에 그림자 효과(Shadow Effect)를 주는 방법에 대해.. 2013. 8. 4.
7.6 text-indent 속성을 이용한 들여쓰기 7.6 text-indent 속성을 이용한 들여쓰기 text-indent 속성은 단락(paragraph)이나 이와 유사한 형태의 요소들에 들여쓰기를 적용하거나 텍스트의 첫 줄에 들여쓰기를 사용할 수 있도록 하는 속성으로 다음과 같은 형식으로 사용할 수 있습니다. selector { text-indent: 속성값 } 속성값에는 px, em 같은 길이의 단위가 올 수 있고 % 형태로 사용이 가능하며 둘 중 하나를 명시하면 기본적으로 첫 줄에 들여쓰기가 적용됩니다. 메모장을 열어 HTML5의 기본적인 코드를 작성하고 다음과 같이 해당 부분을 작성합니다. … 대한민국은 민주공화국이다. 대한민국의 주권은 국민에게 있고, 모든 권력은 국민으로부 터 나온다.-헌법 1조 We give advice, but we we .. 2013. 8. 4.
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.