Ruby's Diary

서체: font-family
크기: font-size
색상: color
두께: font-weight
수평 정렬: text-align
선을 넣거나 제거: text-decoration
대/소문자 지정: text-transform
그림자: text-shadow
자간: letter-spacing
행간: line-height

글꼴 관련 스타일

font-family 속성 - 글꼴 지정하기

font-family:글꼴 이름;

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

@font-face { 
    font-family:Aboreto;
    src:url('../fonts/Aboreto-Regular.eot');
    src:url('../fonts/Aboreto-Regular.woff') format('woff');
}

구글 웹 폰트 사용하기 : https://fonts.google.com/

@import 소스 복사해서 사용

웹 폰트 업로드 하여 사용하기 

웹 폰트 변환하여 사용

font-size 속성 - 글자 크기 조절하기

font-size: 글자 크기(px 또는 em 등);

1em = 15.8px

font-weight 속성 - 글자 굵기 지정하기

font-weight: nomal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 ...;

텍스트 스타일

color 속성 - 글자 색 지정하기

color:색상;

글자색 바꿀 때 사용

색상 값은 16진수나 rgb 또는 rgba, hsl 또는 hsla, 색상이름으로 지정 가능

text-decoration 속성 - 텍스트에 줄 표시하기 / 없애기

text-decoration: none | underline | overline | line-through;

text-transform 속성 - 텍스트 대소문자 변환하기

text-transform: none | capitalize | uppercase | lowercase | full-width;

text-shadow 속성 - 텍스트에 그림자 효과 주기

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

text-shadow:1px 1px 2px #000;

text-shadow 속성은 텍스트에 그림자 효과를 추가해 텍스트를 좀 더 입체적으로 보이게 만듬

letter-spacing과 word-spacing 속성 - 텍스트 간격 조절하기

letter-spacing: nomal | 크기;
word-spacing: nomal | 크기;

letter-spacing은 낱 글자 사이 간격을 조절 (자간조절)

word-spacing은 단어와 단어사이 간격을 조절

문단 스타일

direction 속성 - 글자 쓰기 방향 지정

direction: ltr | rtl;

텍스트 방향을 지정하는 속성

ltr : 왼쪽에서 오른쪽으로 텍스트를 표시 (기본값)

rtl : 오른쪽에서 왼쪽으로 텍스트를 표시

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

text-align:start | end | left | right | center | justify | match-parent;

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

속성 값으로 워드나 한글 문서 작업 때 흔히 사용하는 '왼쪽 정렬', '오른쪽 정렬', '가운데 정렬' 등으로 지정

line-height 속성 - 줄 간격 조절하기

line-height: nomal | 숫자 | 크기 | 백분율 | inherit

line-height 속성을 이용하면 원하는 만큼 줄 간격을 조절할 수 있음

text-overflow 속성 - 넘치는 텍스트 표기하기

text-overflow: clip | ellipsis;

👍 텍스트를 줄바꿈하지 않고 끝부분을 ... 으로 표시

1. 텍스트 줄바꿈을 제거한다.

white-space:nowrap;

2. 텍스트가 박스이 너비값을 넘어서면 ... 으로 표현한다.

text-overflow:ellipsis;

3. 박스 영역 외부를 안보이게 지정한다.

 overflow:hidden;

목록 스타일

list-style-type 속성 - 목록의 불릿과 번호 스타일

list-style-type : none | 순서 없는 목록의 불릿 | 순서 있는 목록의 번호;

list-style 속성 - 목록 속성 한꺼번에 표시하기

list-style:none;