글꼴 관련 스타일
font-family = 글꼴 지정(텍스트 태그를 사용하는 요소들에서 주로 사용
<--기본형-->
font-family: 글꼴이름 [,<글꼴이름>, <글꼴이름>]
[] 대괄화 안의 항목은 옵션font-face = 웹 폰트 사용(웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드 시키는 방식)
font-size = 글자 크기 조절(픽셀,포인트,백분율을 비롯해 여러 단위로 지정할 수 있다)
<--기본형-->
font-size: <절대크기> | <상대크기> | <크기> | <백분율>
<> 꺽쇠 부분은 값이 아니라 유형
<절대크기> = 브라우저에서 지정한 글자 크기
(xx-small,x-small,small,mediu,large,x-large,xx-large)
<상대크기> = 부모 요소의 글자 크기를 기준으로 더 크게 표시하거나 더 작게 표시
(larger,smailer)
<크기> = 브라우저와 상관없이 글자 크기를 지정
(em = 해당 글꼴의 대문자 M의 너비를 기준으로 크기를 조절,
ex = 해당 글꼴의 소문자 x의 높이를 기준으로 크기를 조절,
px = 픽셀, 모니터에 따라 상대적 크기가 됨, 웹에서 주로 사용,
pt = 포인트, 일반 문서에서 많이 사용하는 단위)
<백분율> = 부모 요소의 글자 크기 기준으로 해당하는 %를 계산해 표시font-weight = 글자 굵기 지정
<--기본형-->
font-weight: 속성
속성
<normal> = 일반적인 형태로 기본 값(400)
<bold | lighter | bolder> = 굻게 | 원래 굵기보다 가늘게 | 원래 굵기보다 더 굵게
<100~900 사이의 수치> = 숫자 값을 조잘해 좀 더 세밀히 두께를 조절font-variant = 작은 대문자로 표시(대문자를 소문자 크기에 맞추어 작게 표시한 것)
<--기본형-->
font-variant: 속성
속성
<normal> = 일반적인 형태로 표시
<small-caps> = 작은 대문자로 표시font-style = 글자 스타일 지정(이탤릭체)
<--기본형-->
font-style: 속성
속성
<normal> = 일반적인 형태
<italic> = 이탤릭체
<oblipue> = 이탤릭체텍스트 스타일
color = 글자 색 지정(색상 값은 16진수,rgd,hsl,색상이름 으로 표기할 수 있다)
text-decoration = 텍스트에 줄 표시하기/없애기
<--기본형-->
text-decoration: 속성
속성
<none> = 밑줄을 표시하지 않음
<underline> = 밑줄울 표시
<overline> = 영역 위로 선을 그림
<line-through> = 영역을 가로지르는 선(취소선)을 그림text-transform = 텍스트 대,소문자 변환
<--기본형-->
text-transform: 속성
속성
<none> = 변환하지 않음
<capitalize> = 첫 번째 글자를 대문자로 변환
<upparcase> = 모든 글자를 대문자로 변환
<lowercase> = 모든 글자를 소문자로 변환
<full-width> = 가능한 모든 문자를 전각 문자로 변환text-shadow = 텍스트에 그림자 효과 추가(그림자 여러개 추가시 ,(쉼표)로 구분)
<--기본형-->
text-shadow: <가로거리> <세로거리> <번짐정도> <색상>
속성
<가로거리> = 양수 값은 오른쪽으로, 음수 값은 왼쪽으로 그림자를 만듬, 필수 속성
<세로거리> = 양수 값은 아래쪽으로, 음수 값은 위쪽으로 그림자를 만듬 , 필수 속성
<번짐정도> = 양수 값은 모든 방향으로 퍼져나가 그림자가 크게 표시.
음수 값은 모든 방향으로 축소되어 보임, 기본값 = 0
<색상> = 한 가지만 지정할 수도 있고 공백으로 구분해 여러 색상을 지정할 수도 있다,
기본값 = 현재 글자 색white-space = 공백 처리
<--기본형-->
white-space : 속성
속성
<normal> = 여러개 공백 하나로 표시 (기본 값)
<nowrap> = 여러개 공백 하나로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꾸지 않고 계속 한 줄로 표시
<pre> = 어러개 공백 그대로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꾸지 않고 계속 한 줄로 표시
<pre-line> = 여러개의 공백 하나로 표시하고 영역 너비를 넘어가는 자동으로 줄을 바꿔 표시
<pre-wrap> = 여러개의 공백을 그대로 표시하고 영역 너비를 넘어가는 자동으로 줄을 바꿔 표시letter-spacing, wore-spacing = 텍스트 간격 조절(주로 letter-spacing 속서을 사용해 자간을 조절)
문단 스타일
direction = 글자 쓰기 방향 지정하기
<--기본형-->
direction : 속성
속성
<lir> = 왼쪽에서 오른쪽
<rtl> = 오른쪽에서 왼쪽text-align = 텍스트 정렬
<--기본형-->
text-align : 속성
속성
<start> = 현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬
<end> = 현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬
<left> = 왼쪽에 맞추어 문단을 정렬
<right> = 오른쪽에 맞추어 문단을 정렬
<center> = 가운데 맞추어 문단을 정렬
<justify> = 양쪽에 맞추어 문단을 정렬
<match-parent> = 부모 요소를 따라 문단을 정렬text-indent = 텍스트 들어 쓰기
<--기본형-->
text-indent : <크기> | <백분율>
<크기> = 단위와 함께 들여 쓸 크기를 지정, 음수 값도 사용할 수 있음
<백분율> = 부모 요소의 너비를 기준으로 상대적 크기를 지정line-height = 줄 간격 조절하기
<--기본형-->
line-height : normal | <숫자> | <크기> | <백분율> | inherit
숫자는 줄 간격 값이 아니라 몇 배수 인지를 뜻함text-overflow = 넘치는 텍스트 표기(텍스트가 잘린 상태로 그대로 둘 수도 있고 잘린 텍스트가 있다고 표시할 수도 있다)
<--기본형-->
text-overflow : 속성
속성
<clip> = 넘치는 텍스트를 자름
<ellipsis> = 말 줄임표(...)로 잘힌 텍스트가 있다고 표시함목록스타일
list-style-type = 목록의 불릿과 번호 스타일 지정(순서 없는 목록의 경우 목록 앞에 다양한 불릿을 넣을 수 있고 순서 목록에서는 번호 스타일을 지정할 수 있다)
<--기본형-->
list-style-type : none | <순서 없는 목록의 불릿> | <순서 목록의 번호>
list-style-image = 불릿 대신 이미지 넣기
<--기본형-->
list-style-image : none | <이미지>
<이미지> = url(이미지 파일 경로)list-style-position = 목록에 들여 쓰는 효과 내기
list-style = 목록 속성 한꺼번에 표시(list-style-type, list-style-image, list-style-position 속성을 한꺼번에 표시할 수 있다
