텍스트 관련 스타일

park jinwoo·2022년 4월 1일

color

웹 문서에서 문단이나 제목 등의 텍스트에서 글자색을 바꿀 때는 color 속성을 사용하고 속성값은 16진수, rgb, hsl, 색상이름등으로 표현할 수 있다.

16진수
p { color : #0000ff; }
색상이름
h1 { color : blue; }
hsl ( 색상, 채도, 명도 )
.LostArk { color : hsl(0, 100%, 50%); }
rgb표기법 ( 빨강, 파랑, 초록, 불투명도 )
#id_nav { color : rgb(0, 0, 255, 0.5); }

text-align

text-align 속성은 문단의 텍스트 정렬 방법을 지정한다.

text-align의 속성

start : 현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬한다.

end : 현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬한다.

left : 왼쪽에 맞추어 문단을 정렬한다.

right : 오른쪽에 맞추어 문단을 정렬한다.

center : 가운데에 맞추어 문단을 정렬한다.

justify : 양쪽에 맞추어 문단을 정렬한다.

match-parent : 부모 요소를 따라 문단을 정렬한다.
.Sleep { text-align : center; }

line-height

한 문단이 두 줄을 넘으면 줄 간격이 생긴다. 이 줄 간격을 line-height 속성으로 조절할 수 있다.
줄 간격은 정확한 단위로 크깃값을 지정하거나 문단의 글자 크기를 기준으로 백분율로 지정할 수도 있다.
예로, 12px인 문단의 줄 간격을 2.0으로 했을 때, 줄 간격은 2배인 24px이 된다.

줄 간격은 텍스트를 세로 정렬할 때도 유용하다. line-height 의 속성값을 추가하여 영역으 ㅣ높이를 나타내는 height 속성값과 똑같이 지정하면 된다.

.Summary {
	width : 100%;
    height : 100px;
    background: #222;
    color : rgb(255,255,255);
    text-align : center;
    line-height : 100px; <= height와 같은 값.

text-decoration

text-decoration 속성은 텍스트에 밑줄, 윗줄, 취소선을 표시 할 수 있다.
그리고 텍스트에 하이퍼링크를 적용하면 생기는 기본적인 밑줄등을 제거 할 수 있다.

<body>
	<h1>text-decoration예시</h1>
    <p style="text-decoration:none">텍스트에 줄을 표시하지 않음.</p>
    <p style="text-decoration:underline">텍스트에 밑줄을 표시함.</p>
    <p style="text-decoration:overline">텍스트에 윗줄을 표시함.</p>
    <p style="text-decoration:line-through">텍스트에 취소선을 표시함.</p>

text-shadow

CSS에 그림자 효과를 주는 속성이다. 자주 사용하면 지저분해 보인다.
그렇기에 사이트 제목이나 강조해야 할 내용에만 사용한다.

text-shadow : none (or) 가로 거리 세로 거리 번짐 정도 색상
.shadow_none { text-shadow : none; }
.shadow { text-shadow : 5px 5px 3px yellow; }

text-transform

영문자를 표기할 때 텍스트의 대소 문자를 바꾼다. 한글에는 영향을 미치지 않는다.

text-transform

none : 줄을 표시하지 않는다.

capitalize : 첫 번째 글자를 대문자로 변환. => Trash

uppercase : 모든 글자 대문자. => TRASH

lowercase : 모든 글자 소문자. => trash
.trash { text-transform : capitalize; }