텍스트 스타일
css단위 구성
- 상대크기
- em : 부모 요소의 크기가 기준
- rem : 최상위 부모 요소의 크기가 기준
- % : 기본 설정된 크기에서 상대적으로 크기 설정
- 절대크기
- px
- pt
font-family
폰트의 글꼴을 설정해주는 속성
여러 개 폰트가 올 수 있으며 앞에 글꼴이 없으면 뒤 글꼴로 지정한다
선택자{ font-family : 글꼴1 [, 글꼴2, 글꼴3...] }
font-size
텍스트 크기 지정
선택자{ fonts-size : 크기 }
font-weight
글씨 두께 표현
선택자{ font-weight : normal(400) | bold | bolder | lighter | 100~900 }
font-style
텍스트 기울기 설정
선택자{ font-style : normal | italic | oblique }
italic: 정상 문자를 회전시키는 것oblique: 이미 기울어져서 만들어진 글자
font
폰트 관련 스타일을 한 번에 지정 (필수값 : size/line-height font-famaily )
선택자{ font : font-style font-variant font-weight font-size/line-height font-family}
.f1{
font : 16px/30px "궁서체";
}
/* 16px 사이즈, line-height 30px, 궁서체 설정 */color
텍스트의 컬러를 변경하는 속성
선택자{ color : 색상영문 | #16진수rgb | rgb(r,g,b) | rgba(r,g,b,a) }
색상표현
-
영문색 이름
-
16진수 표현 : #000000 ~ #ffffff
red : 00~ff
green : 00~ff
blue : 00~ff
#0000ff두 자리 단위로 동일한 값일 경우 #00f 줄여서 쓸 수 있음
-
rgb : rgb 값을 0~255 숫자로 표현
-
rgba : rgb에 투명도를 0~1로 표현
text-decoration
텍스트로 줄을 긋거나 없앨 때 사용
선택자{ text-decoration : none | underline | overline | line-through }
a태그로 하이퍼 링크에 달린 밑줄을 제거할 때도 none 사용
text-transform
영문 텍스트의 대/소문자 변환
선택자{ text-transform : none | capitalize | uppercase | lowercase }
text-shadow
텍스트에 그림자를 주는 속성
선택자{ text-shadow : none | 가로거리 세로거리 번짐정도 생상 }
.ts{
text-shadow: 0px 0px 4px #ccc, 0px -5px 4px #ff3,
2px -10px 6px #fd3, -2px -15px 11px #f20, 2px -19px 18px #f20;
}
white-space
공백을 처리해 주는 속성
선택자{ white-space : normal | nowrap | pre | pre-line | pre-wrap }
- normal : 공백 1개로 처리, 개행하지 않음, 자동 줄 바꿈
- nowrap : 공백 1개로 처리, 개행하지 않음, 한 줄로 표시
- pre : 공백 여러개로 처리, 개행 처리, 한 줄로 표시
- pre-line : 공백 1개로 처리, 개행 처리, 자동 줄 바꿈
- pre-wrap : 공백 여러개로 처리, 개행 처리, 자동 줄 바꿈
letter-spacing / word-sapcing
letter-spacing : 낱개 글자의 간격을 조정
word-spacing : 단어와 단어 사이 간격을 조정
선택자{ letter-spacing : 간격; word-spacing : 간격; }
text-align
내부 문자 정렬 기준
선택자 {text-align : left | right| center | justify }
왼쪽 | 오른쪽 | 가운데 | 양쪽 맞춤
text-indent
들여쓰기
선택자 {text-indent : 들여쓸 간격 }
line-height
문장끼리 줄 간격
선택자{line-height : 줄간격; }
단어가 차지하는 높이를 나타내기 때문에 위아래로 가운데 정렬을 할 때 사용함
text-overflow
영역을 벗어나는 텍스트를 처리할 속성
선택자{ text-overflow : clip | ellipsis }
- clip : 영역을 넘어가는 텍스트를 자름
- ellipsis : 말 줄임으로 잘린 텍스트를 표현
목록/링크 스타일
list-style-type
목록 기호의 스타일을 지정
ul
선택자{ list-style-type : dics | circle | squeare | none }
흑색 원형 | 흰색 원형 | 흑색 사각형 | 기호 표시 안함
ol
선택자{ list-style-type : decimal | decimal-leading-zero | lower-roman/upper-roman | lower-alpha/lower-latin | upper-alpha/upper-latin |}
1로 시작하는 10진수 | 앞에 0이 붙은 10진수 | 로마자 소문자/로마자 대문자 | 알파벳 소문자 | 알파벳 대문자
list-style-image
기호 대신 이미지 삽입
선택자{ list-style-image : url(이미지경로) }
list-style-position
목록기호 들여쓰기 여부
선택자{ list-style-position : inside | outside }
list-style
list 관련 설정을 한 번에 지정
선택자{ list-style : type | position | image }
