font-family:
#title {
font-family: Georgia, "Times New Roman", Times, serif;
}왼쪽 폰트부터 우선순위로 적용됨. "Times New Roman”처럼 폰트에 띄어쓰기가 있으면 “ ”표시를 해줘야 합니다!
사용자가 어떤 브라우저를 사용하는지 모르기 때문에, 최대한 많은 폰트를 나열하고 있습니다.
font-weight:
굵기를 지정하는 프로퍼티. normal, bold, 100, 200, ... 900 등의 값이 지정될 수 있습니다.
숫자 숫자 400과 normal은 같은 두께입니다.
숫자 700과 bold는 같은 두께입니다.
color:
hex 색상코드: 여섯자리로 표현 - #eb4639
rgb 값: 빨강, 초록, 파랑으로 표현 - rgb(235, 70, 57),
hsl: 색상, 채도, 명도(hue, saturation, lightness)로 표현 - hsl(4, 82%, 57%)
등 여러가지로 표현할 수 있습니다.
h1 {
color: #eb4639;
}
h1 {
color: rgb(235, 70, 57);
}
h1 {
color: hsl(4, 82%, 57%);
}->구글에서 “color picker”라고 치면 원하는 색상을 뽑아주는 여러 앱들이 나옵니다.
align
<span class="right">span의 오른쪽 정렬</span>
text-align: right;
}span에는 오른쪽 정렬이 되도록 클래스를 부여하였는데도 오른쪽 정렬이 되지 않았습니다.
span은 inline-element이기 때문에, span이 차지하는 영역은 "span의 오른쪽 정렬" 만큼의 길이밖에 안 되기 때문입니다.
indent
들여쓰기
.js-description {
text-indent: 50px;
}<blockquote class="js-description">blockquote 이란 태그는 인용구문을 넣을 때 쓰는 태그입니다.
브라우저에서 blockquote태그에 양쪽 여백을 넣는 기본 스타일을 자동으로 적용하였습니다.
