여러 종류의 텍스트 프로퍼티를 차례로 일일이 작성한다는 것은 피곤한 일이다. 다행히 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 |