[CSS]

font-family 

자바 스크립트는 자바와 유사하여 변수명에 -(하이픈)을 줄 수 없음. 

스크립트로 고칠 때, -(하이픈)이 들어간 것은 -을 빼고 뒷 단어의 첫 글자를 대문자로 수정함

font-family -> fontFamily로 사용한다. 

 

Sans-Serif 글꼴은 거의 모든 os에서 지원을 해줌

arial 은 제목에 많이 사용하는 글꼴 

 

@font-face 속성 

클라이언트에게 없는 폰트도 이용할 수 있도록 지원해줌 

 

Web Fonts

1) CDN 방식

웹에서 폰트를 가져와야 하므로 속도가 느리지만 아주 간단하다는 장점

실무에서는 사용하지 않는 방식

 

CDN에서 import

@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);

 

CSS에 font-family 속성에 적용

.box1 {font-family : "Nanum Gothic", sans-serif; }

 

HTML에서 사용

<div class="box1">나눔 고딕</div>

 

구글 폰트에서 다양한 폰트를 CDN 방식으로 이용할 수 있음 

https://fonts.google.com/

Google Fonts

 

2) 서버 폰트 로딩 방식

서버의 폰트를 클라이언트에게 제공할 수 있음 

브라우저마다 지원하는 폰트가 다름

브라우저에 따른 폰트를 다운로드 

 

font-weight 속성

 

font-style 속성

 

font 속성

글꼴, 크기 등을 한번에 지정할 수 있는 속성 

 

color 속성 

 

text-decoration

 

text-transform

텍스트를 대소문자 또는 전각문자로 변환함

 

 

white-space

공백 처리를 어떻게 할 것인지를 나타냄 

 

pre

공백 유지 

 

nowrap

줄 바꿈은 br로만 일어남. 한 줄로 쭉 나옴 

가끔 사용 

 

pre wrap

많이 사용함 

자동 줄 바꿈 

 

pre-line

여러 공백은 하나의 공백, 영역을 넘어가는 

 

 

pre, norwap, pre-wrap 기억해 둘 것 

 

letter-spacing 

글자와 글자사이의 간격을 조정

 

word-break

한 단어의 길이가 길어서 부모 영역을 벗어난 텍스트의 처리 방법을 정의

영어 사용 시, 화면이 깨질 수 있으므로 둘 중에 하나는 사용해야 함  (한글은 무관)

 

word-wrap

속성 단어를 어느 정도는 고려하여 개행(., - 등을 고려)

개행을 정리해야 할 때 사용함 

 

word-break

break-all;는 단어를 고려하지 않고 부모 영역에 맞추어 강제 개행

 

 

text-overflow

white-space:nowrap; 로 지정, 영역을 넘치는 텍스트를 처리하는 방법을 지정

 

 

 

text-transform

대문자/소문자로만 출력해야 할 때 굳이 자바로 바꾸지 않아도 CSS만으로 처리가 가능!