글자 (text - style)
color : 글자 색을 지정하는 속성
color : 색상명(영문),16진수 숫자(#fff,#ffffff)
rgb(255,255,255)|rgba(255,255,255,1)
hsl(360,100%,100%)|hsla(360,100%,100%,1) 색조,채도,밝기
rgba 와 hsla의 'a'는 투명도를 의미한다(0:투명 , 1:불투명)
6개의 색상 지정 방법은 색과 관련된 모든 css 속성에서 사용가능
text-decoration : 텍스트에 줄을 긋는 속성
{text-decoration:underline ;} : 아래 줄 긋기 {text-decoration: line-through;} : 중간에 줄 긋기 {text-decoration: overline;} : 위쪽에 줄 긋기 {text-decoration:none;} : 줄긋기 없애기 (주로 a 태그같은대 사용)
text-alige : 글자를 정렬하는 속성(왼쪽,오른쪽,가운데,양쪽)
{text-align:left;} : 왼쪽 정렬 {text-align:right;} : 오른족 정렬 {text-align:center;} : 가운데 정렬 {text-align:justify;} /* flex의 space-between과 같은 효과 (양쪽 끝은 붙임) */ /* inline-block도 적용 가능!! */
line-height:줄의 간격(장평)을 지정하는 속성
줄 사이 간격을 지정한 만큼 벌리는게 아닌
한줄 자체의 높이를 지정하는 속성.
- 줄의 높이가 글자의 크기 보다 큰 경우
글자는 해당 줄 세로 가운데 배치된다.
letterspacing : 글자사이 간격
- letter-spacing: 1px 줄의 간격을 조정하면 된다.
- ' - ' 를 표기해 줄을 곂쳐보이게 할 수도 있다.
text-shadow :텍스트에 그림자 효과를 추가한다.
#shdow-test>p:nth-child(3){ color: rgba(255, 255, 255,0.7); text-shadow:0px 0px 10px greenyellow; /* 가로 세로 번짐 색상 순으로 지정 */ }
- text - shadow 뒤로 가로축, 세로축 , 번짐정도(생략가능) 색상 순으로 지정해 사용하면 된다
글꼴 (font-style)
font-size 글자의 크기를 조정하는 속성
px : 픽셀(화면 해상도)
pt : 포인트(1pt = 0.72인치 = 1.83cm)
% : 상위 요소 크기에 대한 백분율(여기서는 body를 기준)
em : 1em == 100%
font-weight : 글자의 굵기(두깨)를 조정하는 속성
숫자 : 100~ 900 (커질수록 두꺼워짐)
nomarl : 폰트에 지정된 기본 두깨(400)
bold : 굵게 (700)
bolder : 상속받은 두깨보다 더 굵게
lighter : 상속받은 두깨보다 더 얇게
font-style : 글꼴을 지정하는 속성
italic : 폰트에서 제공하는 비슷한 글자 (제공하면 이거 쓰면됨)
oblique : 강제로 글자를 비스듬하게 변경 (혹시 폰트가 제공안하면 강제로)
font-family : 글꼴을 지정하는 속성
#배달의민족체가 없을 경우 d2coding 폰트를 사용한다.
#family-test1>li:nth-child(3){ font-family:'배달의민족체','d2coding'; }
1) 웹 폰트에서 import 한다
# 주의점 import는 css의 최상단에 위치해야 한다. @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR&display=swap');
2) 웹 폰트에서 제공하는 코드를 복사한다
@font-face { font-family: 'Yeongdo-Rg'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/Yeongdo-Rg.woff') format('woff'); font-weight: normal; font-style: normal; }
