텍스트 관련 스타일

글꼴 관련 스타일

font-family 속성 - 글꼴 지정하기

 

font-face 속성 -웹 폰트 사용하기

https://fonts.google.com/

Google Fonts

font-size 속성 -글자 크기 조절하기(절대크기, 상대크기, 크기, 백분율)

보통 크기 사용(em, ex, px, pt)

 

font-weight 속성 -글자 굵기 지정하기(normal(400), bold(700), bolder, lighter, 100~900)

 

font-variant 속성 -작은 대문자로 표시하기(normal, small-caps)

 

font-style 속성 - 글자 스타일 지정하기(noraml, italic, oblique)

 

font 속성 - 글꼴 속성을 한꺼번에 묶어 표현하기

font:16px/25px 은 font-size/line-height이다.

 

텍스트 스타일

color 속성 - 글자 색 지정하기

 

text-decoration 속성 - 텍스트에 줄 표시하기/없애기(none, underline, overline, line-through)

 

text-transfomr 속성 - 텍스트 대, 소문자 변환하기(none, capitalize, uppercase, lowercase, full-width)

 

text-shadow 속성 - 텍스트에 그림자 효과 추가하기(none, <가로거리> <세로거리> <번짐정도> <색상>)

(쉼표를 쓰면 글자마다 속성 적용)

 

white-space 속성 - 공백 처리하기

 

letter-spacing과 word-spacing 속성 -텍스트 간격 조절하기

낱 글자 사이 간격 조절, 단어와 단어 사이 간격 조절(보통 letter-spaing만 사용)

 

문단 스타일

direction 속성 -글자 쓰기 방향 지정하기(ltr(왼쪽->오른쪽, 기본값), rtl(오른쪽->왼쪽))

 

text-align 속성 -텍스트 정렬하기

text-justify 속성 - 정렬 시 공백 조절하기

text-indent 속성 - 텍스트 들여 쓰기(<크기> | <백분율>)

 

line-height 속성 - 줄 간격 조절하기(normal, 숫자, 크기, 백분율, inherit)

 

text-overflow 속성 - 넘치는 텍스트 표기하기

overflow 속성 값이 hidden이거나 scroll, auto이면서 white-space: nowrap 속성을 함께 사용했을 경우에만 적용

clip : 넘치는 텍스트를 자름

eclipsis : ...으로 텍스트 자름

 

목록 스타일

list-style-type 속성 - 목록의 불릿과 번호 스타일 지정하기(none | <순서 없는 목록의 불릿> | <순서 목록의 번호>)

순서 없는 목록 : disc(채운 원), circle(빈 원), square(채운 삼각형), none

순서목록에서 숫자바꾸기

list-style-image 속성 - 불릿 대신 이미지 넣기(url: ~~ | none)

 

list-stype-position 속성 - 목록에 들여 쓰는 효과 내기(inside, outside(기본값))

 

list-style 속성 - 목록 속성 한꺼번에 표시하기