본 게시글은 인프런 강의 "CSS 기본부터 활용까지"를 보고 공부한 내용을 정리하고 있습니다.
[무료] CSS 기본부터 활용까지 - 인프런 | 강의
CSS는 HTML을 아름답게 꾸며주는 디자이너의 언어입니다. CSS는 디지털 컨텐츠를 생산하는 사람들에게는 붓 질과 같은 것이 아닐까 싶습니다. 이 수업에서는 디지털 붓 질을 하는 법을 알려드립니
www.inflearn.com
Font
font-family : 서체를 지정한다.
ex) font-family: Arial, Verdana, "맑은 고딕 Semilight";
- arial이없으면 verdana가, verdana가 없으면 맑은 고딕이 화면에 나온다.
- serif :장식있는 폰트를 웹이 알아서 정해준다.
- sans-serif : 장식이 없는 폰트를 웹이 알아서 정해준다.
- monospace : 글자마다 폭이 다른데, 글자의 간격을 깔끔하게 해서 정리하고 싶은경우 고정폭인 monospace를 사용한다.
font-weight : 글자 두께를 타나낸다. 보통 bold를 나타낼때 사용한다.
line-height : 글자 줄간격 초기값은 1.2이다 (px로 작성해, 고정적인 표현도 가능하다.)
font : 폰드와 관련된 여러 속성을 축약형으로 표현하는 속성이다. 형시은 아래와 같고, 순서를 지켜야한다.
이 중에서 font-size와 font-family는 필수로 포함되어야 하는 정보입니다.
font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#a1{
font-size:5rem;
font-family: Arial, Verdana, "맑은 고딕 Semilight",serif;
font-weight: bold;
line-height: 2;
}
#a2{
font:bold 5rem/2 Arial, Verdana, "맑은 고딕 Semilight",serif;
}
</style>
</head>
<body>
<p id="a1">
Hello world <br>
</p>
<p id="a2">
Hello world2
</p>
</body>
</html>a1의 표현을 font를 써서 a2처럼 같단하게 표현이 가능하다.
'프론트엔드 > CSS' 카테고리의 다른 글
| CSS 기본부터 활용까지 - 인라인 VS 블럭레벨 (0) | 2022.07.29 |
|---|---|
| CSS 기본부터 활용까지 - 웹폰트 (구글 웹폰트 사용) (0) | 2022.07.29 |
| CSS 기본부터 활용까지 - text : align (0) | 2022.07.29 |
| CSS 기본부터 활용까지 - 색상 color (0) | 2022.07.28 |
| CSS 기본부터 활용까지 - 크기 : font-size (0) | 2022.07.28 |