Text 관련 css

오늘은 텍스트에 적용되는 스타일에 대해 알아보자. 우리가 웹 사이트를 보다 보면 가장 많은 요소 중 하나가 텍스트이다. 글꼴, 줄, 정렬 등 텍스트에도 많은 스타일 요소가 있다.

글꼴

• font-family : 글꼴 지정하기 스타일

font-family는 body, p ,hn 태그 등 텍스트를 사용하는 요소들에게 사용하는 글꼴 지정 태그이다.

font-family: 글꼴이름;

굴림이나 맑은 고딕 등의 이름을 넣으면 된다. 글꼴에서 중요한 것은 글꼴 자체를 시스템에 설치하여야 한다는 것이다. 기본 글꼴은 물론 적용이 되지만 그렇지 않을 경우에는 적용되지 않는다.

• @font-face : 웹 폰트 사용하기

css3는 웹 폰트를 표준으로 채택하여 굳이 다운로드 받을 필요 없이 사용할 수 있다.

<style>
@import url('url주소'); // 소스 붙여넣기

.ng-font {
  font-family:'Nanum Gothic', 돋움; // 웹 폰트 적용(구글 나눔 고딕)
}
</style>

<p class="ng-font">ddd</p>

이런 식으로 사용하면 된다.

구글폰트

• 글꼴 저작권에 주의하여야 한다.

만약 글꼴 파일을 업로드 해서 사용한다면 @font-face를 사용해서 하면 된다.

@font-face {
  font-family: 글꼴 이름;
  src:url(글꼴파일경로) format(파일 유형);
}

• font-size : 글자 크기 조절

font-size는 글꼴을 조정하는 스타일인데 크기에는 절대 크기, 상대 크기, 백분율, 크기를 정할 수 있다.

1. 절대 크기

xx-small, xx-large, large 등으로 지정하는 데 거의 사용하지 않는다.(주관적인 의견입니다.)

2. 상대 크기

부모 요소의 크기를 기준으로 크거나 작게 표시할 수 있다. larger | smaller

3. 크기

글자 크기를 직접 지정한다.

4. 백분율

글자 크기를 %로 지정한다.

글자 크기의 단위에는 em, ex, px, pt가 있다. font-size에서 가장 많이 사용하는 것은 px이다. 픽셀 단위를 사용할 경우 폰트 크기가 고정되어 모바일 등에서 볼 때에도 크기가 고정된다. 여러 웹 표준성을 고려한다면 em단위를 쓰는 것이 가장 좋긴 하다.

부모 요소에서 지정한 폰트의 너비를 1em으로 정해놓고 상대적으로 계산하는 방법이다. 기본적으로는 body태그의 16px이 1em으로 지정된다.

• font-weight : 글자 굵기

normal은 기본 글자 굵기 이다. 그 외에 bold | lighter | bolder (굵게 | 더 가늘게 | 원래 굵기보다 더 굵게), 100~900 (400이 normal, 700은 bold)가 있다.

• font-variant : 작은 대문자 표시

소문자를 작은 대문자로 표시할 수 있다. 글을 꾸밀 때 유요하지만 잘 사용하지는 않는다.

• font-style : 글자 스타일 지정하기

이탤릭체 여부를 결정한다. 속성에는 italic, oblique가 있다.

• font : 글꼴 속성 묶어서 사용하기

font라는 스타일을 적용해서 위에 설명한 속성들을 한 번에 사용할 수 있다. 그 외에도 caption, icon, menu, message-box, small-caption, status-bar 등 각 상황에 맞는 글꼴을 표시할 수 있다.

주의할 점은 font-size와 line-height의 차이이다. 둘은 슬래시를 통해 묶어서 사용할 수 있지만, 백분율로 표시했을 때 font-size는 부모요소를 기준으로 line-height는 현재 요소의 글자 크기를 기준으로 한다.

그 외 다양한 폰트 스타일

텍스트 스타일

• color : 글자 색 지정하기

색상은 16진수, rgb, rgba, hsl, hsla, 색상 이름으로 지정할 수 있다.

• text-decoration : 텍스트에 줄 표시하기/없애기

텍스트에 줄을 표시하거나 없앨 수 있다. 속성으로는 underline(밑줄), overline(영역 위에 선), line-through(취소 선)이 있다.

• text-transform : 대 소문자 변환하기

텍스트의 영문자를 대소문자로 변환시킬 수 있다. 속성으로는 capitalize(첫 글자를 대문자로), uppercase(모든 글자를 대문자로), lowercase(모든 글자를 소문자로), full-width(가능한 모든 문자를 전각문자로) 가 있다.

• text-shadow : 그림자 효과주기

텍스트에 그림자 효과를 주는 태그이다.

text-shadow : none | <가로거리> <세로거리> <번짐정도> <색상>

• white-space : 공백 처리하기

white-space는 공백을 처리하는 속성이다. 속성 값에는 normal, nowrap(공백 그대로계속 한 줄 표시), pre(공백 하나로한줄 표시), pre-line(공백 하나로자동 줄바꿈), pre-wrap(공백 그대로 자동 줄바꿈)이 있다.

td {
  white-space: nowrap;
}

이럴 경우 td 속성의 모든 공백을 한 칸으로 인식하고 줄을 바꾸지 않는다.

• letter-spacing, word-spacing : 텍스트 간격 조절

letter-spacing은 글자 사이 간격 조절, word-spacing은 단어와 단어 사이의 간격을 조절한다. 보통 letter-spacing 속성으로 자간을 조정한다.

문단 스타일

• direction : 글자 방향 지정하기

텍스트를 어느 방향부터 써 나갈 것인지 정하는 속성이다 속성값으로 ltr, rtl이 있다. ltr은 기본 값이다.

• text-align 속성 : 텍스트 정렬하기

왼쪽 정렬, 가운데 정렬 등 텍스트를 정렬할 때 사용하는 속성이다. 속성 값으로는 start(줄의 시작 위치에 맞춰 문단 정렬), end(텍스트 줄 끝 위치에 맞추어 문단 정렬), left, right, center, justify(양쪽에 맞추어), match-parent(부모 요소에 따라)가 있다.

• text-justify : 정렬 시 공백 조절

text-align의 속성값이 justify일 경우, 글자 간격이 어색해질 수 있기 때문에 이를 조정하는 속성이다. 속성값으로는 auto, none, inter-word(단어 사이 공백 조절), distribute(인접한 글자 사이 공백을 같게)가 있다.

• text-indent : 텍스트 들여쓰기

px나 백분율로 조정한다. 백분율은 부모 요소를 기준으로 크기를 지정한다.

• line-height: 줄 간격 조정하기

역시 숫자, 실제 크기, 백분율로 표시한다. 계산법은 글자 크기가 12px일 때, 줄 간격을 2.0으로 지정하면 실제 줄 간격은 24px이 된다.

• text-overflow : 넘치는 텍스트 표시하기

넘치는 컨텐츠를 어떻게 처리할 지 정하는 속성이다. 속성값에는 clip(자르기), ellipsis(말 줄임표 사용하기)가 있다. 단, 해당 요소의 overflow속성값이 hidden, scroll, auto이면서 white-space의 속성값이 nowrap일 경우만 적용된다.

목록 스타일

• list-style-type : 목록의 불릿과 번호 스타일 지정

목록 앞에 불릿이나 번호 스타일을 지정할 수 있다. 속성 값으로는 순서 없는 목록에는 disc(원), circle(빈 원), square(사각형),none(불릿 없애기)가 있고 순서가 있는 목록에서 숫자를 바꾸고 싶은 경우 decimal, decimal-leading-zero등 여러가지 속성이 있다.

• list-style-image : 불릿 대신 이미지 넣기

특정 이미지 속성이 있다면 불릿을 원하는 이미지로 바꿀 수 있다.

list-style-image:url('url주소');

• list-style-position : 목록에 들여 쓰기 효과내기

목록을 들여쓰기 할 수 있다. 속성값으로는 inside(불릿이나 숫자를 안쪽으로), outside(내어쓰기)가 있다.

• list-style : 위 속성 한번에 묶어 쓰기

다음 시간에는 색상과 배경에 적용하는 스타일에 대해 알아보겠습니다.