한 줄 정리
-font-family : 글꼴을 정의한다.
-@font-face {font-family: "글꼴에 지정해줄 이름";
src: url("글꼴경로");
format("해당 확장자 명에 포멧 타입"):
} : 글꼴 추가
-font-size : 글자의 크기를 정의한다.
(px, em, rem)
-text-algin : 정렬 방식을 정의한다.
(center, right, left, justify)
-color : 글자 색상을 정의한다.
키워드 = p{ color: red; }
RGB 색상코드 = p{ color: #FF0000 ; }
RGBA 색상코드 = p{ 255, 0, 0, 0.5 ; }
RGB 함수 = p{ color: rgb(100%, 0%, 0%): }
## 텍스트 관련 속성
-font-family : 글꼴을 정의한다.
-font-size : 글자의 크기를 정의한다.
-text-algin : 정렬 방식을 정의한다.
-color : 글자 색상을 정의한다.
# font-family
-요소를 구성하는 텍스트의 글꼴을 정의한다.
-글꼴명을 속성값으로 지정한다.
-여러개의 글꼴을 연달아 기입하여 우선순위를 지정할 수 있다.
(아래에 순서는 1순위 고딕, 2순위 바탕, 3순위 굴림 순이다)
*{
color: red;
font-family: 고딕, 바탕, 굴림;
}<!DOCTYPE html>
<html>
<head>
<link href="/css/text_style.css" rel="stylesheet">
</head>
<body>
<h1>태그는 제목을 표기합니다.</h1>
<p>p 태그는 문단을 표기합니다.</p>
</body>
</html>
-font 추가 하는 방법
@font-face {
font-family: "배달의민족";
src: url("/font/BMDOHYEON_ttf.ttf");
format("truetype");
}
*{
font-family: 배달의민족;
}
-확장자별로 다른 format값을 명시해줘야 한다.
ttf : truetype
otf : opentype
woff : woff
svg : svg
eot : embedded-opentype
# font-size
-글자의 수치와 단위를 지정해 긁자의 크기를 정의할 수 있다.
=====================================================
단위 | 의미 |
------------------------------------------------------------------------------------------
px | 모니터상의 화소 하나 크기에 대응하는 절대적인 크기 | p = 16px , h1 = 32px
h1{
font-size: 16px;
}
p{
font-size: 32px;
}
------------------------------------------------------------------------------------------
rem | <html>태그의 font-size에 대응하는 상대적인 크기 | html에 기본 폰트 size가 20px이라면 2rem = 40px, 3rem = 60px
html{
font-size: 20px;
}
h1{
font-size: 2rem;
}
p{
font-size: 3rem;
}
------------------------------------------------------------------------------------------
em | 부모태그(상위태그)의 font-size에 대응하는 상대적인 크기 |
=====================================================
html의 크기 = 20px
p의 크기 = 20px * 3rem = 60px
span의 크기 = 60px * 5em = 300px
html{
font-size: 20px;
}
p{
font-size: 3rem;
}
span{
font-size: 5em;
}<body>
<h1>태그는 제목을 표기합니다.</h1>
<p>p 태그는 <span>문단</span>을 표기합니다.</p>
</body>
# text-algin
-블록 내에서 텍스트의 정렬 방식을 정의한다.
-미리 정의된 키워드 값을 지정한다.
========================================
단위 | 의미 |
--------------------------------------------------------------------
left / right | 왼쪽 또는 오른쪽으로 정렬 |
p{
font-size: 1rem;
text-align: right;
}
--------------------------------------------------------------------
center | 가운데 정렬 |
--------------------------------------------------------------------
justify | 양 끝 정렬(마지막줄 제외) |
========================================
# color
-텍스트의 색상을 정의한다.
-다양한 속성 옵션을 사용하여 색상을 지정할 수 있다.
============================================================
| 의미 |
============================================================
키워드 | 미리 정의된 색상별 키워드를 사용한다. (ex: red, blue, green) |
p{
color: blue;
}
------------------------------------------------------------------------------------------------------
RGB 색상코드 | # + 6자리 16진수 값 형태로 지정한다. |
p{
color: #1c408f;
}rgb색상표 : 네이버 통합검색
'rgb색상표'의 네이버 통합검색 결과입니다.
search.naver.com
------------------------------------------------------------------------------------------------------
RGBA 색상코드 | 10진수 4자리 (Red, Greend, Blue, 투명도) |
------------------------------------------------------------------------------------------------------
RGB 함수 | red, green, blue의 수준을 각각 정의해 지정한다. |
p{
color: rgb(100%, 0%, 0%);
}============================================================
EX) 키워드 = span{ color: red; }
EX) RGB 색상코드 = span{ color: #FF0000 ; }
EX) RGBA 색상코드 = span{ 255, 0, 0, 0.5 ; }
EX) RGB 함수 = span{ color: rgb(100%, 0%, 0%): }
-RGB란 색의 3원색(Red, Green, Blue)을 혼합하여 색을 정의하는 방식이다.
-모든 수치가 가장 높을 때 흰색이 된다.
span{ 000000 ; } : black
span{ FFFFFF ; } : white
'CSS↗' 카테고리의 다른 글
| CSS 요소의 배경 설정(background) (0) | 2024.04.08 |
|---|---|
| CSS padding, margin / 박스 크기 계산 (0) | 2024.04.08 |
| CSS 목록 스타일 / 블럭, 인라인 요소 / 박스 모델(Border) (0) | 2024.04.08 |
| CSS 선택자 1 (0) | 2024.04.05 |
| CSS란 / HTML에 CSS 입히기 (0) | 2024.04.05 |