CSS : 텍스트 꾸미기 속성 (font-family, font-size, text-align, color)
font-family : 글꼴(font)을 지정한다.
- 요소를 구성하는 텍스트의 글꼴(font)을 지정한다.
- 글꼴(font) 명을 속성 값으로 지정한다.
- 여러 개의 글꼴(font)을 연달아 기입하여 우선순위를 지정할 수 있다.
- Courier를 우선으로 지정하되, 해당 폰트가 없을 경우 monospace 그다음 Times로 지정한다.
* {
font-family: "Courier New", Courier, monospace, "Times New Roman", Times,
serif;
}
font-size : 수치와 단위를 지정해 글자(text)의 크기를 지정할 수 있다.
px : 1px는 디스플레이를 구성하는 가장 기본이 되는 단위이다.
: 절대적인 크기이며, 숫자를 지정하였을 경우 해당 크기로 고정된다.
.pixelFont {
font-size: 10px;
}
.p {
font-size: 20px;
}
rem : 최상위 <html>에 상대적인 크기를 지정하는 단위
- : html문서의 최상위 요소인 <html>의 글자 사이즈를 기준으로 몇 배수의 크기를 지정할 때 사용한다.
.remFont {
font-size: 2rem;
}
.p {
font-size: 3rem;
}
em : 구하고자 하는 요소의 pixel 값 / 상위 요소의 font-size pixel 값
- : 상위 요소(한 단계 윗 요소)의 폰트 사이즈를 기준으로 하는 글자 사이즈를 지정하는 상대적인 단위이다.
- 별도로 글꼴 크기를 지정하지 않을 경우 16px가 기본값이다.
- 1em = 16px, 2em = 32px이다.
- em 앞에 붙는 숫자는 현재 글꼴 크기의 배수를 의미한다. (글꼴 크기를 10px로 했을 때 2em 은 20px이다.)
.emlFont {
font-size: 10em;
}
.p {
font-size: 20em;
}
글꼴 사이즈를 따로 지정하지 않았을 경우의 기본 사이즈
- h1 : 32px
- p : 16px
text-align : 텍스트의 정렬방식
- 블록내에서 텍스트의 정렬방법을 정한다.
- 미리 정의된 키워드 값을 지정한다.
color : 글꼴의 색상을 지정
- 텍스트의 색상을 지정한다.
- 키워드 : 색상명을 기재
- RGB 색상 코드 : 각각 두자리씩 끊어서 작성하며 00부터 FF까지 #과 함께 16진수를 입력하면 된다.
# + FF(Red) FF(Green) FF(Blue) 순이다. - RGB 함수 : RGB키워드 뒤에 ()을 쓴후 각각의 비율을 적어주면 된다. 0% 부터 100%까지 지정한다.
/* color : 키워드*/
p {
color: red;
}
/* color : RGB 색상 코드 */
p {
color: #ff0000;
}
/* color : RGB 함수 */
p {
color: rgb(255, 0, 0);
}
RGB 란?
- RGB색상은 빛의 삼원색 (Red, Green, Blue)을 혼합하여 색을 정의하는 방식이다.
- 모든 수치가 가장 높을땐 흰색이 된다.
/* RGB 함수 */
p {
color: rgb(255, 0, 0);
}
/* RGB 색상 코드 */
p {
color: #ff0000;
}
'STUDY > CSS' 카테고리의 다른 글
| CSS : Box Model (박스 모델) (0) | 2022.08.01 |
|---|---|
| CSS : display & border (0) | 2022.07.20 |
| CSS : 하나씩 겹쳐지는 사진 효과 (Overlapping Gallery) (0) | 2022.05.24 |
| CSS : 버튼을 꾸미는 Border-Style CSS (0) | 2022.05.09 |
| CSS : ::selection - 드래그 시 색상이 변경되는 태그 (0) | 2022.05.09 |