텍스트 관련 스타일

글꼴 관련 스타일

글꼴 관련 CSS규약

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

{font-family: <글꼴이름>,<글꼴>....}

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

  • 구글 웹 폰트

    @import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);
    .ng-font{
      font-family: 'Nanum Gothic', 돋움;
    }

  • 직접 웹폰트 업로드해 사용

    • .ttf 확장자 : 파일 크기가 너무 크다.

    • .eof(Embedded Open Type) ttf->eof변환

    • .woff(Web Open Font Format) ttf->woff변환

  • 웹 폰트 적용

    @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 : 목록 속성 한꺼번에 표시하기

참고

• Do it! HTML5+CSS3 웹 표준의 정석