Text Properties

From. CSS 비밀메뉴얼

다음 프로퍼티들은 웹페이지 상에서 텍스트 형식이 어떤 식으로 정의될 것인지를 결정한다. 이 카테고리에 있는 프로퍼티 대부분이 상속되기 때문에, 프로퍼티를 반드시 텍스트 전용 태그(예: <p>태그)에만 적용시킬 필요는 없다. 다른 태그가 상속받아서 같은 설정을 사용할 수 있도록 <body>태그에 적용시켜도 된다. 이러한 기법을 이용하면 페이지나 섹션의 전체적인 글꼴, 색상 등을 신속하게 작성할 수 있다.


Color(상속됨)

텍스트의 색상을 할당한다. 이 프로퍼티는 상속되므로, 예를 들어 <body>태그의 색상을 red로 지정한다면, <body>에 포함된 전체 텍스트와 포함된 전체 태그도 역시 빨간색이 된다.

*값: 모든 유효 색상 값
*예: color:#FFFF33;

★ Note ★
<a>태그에 기본설정된 링크 색상이 상속받는 색상을 무효화한다. 위 예에서 <body>태그에 포함된 모든 링크는 여전히 표준 하이퍼링크 색상인 파란 색(blue)으로 보이게 된다.


Font(상속됨)

뒤에 나오는 텍스트 프로퍼티를 하나의 스타일 정의로 몰아넣을 수 있는 속기형 프로퍼티이다. Font-style, font-variant, font-size, line-height, font-family (각각에 대한 설명은 계속해서 설명한다.)

각 값들 사이에 빈 칸을 띄워야 하며, 적어도 font-size와 font-family를 포함시켜야 한다. 그리고 그 두 프로퍼티는 선언에서 맨 나중에 나와야 한다. 나머지 프로퍼티는 넣어도 되고, 안 넣어도 된다. 만약 프로퍼티를 지정하지 않으면, 브라우저는 기본설정 값을 사용하며, 상속받은 프로퍼티를 무효화할 수도 있다.

*값: font 계열 프로퍼티에 사용할 수 있는 모든 값. Line-height를 넣을 경우에는, 다음과 같이 font-size 다음에 슬래쉬를 넣고 그 뒤에 line-height 값을 넣어라: 12.5em/150%.
*예: font: italic small-caps bold 12.5em/150% Arial, Helvetica, sans-serif;


Font-family(상속됨)

브라우저가 텍스트를 표현하는 데 사용할 글꼴을 열거한다. 방문자의 컴퓨터에 특정글꼴이 설치되어 있지 않을 경우에 대비하여, 글꼴은 보통 3~4가지 옵션을 일렬로 나열해서 지정한다.

*값: 글꼴명을 꼼마로 구분하여 나열한다. 어떤 글꼴 이름 사이에 공백이 있을 경우에는 따옴표로 묶어야 한다. 맨 마지막에는 대개 포괄적인 글꼴 유형을 적는데, 만일 나열된 나머지 글꼴을 모두 사용할 수 없을 경우 그 포괄적인 글꼴 유형은 브라우저에게 적당한 글꼴을 알아서 선택하도록 지시한다. Serif, sans-serif, monotype, fantasy, cursive.

*예: font-family: “Lucida Grande”, Arial, sans-serif;


Font-size(상속됨)

텍스트 크기를 지정한다. 이 프로퍼티는 상속되며, 백분율이나 em같은 상대적 길이단위를 이용할 경우 잘못된 결과를 초래할 수도 있다.

*값: 유효한 CSS 크기 단위 전체와 다음 키워드: XX-small, x-small, small, medium, large, x-large, xx-large, larger, smaller. Medium은 웹브라우저의 기본설정 글자 크기를 나타내며, 나머지 크기들은 medium의 배수들이다. 정확한 수치는 브라우저에 따라 달라지지만, 일반적으로 1.2의 인수를 갖는다. 예를 들면 large는 medium보다 1.2배 크다. 브라우저마다 이 키워드를 일정치 않은 크기를 보여주기 때문에 많은 디자이너들은 백분율 대신 픽셀, em, 백분율 값을 사용한다.

*예: font-size: 1.25em;

★ Note ★
font-size 프로퍼티가 다른 태그로부터 상속되는 경우, 이 키워드는 상속된 글자 크기에 같은 인수(대개의 브라우저에서 1.2임)를 곱해서 처리한다.