텍스트 관련 스타일

글꼴 관련 스타일

글꼴 관련 CSS규약

  • font-family : 글꼴 지정하기(사용자 시스템에 설치된 글꼴)

{font-family: <글꼴이름>,<글꼴>....}
  • @font-face속성 : 웹 폰트 사용하기

    @import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);
    .ng-font{
    	font-family: 'Nanum Gothic', 돋움;
    }
    • 직접 웹폰트 업로드해 사용

    • 웹 폰트 적용

    @font-face {
        font-family: 'trana'; /* 글꼴 */
        src: local('trana'),
            url('trana.eot'),
            url('trana.woff') format('woff'),
            url('trana.ttf') format('truetype');
    }
    .w-font {
        font-family:'trana', sans-serif; /* 웹 폰트 지정 */
    }
  • font-size : 글자 크기 조절

속성 값설명

<절대 크기>

브라우저에서 지정한 크기 xx-small, x-small, small, medium, large, x-large, xx-large

<상대 크기>

부모 요소의 글자크기를 기준으로 더 크게 표시하거나 작게 표시 larger, smaller

<크기>

브라우저와 상관없이 글자 크기 직접 지정

<백분율>

부모요소의 글자 크기를 기준으로 해당하는 %를 계산해 표시

단위설명

em

해당 글꼴의 대문자 M의 너비를 기준으로 크기조절

ex

해당 글꼴의 소문자 x의 높이를 기준으로 크기조절

px

픽셀

pt

포인트

  • font-weight : 글자 굵기 지정

속성 값설명

normal

일반적인 형태로 기본값

bold , light, bolder

굵게, 원래 굵기보다 더 가늘게, 더 굵게

100~900

400은 normal, 700은 bold에 해당하며, 좀 더 세밀히 글꼴 두께 조절 가능

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

속성 값설명

normal

일반적인 형태로 기본값

small-caps

작은 대문자로 표시

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

속성 값설명

normal

일반적인 형태로 기본값

italic

이탤릭체 표시(기울어진 글꼴이 디자인되어있음)

oblique

이탤릭체 표시(글꼴을 기울어지게함)

  • font : 글꼴 속성 한꺼번에 묶어 표현

font: <font-style><font-variant><font-weight><font-size/line-height><font-family> | caption | icon | menu | message-box | small-caption | status-bar
속성 값설명

font-*

font-로 시작하는 글꼴 관련 속성 한꺼번에 나열

caption

캡션에 어울리는 글꼴 스타일로 표시

icon

아이콘에 어울리는 글꼴 스타일 표시

menu

드롭다운 메뉴에 어울리는 글꼴 스타일 표시

message-box

대화상자에 어울리는 글꼴 스타일 표시

small-caption

작은 캡션에 어울리는 글꼴 스타일 표시

status-bar

상태 표시줄에 어울리는 글꼴 스타일 표시

텍스트 스타일

  • color : 글자색 지정 (rgb, 16진수, hsl)

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

속성 값설명

none

밑줄을 표시하지 않는다.

underline

밑줄을 표시합니다.

overline

영역 위로 선을 그림

line-through

영역을 가로지르는 선을 그린다.

  • text-transform " 텍스트 대/소문자 변환

속성 값설명

none

변환하지 않는다.

capitalize

시작하는 첫 번째 글자를 대문자로 변환

uppercase

모든글자 대문자 변환

lowercase

모든 글자 소문자 변환

full-width

가능한 모든 문자 전각문자(고정 폭 영문자 너비의 두 배 정도 너비의 문자)로 변환

  • text-shadow : 그림자 효과 추가

text-shadow: none | <가로 거리> <세로 거리> <흐림 정도> <번짐 정도> <색상>
속성 값설명

<가로 거리>

텍스트부터 그림자까지의 가로 거리(양수 오른쪽, 음수 왼쪽), 필수

<세로 거리>

텍스트부터 그림자까지의 세로 거리(양수 아래쪽, 음수 위쪽), 필수

<흐림 정도>

0이 디폴트 값으로 진한 그림자를 표시하며, 값이 커질 수록 그림자가 부드러워진다.

<번짐 정도>

그림자가 번지는 정도. 양수 값을 사용하면 그림자가 모든 방향으로 퍼져나감. 음수는 그림자가 모든 방향으로 축소되어보임

<색상>

한 가지 이상색을 공백으로 지정할 수 있음

  • white-space : 공백 처리하기

속성 값설명

normal

여러 개의 공백을 하나로 표시

nowrap

여러 개의 공백을 하나로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꾸지 않음

pre

여러 개의 공백을 그대로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꾸지 않음

pre-line

여러 개의 공백을 하나로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꿈

pre-wrap

여러 개의 공백을 그대로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꿈

  • letter-spacing / word-spacing : 텍스트 간격 조정

문단 스타일

  • direction : 글자 쓰기 방향 지정

direction: ltr | rtl
  • text-align : 텍스트 정렬

text-align: start | end | left | right | center | justify(양쪽) | match-parent(부모 요소에 따라)
  • text-justify : 정렬 시 공백 조절

text-justify: auto | none | inter-word(단어사이 공백 조절) | distribute(인접한 글자 사이 공백 똑같이 맞춤)
  • text-indent : 텍스트 들여 쓰기

text-indent: <크기> | <백분율>
  • line-height : 줄 간격 조절하기

line-height: normal | <숫자> | <크기> | <백분율> | <inherit>
  • text-overflow : 넘치는 텍스트 표기

text-overflow: **clip**(넘치는 텍스트 자르기) | ellipsis(말 줄임표로 잘린 텍스트 있다고 표시)

CSS 검사기

목록과 링크 스타일

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

list-style-type: none | <순서 없는 목록의 불릿>|<순서 목록의 번호>|
- 순서 없는 목록의 불릿
    - **disc**(●)
    - circle(○)
    - square(◼︎)
    - none

- 숫자 바꾸기
	- **decimal**(1로 시작하는 10진수)
	- decial-leading-zero(01,02,03,...)
	- lower-roman(소문자 로마 숫자)
	- upper-roman(대문자 로마 숫자)
	- lower-alpha or lower-latin(소문자 알파벳)
	- upper-alpha or upper-latin(대문자 알파벳)
	- armenian(아르메니아 숫자)
	- georgian(조지 왕조시대 숫자)
  • list-style-image : 불릿 대신 이미지 넣기

list-style-image: none | <이미지> url("images.jpg")
  • list-style-position : 목록에 들여 쓰는 효과 내기

list-style-position: inside | outside
  • list-style : 목록 속성 한꺼번에 표시하기

참고

Last updated