CSS는 텍스트에 스타일을 적용할 수 있다.
1. font-size
글자 크기를 설정할 수 있다.
- 기본값은 브라우저에서 설정한 값이다.
- 단위로는
px,em,rem,%등을 사용할 수 있다.
p {
font-size: 16px;
}2. font-style
기울임꼴을 사용할지 등을 결정할 수 있다.
- 기본값은
normal이다.- 값으로는 normal, italic, oblique를 사용할 수 있다.
em {
font-style: italic;
}3. font-weight
글자의 굵기를 설정할 수 있다.
- 100단위로 사용하고, 글꼴에서 지원하는 굵기에 따라 사용할 수 있는 범위가 달라진다.
- 값으로는 normal, bold, bolder, lighter, 100, 200, ... , 900 등을 사용할 수 있다.
strong {
font-weight: bold;
}4. font-family
텍스트에 사용할 글꼴을 지정할 수있다.
- 쉼표(
,)로 구분하여 나열한다.- 브라우저는 나열된 순서대로 글꼴을 찾아서 적용한다.
브라우저마다 갖고 있는 글꼴이 다르기 때문에 여러 개를 지정한다.
p {
font-family: Arial, sans-serif;
}5. line-height
텍스트의 줄의 간격을 설정할 수 있다.
- 기본값은
1.0이다.
p {
line-height: 1.5;
}6. letter-spacing
글자 한 개 간의 간격을 설정할 수 있다.
값을 늘리면 간격이 넓어지고, 줄이면 간격이 줄어든다.
p {
letter-spacing: 2px;
}7. word-spacing
한 단어 사이의 간격을 설정할 수 있다.
값을 늘리면 간격이 넓어지고, 줄이면 간격이 줄어든다.
p {
word-spacing: 10px;
}8. text-align
텍스트의 정렬을 설정할 수 있다.
단, 요소의 너비를 기준으로 정렬되기 때문에 인라인 요소에는 아무것도 반영되지 않는다.
p {
text-align: center;
}9. text-indent
첫 번째 텍스트의 들여쓰기를 설정할 수 있다.
p {
text-indent: 50px;
}그러나 위에서 언급한 여러 속성을 각각 적용하게 되면 코드가 길어질 수 밖에 없다.
이 문제를 해결하기 위해 단축 속성을 활용하면 여러 코드를 간결하게 줄일 수 있다.
Font Shorthand에 대해 알아보기
간략하게는
font속성이라고 부른다.
이 속성은 여러 폰트 관련 속성들을 한 번에 지정할 수 있는 단축 속성이다.포함되는 속성으로는
font-style,font-variant,font-weight,font-size/line-height,font-family이 있다.
그 중font-size/line-height는 함께 사용해야 하며,/로 구분하여 지정한다.
p {
font: italic small-caps bold 20px/1.5 Arial, sans-serif;
}
໒꒰ྀ ˶ • ༝ •˶ ꒱ྀིა