코드/Html & CSS

font : 텍스트 형식화 속기법

Yeah-Panda 2012. 8. 14. 18:01




여러 종류의 텍스트 프로퍼티를 차례로 일일이 작성한다는 것은 피곤한 일이다. 다행히 css 에는 font 라는 약식 프로퍼티가 존재하는데,

이것을 사용하면 다음의 프로퍼티를 한줄에 통합해서 작성할 수 있다.


font-style, font-variant, font-weight, font-size, line-height, font-family.


예를 들어

font:italic bold small-caps 18px/150% Arial, Helvetica, sans-serif; 라고 하면

줄간격이 150% 인 볼드 이탤릭체 소문자 18px Arial(또는 Helvetica나 sans-serif)의 텍스트로 만든다.

이러한 명령들을 기억하도록 하자.


이 프로퍼티에 모든 것을 포함할 필요는 없으나,

font: 1.5em Georgia, Times, sans-serif;

와 같이 글자크기와 서체는 반드시 포함시켜야 한다.


각 프로퍼티 값 사이에 한칸의 공백을 넣는다. 콤마는 서체를 나열하는 경우 Arial, Helvetica, sans-serif 와 같이 구분하기 위해서만 사용한다.


줄간격을 지정할 경우, 글자 크기 뒤에 슬래시를 넣고 그 뒤에 line-height 값을 넣는다. 1.5em/150% 또는 24px/37px  (글자크기 / 줄간격)


마지막 두개의 프로퍼티로는 반드시 font-size(또는 font-size/ line-height) 와 font-family 가 순서대로 와야한다.

다른 프로퍼티는 아무 순서대로나 작성되어도 상관없다. 예를 들어

font: italic bold small-caps 1.5em Arial; 과

font: bold small-caps italic 1.5em Arial 은 똑같다.


끝으로 목록에서 값을 빼는 것은 그 값을 normal 로 지정하는 것과 마찬가지이다. 모든 단락을 줄간격이

2000%(실제로 그럴일은 없지만) 인 볼드, 이탤릭, 소문자 로 형식을 정의한 <p>태그 스타일을 작성했다고 가정하자.

그리고 font:1.5em Arial; 이라고 font 가 선언된

.specialParagraph 라는 클래스 스타일을 작서앟고 그것을 하나의 단락에 적용했다면,

그 단락은 이탤릭, 볼드, 소문자, 줄간격을 상속받지 않을 것이다. 그 네개의 값을

.specialParagraph 스타일에서 삭제하는 것은 font: normal normal normal 1.5em/normal Arial ;  과 같이 쓰는 것과 마찬가지이다.






'코드 > Html & CSS' 카테고리의 다른 글

블럭요소 안에서의 이미지 세로정렬  (0) 2012.10.25
-webkit-text-size-adjust  (0) 2012.08.21
colgroup >> col width=""  (0) 2012.03.06
Display Default Text in input box  (0) 2012.03.06
Start CSS  (0) 2012.01.02