CSS TEXT

폰트 종류

폰트에는 크게 serif와 sans serif가 있다. serif는 아래 그림처럼 꾸며주는 부분이 있고, sans serif는 그런게 없다.

Font

내가 좋아하는 Times New Roman은 꾸밈이 있는 serif체이다.

그건 그렇고, 개발자들은 Monospace를 보통 사용한다고 한다. 글자의 폭이 다 같아서 가독성이 좋기 때문이다.

monospace

font-family에 적용하고 싶은 폰트를 차례대로 써준다. 만약 사용자 컴에 첫번째 폰트가 없으면 그 다음 폰트로 사용한다. 맨 마지막에는 serif 나 sans-serif를 꼭 써준다.

/*만약 그사람 컴퓨터에 Lucinda가 있으면 그걸 쓰고, 없으면 dotum, dotum 이 없으면 돋움, 돋움이 없으면 sans-serif를 사용한다.*/
font-family :  Lucinda, Dotum, 돋움, sans-serif;

@import url("font address")

폰트 사이즈에는 em, ex, px, pt 가 있다.
- em : 해당 글꼴 대문자 M의 너비를 기준으로 크기 조절
- ex : 해당 글꼴 소문자 x의 높이를 기준으로 크기 조절
- px : 픽셀. 모니터에 따라 크기가 다르다.
- pt : 일반 문서에서 많이 사용

h1{font-size :3em}

font-weight : normal;

폰트 스타일에는 normal , italic, oblique 가 있다. italic oblique는 둘 다 기울어져 있다. 그러나, oblique는 아예 기울여진 글씨로 디자인이 되어있는 것이라서 italic을 많이 사용한다.

font-style : italic;

font-variant : small-caps

line-height 는 줄간격을 나타낸다. font 사이즈와 밀접한 관련이 있어서 font-size/line-height 로 한번에 같이 표현하기도 한다.

p{font:16px/25px "맑은 고딕"}

font : <font-style><font-variant><font-weight><font-size/line-heignt><font-family> |caption |icon ...

font : italic 12px/24px "돋움" caption

color 는 color : 색상; 이런 형식으로 지정해줄 수 있다.
text-decoration는 text에 밑줄, 취소선 등을 표시할 수 있다. underline, overline, lin-though, none 이 있다. 아래와 같이, a href 때 그어지는 밑줄을 없앨 수도 있다.

a:hover{
    text-decoration : none
}

text-transform 은 대소문자를 편하게 바꿀 수 있다. 속성에는 none, capitalize, uppercase, lowercase, full-width 가 있다.

div {
    text-transform : uppercase;
}

text-shadow 는 텍스트에 그림자 효과를 추가해 간지가 아리마스. text-shoqdow : <가로거리> <세로거리> <번짐정도> <색상>

h1{
    color : white;
    text-algin : center;
    text-shadow : 3px 2px 5px black;
}

white-space 는 공백 처리를 도와준다. normal, nowrap, pre, pre-line, pre-wrap 이 있다.
- nowrap : 여러개 공백 하나로, 영역 넘어가는 내용은 계속 한줄로 표시
- pre : 여러개 공백 그대로 표시, 영역 넘어가는 내용은 계속 한줄로 표시
- pre-line : 여러개의 공백 하나, 영역 넘어가면 자동 줄 바꿈
- pre-wrap : 여러개의 공백 그대로, 영역 넘어가면 자동 줄 바꿈

td{
    white-space : nowrap;
}