repl.it #5&6. CSS: font-family / text- align

이지·2020년 9월 14일

HTML&CSS

목록 보기
4/8
post-thumbnail

font family

#title {
  font-family: Georgia, "Times New Roman", Times, serif;
}

만약 Georgia 폰트가 지원되지 않으면, "Times New Roman"을, 이것도 없으면 Times, 그리고 앞의 세 가지 폰트가 전부 없으면 serif라는 폰트를 사용하겠다는 뜻입니다.
폰트 이름에 띄워쓰기가 되어있으면 ""(쌍따옴표)를 사용해야합니다.
가장 뒤에 위치한 serif같은 폰트는 모든 브라우저에서 지원하는 폰트입니다.

font size

h1 {
  font-size: 30px;
}

.big-size-font {
  font-size: 50px;
}

브라우저에서는 가장 먼저 태그를 확인하고 그에 맞게 기본(default) 스타일을 적용합니다.
하지만 해당 태그나 class, id에 css 값이 있다면 해당 스타일을 더 우선순위로 적용하게 됩니다.

font weight


.bold-font {
  font-weight: bold;
}

font-weight 는 글씨 두께를 조절하는 property입니다. (값이 지정 될 수도 있습니다.)

font style

font-style: italic;

color

text- align

.left {
  text-align: left;
}
.center {
  text-align: center;
}
.right {
  text-align: right;
}

text-indent

.js-description {
  text-indent: 50px;
}

비슷한 표현   가 스페이스를 의미하는 코드입니다.

profile
이지피지레몬스퀴지🍋

0개의 댓글