CSS 글꼴과 문자 스타일 지정

CSS 글꼴과 문자 스타일 지정

 

CSS 글꼴 스타일

속성	설명	값
font-family	글자체 지정	serif sans-serif cursive fantasy monospace 글자체(굴림체, 고딕체, 궁서체 ...)
font-size	글자 크기 지정	수치 퍼센트(%) xx-small x-small small medium large x-large xx-large smaller larger
font-weight	글자 굵기 지정	100~900 normal bold bolder lighter
font-style	글자 스타일 지정	italic oblique no
font-variant	작은 대문자로 변환	small-caps normal
font	글자 스타일 지정	font-style 값 font-variant 값 font-weight 값 font-size 값 font-height 값 font-family 값

 

사용자 폰트 스타일 지정

 

@font-face 규칙

외부의 폰트를 손쉽게 불러와 사용할 수 있음
사용형식은 @font-face에 사용자가 정의한 폰트의 이름을 지정하고 불러올 폰트의 URL을 지정해 줍니다.

 

형식

@font-face {font-family: 폰트 이름; src: 폰트 위치;}

 

예제

@font-face {font-family: 'sample'; src: url(sample.ttf);} /* 같은 경로의 sample.ttf 파일을 로드하여 sample 이라는 이름의 폰트로 지정함 */ body {font-family: sample;

 

@font-face 규칙 브라우저 지원 현황

익스플로러	파이어폭스	크롬	사파리	오페라
9.0 이상	3.6 이상	10.0 이상	3.2 이상	10.6 이상

 

폰트 포맷 브라우저 지원 현황

폰트 포맷	익스스플로러	파이어폭스	크롬	사파리	오페라
ttf	9.0 이상	3.6 이상	10.0 이상	3.2 이상	10.6 이상
otf	9.0 이상	3.6 이상	10.0 이상	3.2 이상	10.6 이상
eot	9.0 이상	지원 안함	지원 안함	지원 안함	지원 안함
woff	9.0 이상	3.6 이상	10.0 이상	5.1 이상	11.1 이상
svg	지원 안함	지원 안함	10.0 이상	3.2 이상	10.6 이상

 

@font-face 실습 예제

 

CSS 문자 관련 스타일

속성	설명	값
letter-spacing	글자 간격 지정	수치 notmal
word-spacing	단어 간격 지정	수치 notmal
vertical-align	수직 정렬 지정	left, light, center
text-align	수평 정렬 지정	수치 퍼센트(%) baseline super sub top middle bottom
text-decoration	글자 장식 지정	overline underline line-through blink none
text-transform	대소문자 지정	none capitalize uppercase lowercase
text-indent	들여쓰기 간격 지정	수치 퍼센트(%)
line-height	줄 간격 지정	수치 퍼센트(%)

 

CSS3에 추가된 문자 관련 스타일

속성	설명
text-shadow	그림자 효과 지정
word-break	줄바꿈 지정
text-overflow	말줄임 지정

 

① text-shadow : 그림자 효과 스타일 지정

텍스트에 그림자를 부여하는 속성은 text-shadow 입니다.

속성의 값으로는 그림자의 가로 위치, 그림자의 세로 위치, 그림자의 농도, 그림자 색상을 지정합니다.

형식

text-shadow : 그림자의 가로 위치, 그림자의 세로 위치, 그림자의 농도, 그림자 색상을 지정함

 

text-shadow 속성 브라우저 지원 현황

익스플로러	파이어폭스	크롬	사파리	오페라
지원 안함	3.6 이상 지원	10.0 이상 지원	4.0 이상 지원	10.6 이상 지원

text-shadow 속성 실습 예제

 

② word-break 속성 : 강제로 줄 바꿈을 지정할 때 사용

처음에는 익스플로러에서만 지원되었지만 웹 표준으로 지정되면서 크롬과 사파리에서도 지원하고 있습니다.

 

word-break 속성 값

값	설명
nowrap	줄바꿈이 되지 않게 지정함
break-all	특수 문자를 제외하고 강제 줄 바꿈
keep-all	텍스트가 한글일 경우 띄어쓰기 기준으로 줄 바꿈

 

nowrap 속성값 적용 예제

break-all 속성값 적용 예제

keep-all 속성값 적용 예제

 

③ text-overflow 속성 : 말줄임 지정

긴 문장에 대하여 말줄임을 지정하여 잘라주는 형태를 지정합니다.

 

text-overflow 속성값

값	설명
clip	영역에 맞추어 글자를 잘라줌
ellipsis	잘리는 끝부분에 자동으로 ... 을 넣어줌

브라우저 지원 현황

익스플로러	파이어폭스	크롬	사파리	오페라
6.0 이상	7.0 이상	10.0 이상	3.2 이상	10.6 이상

 

clip 속성값 적용 예제

 

ellipsis 속성값 적용 예제