티스토리 뷰

잉고래의 티스토리

css text

잉고래 2017.09.18 22:56
color 속성은 텍스트 색상을 설정할 때 사용합니다. 이전에도 말했지만 색상을 지정하는데는 이름, hex, rgb의 3가지 방법이 있다고 했습니다.

가령 이런 식이죠. color: blue; 혹은 color: #0000ff; 혹은 color: rgb(0, 0, 255); 입니다.
텍스트 정렬을 하는 방법은 text-align 속성을 사용하면 됩니다.
이 속성은 수평 방향 정렬을 위해 사용되죠. 왼쪽 정렬, 가운데 정렬, 오른쪽 정렬으로 말이죠.
다음과 같이 사용합니다.
text-align: left; 혹은 text-align: center; 혹은 text-align: right; 입니다. 참 쉽죠잉~
그 밖에 justify란 text-align 속성 값이 있는데요.
요건 저스트란 말처럼 줄의 폭에 맞춰서 텍스트의 간격을 넓혀줍니다.
다음으로~ text-decoration 속성은 뜻 그대로 텍스트를 꾸며줄 때 사용합니다. 이런 식이죠.
text-decoration: none; --> 텍스트만 표시하기
text-decoration: overline --> 텍스트에 윗줄 표시하기
text-decoration: line-through --> 텍스트에 가운데줄 표시
text-decoration: underline; --> 밑줄 표시

하나씩 보다보니 텍스트 관련 속성이 꽤 많네요. 아직도 많이 남았어요~
text-transformation 속성은 텍스트에 변형을 주는거에요. 대문자, 소문자 이런거죠.
text-transformation: uppercase; --> 텍스트를 대문자로
text-transformation: lowercase; --> 텍스트를 소문자로
text-transformation: capitalize; --> 첫 글자만 대문자로
들여쓰기 속성도 있습니다. text-indent란 녀석인데요. 얼마나 들여쓸지 값을 할당할 수 있습니다.
text-indent: 50px;

텍스트의 글자간 간격을 지정하려면 letter-spacing을 쓰고요.
letter-spacing: 7px; 어런식으로 표현합니다.
다음은 줄 높이 속성인 line-height. line-height: 1.8; 로 표현합니다.
텍스트의 방향 변경 속성. 이런게 필요한가 모르겠네요. direction: rtl; 오른쪽에서 왼쪽으로~

단어간 간격은 word-spacing. word-spacing: 5px;
텍스트 그림자 효과는 text-shadow 속성을 씁니다. 수평, 수식, 컬러 값으로 속성값을 주면 됩니다.
text-shadow: 2px 4px blue;

'잉고래의 티스토리' 카테고리의 다른 글

반응형 스킨과 저품질의 상관성  (0) 2017.10.12
css font 속성  (0) 2017.09.26
css text  (0) 2017.09.18
css outline 속성 강좌  (0) 2017.04.04
box model의 이해  (0) 2017.04.03
margin css order  (0) 2017.03.29
공유하기 링크
TAG
댓글
댓글쓰기 폼