.font-size-40 { font-size: 40px; }
.font-size-2x { font-size: 2.0em; }
.font-size-150ps { font-size: 150%; }
.font-size-large { font-size: large; }
/*폰트는 여러 개를 동시에 지정이 가능하다. */
/*첫번째 지정한 폰트가 클라이언트 컴퓨터에 설치되어 있지 않은 경우, 다음에 지정된 폰트를 적용한다. */
/*따라서 마지막에 지정하는 폰트는 대부분의 OS에 기본적으로 설치되어 있는 */
/*generic-family 폰트(Serif, Sans-serif, Mono space)를 지정하는 것이 일반적이다.*/
/*폰트명은 따옴표로 감싸주며 폰트명이 한단어인 경우는 따옴표로 감싸주지 않아도 된다.*/
.serif {
font-family: "Times New Roman", Times, serif;
}
.sans-serif {
font-family: Arial, Helvetica, sans-serif;
}
.monospace {
font-family: "Courier New", Courier, monospace;
}
/*font-style 프로퍼티는 이탤릭체의 지정, font-weight 프로퍼티는 폰트 굵기 지정에 사용된다.*/
p { font-size: 2.0em; }
.italic {
font-style: italic;
/*normal / italic / oblique*/
}
.light {
font-weight: lighter;
/*100 ~ 900 or normal / bold / lighter / bolder*/
}
br {
/* size | family */
font: 2em "Open Sans", serif;
/* style | size | family */
font: italic 2em "Open Sans", sans-serif;
/* style | variant | weight | size/line-height | family */
font: italic small-caps bolder 16px/1.2 monospace;
/* style | variant | weight | size/line-height | family */
/* font-variant: small-caps; 소문자를 대문자로 만든다. 단 크기는 일반 대문자에 비해 더 작다.*/
font: italic small-caps bolder 16px/3 cursive;
}
/*텍스트의 높이를 지정한다. 텍스트 수직 정렬에도 응용되어 사용된다.*/
/*대부분 브라우저의 default line height 는 약 110% ~ 120%.*/
.small {
line-height: 70%; /* 16px * 70% */
}
.big {
line-height: 1.2; /* 16px * 1.2 */
}
.lh-3x {
line-height: 3.0; /* 16px * 3 */
}
/*글자 사이의 간격을 지정한다.*/
.loose {
letter-spacing: 2px;
}
.tight {
letter-spacing: -1px;
}
/*텍스트의 수평 정렬을 정의한다.*/
h1 { text-align: center; }
h3 { text-align: right; }
p.left { text-align: left; }
p.justify { text-align: justify; }
/*justify: 양쪽정렬*/
/*text-decoration 프로퍼티를 사용하여 링크 underline을 제거할 수 있다.*/
a { text-decoration: none; }
p:nth-of-type(1) { text-decoration: overline; }
p:nth-of-type(2) { text-decoration: line-through; }
p:nth-of-type(3) { text-decoration: underline; }
/*프로퍼티값 line break space/tab wrapping(자동줄바꿈)*/
/*normal 무시 1번만 O*/
/*nowrap 무시 1번만 X*/
/*pre 반영 반영 X*/
/*pre-wrap 반영 반영 O*/
/*pre-line 반영 1번만 O*/
.normal { white-space: normal; }
.nowrap { white-space: nowrap; }
.pre { white-space: pre; }
.pre-wrap { white-space: pre-wrap; }
.pre-line { white-space: pre-line; }
/*부모 영역을 벗어난 wrapping(자동줄바꿈)이 되지 않은 텍스트의 처리 방법을 정의한다.*/
/*overflow 프로퍼티에 반드시 “visible” 이외의 값이 지정되어 있어야 한다.*/
/*width 프로퍼티가 지정되어 있어야 한다. 이를 위해 필요할 경우 block 레벨 요소로 변경하여야한다.*/
/*자동 줄바꿈을 방지하려면 white-space 프로퍼티를 nowrap 으로 설정한다.*/
/*프로퍼티값 Description*/
/*clip 영역을 벗어난 부분을 표시하지 않는다. (기본값)*/
/*ellipsis 영역을 벗어난 부분을 잘라내어 보이지 않게 하고 말줄임표(…)를 표시한다.*/
/*<string> 값으로 지정한 임의의 문자열을 출력한다. Firefox(9.0~)만 지원하는 기능이다.*/
.clip { text-overflow: clip; }
.ellipsis { text-overflow: ellipsis; }
.string { text-overflow: '☺'; } /* only Firefox(9.0~) */
/*한 단어의 길이가 길어서 부모 영역을 벗어난 텍스트의 처리 방법을 정의한다. */
/*link 등을 표기할 때 그 길이가 매우 길어지는데 이 프로퍼티를 사용하지 않으면 부모 영역을 넘어가게 된다.*/
.word-wrap { word-wrap: break-word; }
/*word-wrap 프로퍼티는 단어를 어느 정도는 고려하여 개행하지만(.,- 등을 고려한다) */
/*word-break: break-all;는 단어를 고려하지 않고 부모 영역에 맞추어 강제 개행한다.*/
.word-break { word-break: break-all; }