29. CSS를 이용한 텍스트 스타일 지정

소개

Introduction

웹은 “문서” 의 집합이므로, 웹의 형태에 대해 말하면서 사용하는 개념들은 600년의 역사를 가진 인쇄술에서 많이 가져왔습니다. 글씨도 여기에 포함됩니다. 물론 웹은 새로운 매체이고 웹 사이트에서 글씨를 잘 표현하려면 인쇄 디자인과는 아주 많이 다르고 심하게 제한된 기술을 익혀야 합니다.

Because the Web is a collection of documents — some dynamic, some static, some functional — the conventions under which they’re formatted are borrowed from our best point of reference: six centuries of printing tradition. This includes typography. The Web however is a new and different medium, and web site typography needs a largely very different skill set to print design, and is subject to a lot more limitations.

이 글에서는 시리즈의 앞에서 이미 다루었던 지식들을 바탕으로, 배운 것들을 CSS를 사용해서 효과적으로 표현하는 법을 다룹니다. 많은 예제들을 다루었으므로, 예제들을 압축한 것을 다운로드 받아서 활용하기 바랍니다.

This article builds upon the knowledge gained earlier on in the course, providing you with a detailed guide to styling text effectively using CSS. There are several examples linked to below, which will demonstrate the techniques discussed—here you can download all the article 29 examples.

글의 구조는 다음과 같습니다.

The article structure is as follows:

  • 웹 글씨체 리뷰
    • 대조
    • 가독성과 판독성
  • CSS 글씨 속성
    • font-size와 단위 선택
      • 방법
      • 단위
      • 단위의 종류가 많은 이유
      • 픽셀의 “정확한” 크기는 무엇일까요?
      • CSS의 em, 퍼센트, 포인트.
      • CSS 2.1 공식 권고안에 대해
      • 예약어
    • 글씨체 선택
    • font-style, font-variant, and font-weight: 미세조정
      • em 이나 i 요소를 써도 되는데 font-style 속성을 왜 쓰는지?
      • 글귀를 눈에 띄게 하는 다른 방법으로 font-variant이 있습니다.
      • font-weight: 글씨 두께
    • 단축속성
  • CSS 텍스트 및 정렬 속성
    • 정렬과 끝맞춤
      • 알파벳으로 쓰여진 문장에 적합한 끝맞춤
    • letter-spacing 과 word-spacing 속성
      • em 단위를 잘 쓰는 법
    • 들여쓰기
    • 대소문자 변경
    • 링크 스타일과 삭제 표시
      • 약어에 사용하는, 밑줄 아닌 테두리
    • 줄간격
    • 공백 조절
  • 요약
  • 더 읽어볼 것들
  • 연습문제

웹 글씨체 리뷰

Web typography review

웹 디자이너들은 다른 매체의 디자이너에 비해 할 수 있는 것이 적습니다. 화면의 크기, 해상도, 대조 같은 것에는 전혀 손 댈 수 없지요. 그밖에도 웹 글씨체의 품질에 관해서는 제약이 많은데, 글씨체의 기본에 관한 글에서 자세히 설명하고 있습니다.

On the Web, designers have much less control over presentation than they do in other media. This is most obvious when it comes to document canvas properties such as size, resolution, and contrast. There are also severe limitations on the quality of Web typography, which were discussed in the article about typography fundamentals.

위 글에서 소개하지 않았던 대조, 판독성, 가독성에 대해 먼저 살펴봅니다.

Other subjects that deserve an introduction are contrast, legibility, and readability—I’ll go through these now.

대조

Contrast

글씨체의 대조는 어떤 구절이 주변의 구절 및 공백과 얼만큼 쉽게 구분할수 있느냐 하는 것입니다. 대조는 여러가지 요인들에 영향을 받습니다. 그런 영향에는 밝기, 색깔, 크기, 구성 등이 있습니다. 여기에서 대조를 언급하는 이유는, 대조가 낮은 글은 가급적 크게 나타내야 합니다.

Type contrast, the ease with which passages can be distinguished from whitespace and adjacent passages, is influenced by a number of factors such as luminosity, colour, size, and composition. It is mentioned here for the sake of pointing out that low contrast copy should be set at the largest practicable size.

가독성과 판독성

Legibility and readability

디자인에서 판독성이란 찾고자 하는 것이 있을 때 얼마나 쉽게 훑어볼 수 있는가를 나타냅니다. 가독성이란 글귀를 얼마나 쉽게 이해할 수 있는가를 나타냅니다. 가독성과 판독성을 올리기 위해서 고려하는 것들을 표 1에 표시했습니다.

In a design context legibility is the ease with which a text passage can be scanned for specific pieces of information, while readability is the ease with which a passage can be comprehended. Design decisions that enhance one quality or the other are listed in Table 1.

표 1: 가독성과 판독성의 특징
목표 줄 길이 여백 & 줄간격 글꼴 끝맞춤
가독성 적당히 많이 세리프체 왼쪽맞춤 (오른쪽)
판독성 짧음 일반적 산세리프체 종종 양쪽맞춤

최적의 단 너비는 다음 글 – CSS 레이아웃 모델 에서 다룰 것입니다.

Optimal column width will be discussed in the next article – The CSS layout model.

CSS 글씨 속성

CSS font properties: changing the look of your text

글씨를 선택하는 것은 텍스트의 구성 및 각각의 글자와 단어의 모양을 조절하는 것입니다. 각각의 글자와 단어의 모양을 조절하는 작업을 CSS 글씨 속성을 통해서 하게 되며 아래에서 다룹니다.

Typesetting involves the manipulation of text with respect to both composition and the look of individual letters and words. The latter class of tasks is handled by the CSS font properties, which will be discussed below.

font-size와 단위 선택

font-size and unit type selection

보통 중요한 것은 font-size 인데, 대개의 문서에서 글씨체가 다양하기보다는 글씨의 크기가 다양하고, 또 글씨의 변형들에 대해서는 브라우저 스타일시트에 잘 정의되어 있으므로 그다지 손대지 않아도 되기 때문입니다. CSS 규칙에서 font-size를 사용할때는 뒤에 단위가 붙거나, small 또는 medium 같은 예약어를 사용합니다.

Since documents typically vary type sizes more than typefaces, and variant fonts are usually handled well by user agent stylesheets, the primary property of interest is font-size. When used in a rule, it’s followed with a value that specifies a unit measurement, or sometimes a keyword size (such as small or medium).

방법

How it’s done

가장 중요한 font-size 선언은 스타일시트에 이렇게 씁니다.

The most important font-size declaration in a stylesheet looks something like this:

body {…
  font-size: 14px;
  …}

문서의 body 요소에서 선언한 글씨 크기는 CSS의 상속을 통해 모든 요소들의 기준이 됩니다.

Inheritance causes all type size specifications in a document to be based upon the size declared for the document body, whether in the browser’s stylesheet or in yours.

브라우저에서 보통 기본값으로 사용하는 16픽셀을 그대로 써도 괜찮지만, 대부분의 방문자들은 좀 더 작은 글씨도 쉽게 읽을 수 있습니다. 대부분의 디자이너들은 11픽셀에서 14픽셀 사이의 글씨를 사용합니다.

The typical browser default of 16 pixels is a good starting point for the size of your body copy, but most visitors can read smaller type with ease. As a result, many designers choose smaller sizes—around 11–14 pixels.

상대적인 크기를 지정한 경우, 그리고 부모 요소에서 예약어(small 같은)를 사용하지 않았는데 자식 요소에서 예약어를 사용한 경우 CSS 상속을 통해 글씨 크기를 정합니다.

Inheritance applies to type sizing when a relative size is specified, and when a keyword size is specified for an element with a non-keyword-sized parent.

단위

What unit types can be applied to CSS text properties?

스타일시트에서 가장 많이 쓰는 글씨 크기 단위는 픽셀(px), em, 퍼센트, 포인트(pt) 입니다. 표 2에서 이러한 단위들의 관계를 나타냈습니다.

In stylesheet rules, the unit types most commonly applied to text are pixels (px), ems (em, explained below), percentages (%), and points (pt). The behaviour of text resized with these units is described in Table 2.

표 2: 편리한 단위들
단위 정의¹ 사용 예
CSS ems Δ = x 1.333em
예약어 브라우저에 따라 다름² large, &c.
퍼센트 Δ = x ÷ 100 133.3%
픽셀 절대값 16px
포인트 절대값 12pt

¹ Δ 은 물려받은 값에 대한 비율 입니다.

² 예약어 아닌 단위로 크기를 지정한, 가장 가까운 조상 요소의 것을 물려받습니다.

¹ Δ is the ratio of change in type size from the inherited value.

² Only the nearest non-keyword size value is inherited.

다른 단위들로는 예약어, 피카(pc. 1피카는 정확히 12포인트입니다), exas(ex) 등이 있습니다. CSS2는 다른 단위들도 지원하지만, 좀처럼 사용되지 않습니다.

Other available unit types include size keywords, picas (pc, one pica equals exactly 12 points), and exes (ex). Many of the other unit types supported by CSS2 are also available, but are rarely used when working with text.

단위의 종류가 많은 이유

What’s the use of so many different unit types?

표2에서 본 것 처럼, 상대적인 단위와 절대적인 단위가 있습니다. 예약어는 두가지 특징을 모두 갖습니다 – 예약어들 끼리는 절대적이지만, 물려받은 값에 대해서는 상대적입니다. 각각의 단위들은 아래와 같은 경우에 쓰면 좋습니다.

As pointed out in Table 2, there are relative and absolute sizing units. Keywords take on both characteristics — absolute sizing with respect to one another, but relative to the non-keyword value they inherit. The best practices to follow for their use are as follows:

  • 절대 크기는 픽셀이나 포인트 같은 표준화된 단위이며 화면 크기에 따라 달라지지 않는 레이아웃들에 적합합니다. 이런 레이아웃을 소위 고정, 정적 레이아웃이라고 부르기도 합니다.
  • Absolute sizes (px, standardized units such as pt) are best used in layouts that do not change in relation to document canvas properties — so-called “fixed”, “static”, or “Ice” layouts.
  • 상대 크기는 em 이나 퍼센트 같은 것이며 고정되지 않은 레이아웃, 사이트의 사용성과 디자이너의 역할 사이에서 절충이 필요한 경우에 적합합니다.
  • Relative sizes (em, %) should be used in non-static layouts, and in situations where a compromise needs to be struck between site usability and the designer’s control over the layout.
  • 예약어 는 사용성이 가장 중요한 경우에 적합합니다.
  • Keyword sizes (explained below) should be used when usability trumps all other design considerations.

절대 크기와 사용성

Absolute sizes and usability

인터넷 익스플로러 구형 버전에서는 글씨 크기를 절대 크기로 지정한 경우 사용자가 크기를 조절할 수 없었습니다. 또 몇몇 브라우저에서는 글씨 크기를 조절하는 메뉴를 찾기가 매우 힘들었습니다.(오페라와 파이어폭스에서는 쉽게 되어 있습니다. 오페라는 키보드로 Shift + Ctrl/Cmd + plus/minus, 파이어폭스는 Ctrl/Cmd + plus/minus 을 누르면 됩니다) 이러한 제약 때문에, body 요소의 font-size 속성을 브라우저에서 조절할 수 있을 것으로 기대되는 em 같은 상대 크기로 지정하는 것이 일반적입니다.

Older versions of Internet Explorer do not allow the visitor to resize text that has been set at absolute sizes, and the text resizing interfaces of some browsers that do allow that degree of user control can be hard-to-find (Opera and Firefox users have it easy, with Shift + Ctrl/Cmd + plus/minus and Ctrl/Cmd + plus/minus respectively). Because of these constraints, it’s a common practice to set the font-size of body to a relative value, usually in em units that are assumed to be controlled by the browser default.

픽셀의 “정확한” 크기는 무엇일까요?

What is the physical equivalent of a desktop pixel?

가장 정확한 답은, 그런건 없다는 겁니다. 픽셀은 모니터 같은 하드웨어에서 해상도의 단위이며, 그 이상의 의미는 없습니다. 물론…

The most accurate answer to this question is that there is no such thing. Pixels are a unit of display hardware resolution, and nothing more. However…

엄밀히 말해 픽셀이란 단위의 크기를 정의하거나 예측하는 것이 불가능함에도 불구하고, 윗사람들은 사이트의 디자인이 고객의 컴퓨터에서 다르게 보인다는 점에 놀라고 불쾌해하며 디자이너에게 화를 내곤 합니다. 이런 이유로, 픽셀이 어떻게 동작하는지 이해하는게 좋습니다 – 디자인이 컴퓨터들에서 동일하게 보이지 않는다는 이유로 당신에게 불평하는 사람이 있을 경우에 답변할 말을 준비해 두세요.

Despite the fact that it is strictly impossible to define or predict the literal size of a pixel, high-strung commercial project sponsors tend to be unpleasantly surprised when they discover that the design of their site takes on a different look on client hosts that are configured differently to their own, and yell at the web designer because of this. For that reason, it can be helpful to understand how pixels behave—I’m giving you this as ammunition, ready for those times when anyone you are creating a web site for complains that the text doesn’t look exactly the same on different machines.

소프트웨어 개발자들은 96ppi(인치당 픽셀 수)가 적당하다는, 객관적이진 않지만 널리 받아들여지는 감각을 가지고 있습니다. 따라서 화면에 16픽셀로 그려지는 글씨를 인쇄하면 6분의 1 인치, 즉 12포인트로 인쇄될 것입니다. 널리 보급되고 있는 17인치에 1280*800 해상도를 가진 LCD 모니터에서 16픽셀 글씨는 대략 13포인트로 보입니다만, 화면 크기로는 크게 차이가 없는 15인치 모니터에서는 11.44 포인트로 보입니다.

Software publishers have an informal understanding that 96 ppi (pixels per inch) is a reasonable measurement. Thus 16 pixel body copy will print at a size of one-sixth of an inch, or 12 points. On the increasingly typical 17″ 1280×800 liquid crystal display, such 16 pixel copy will have an approximate size of 13 points on screen, but on a similar 15″ notebook display, its size will be 11.44 points.

이런 계산법은 사용자가 설정을 변경하지 않았을 경우에 유효합니다. 거의 대부분의 경우에 사용자가 ppi 설정을 바꿀 수 있으므로, 미묘한 차이는 항상 있을 수 있습니다.

These measurements are effective at default settings. Most environments allow the end user to set a custom ppi measurement, so edge cases will arise.

결론: 픽셀은 픽셀이고, 나머지는 전부 가변적입니다.

In conclusion: a pixel is a pixel, but everything else is variable.

CSS의 em, 퍼센트, 포인트.

Ems, percentages, and points, according to CSS

em 이라는 단위의 유래는 대문자 M의 높이에서 비롯되었습니다만, CSS에서 em 단위는 한 줄의 전체 높이입니다. 바꿔 말해서, font-size를 14픽셀로 정의한 요소에 대해

Traditionally, the em is equivalent to the height of an uppercase “M” in the font to which it applies. However, in CSS the em unit is actually equivalent to the total height of one line; in other words for an element that has had its font-size set to 14 pixels:

1em = 100% = 14px

1em = 100% = 14px

보통의 경우 위 문장은 이렇게도 됩니다:

In typical environments, this statement above can be expanded to:

1em = 100% = 14px = 10.5pt

1em = 100% = 14px = 10.5pt

크기를 조절하는 것은 곱셈 방식입니다. 따라서 16픽셀을 지정하고 싶은 요소가 있다면, 다음의 모든 선언이 동일한 결과를 가져옵니다.

Increasing or decreasing sizes work multiplicatively, so if you have a second element that you want to set to a size of 16 pixels, given normal inheritance all of the following would obtain the desired result:

1.143em = 114.3% ≈ 16px = 12pt

1.143em = 114.3% ≈ 16px = 12pt

CSS 2.1 공식 권고안에 대해

A brief note about the official CSS 2.1 Recommendation

이따금씩 CSS 2.1 명세 를 참고하라고 할 것입니다. W3C의 모든 권고안들과 마찬가지로, 이 문서는 웹 표준을 정의한 것이라고 봐도 됩니다. 브라우저 개발자들과 웹 개발자들은 다른 것에 비해 W3C의 권고안을 더 신뢰하고 따릅니다.

You will find yourself directed on occasion to consult the World Wide Web Consortium’s Candidate Recommendation for the CSS 2.1 Specification. Like all W3C Recommendations, this document can be considered the definition of a Web standard; some are followed more faithfully than others, by browser manufacturers as well as web developers.

W3C의 권고안에 대해 잘 아는 것은 분명 가치있는 일이지만, 이 시리즈가 웹 개발과 디자인에 대해 쉽고 간단하게 해설하려는 목적을 가진 데 반해 W3C 권고는 좀 지나치게 양이 많습니다. 이 글에서 CSS 2.1 권고안을 링크한다면, 정확한 해설을 하는 것이 적합치 않은 경우입니다.

While knowledge of W3C Recommendations in both breadth and depth is good to have, this course has been written to give you a concise but easy to digest introduction to web development/design, and the W3C recommendations can be a bit verbose, to say the least. All cases here in which you are directed to visit the CSS 2.1 Recommendation point to material that’s too obscure to justify accurate explanation in this article.

예약어

Size keywords

위에서 간단히 언급했었던 예약어를 쓸 수도 있습니다. 예약어는 xx-small 부터 xx-large 까지 7개가 있습니다. 일곱가지 예약어는 아래의 표3에 적어 두었습니다. 이 글에서 언급할 다양한 CSS 속성들은 모두 그 표의 예약어들을 지원합니다.

You can also use size keywords, as briefly mentioned above. There are seven of them, from xx-small up to xx-large, with medium being the middle (and default) value. The full list of all seven values is spelled out in Table 3 below, which includes all of the keywords supported by the various CSS properties discussed in this article.

CSS 2.1 명세의 font-size 예약어들에 더 자세한 내용이 있습니다.

The CSS 2.1 Recommendation provides a wealth of additional detail about font-size keywords.

글을 진행하면서 [데모 1] 과 같이 표시한 항목의 아래에 있는 것은 설명하고 있는 CSS 속성을 점진적으로 적용하는 예제입니다. 데모의 처음 것은 스타일을 전혀 적용하지 않은 문서입니다.

Demonstration 1

 

From time to time, this text will link to a progressively styled demonstration document that will display the CSS properties under discussion, in actual use. This first instance shows the example document HTML completely unstyled

링크:
Links:
새로 적용한 규칙
New rules
body { font-size: 14px; }
h1 { font-size: x-large; }
.sectionNote { font-size: medium; }
.attribution { font-size: small; }

글씨체 선택

font-family and typeface selection

글씨 크기를 잘 설정했다면 사용할 글씨체를 한두가지 선택해야 합니다. font-family 속성을 이런 용도로 사용하는데, 아래 데모2에 잘 나타나 있습니다.

With text sized to your satisfaction, you can move onto selecting a typeface or two. This is accomplished with the font-family property, which is used as shown in Demonstration 2 below.

font-family 속성을 사용할 때는 다음 규칙을 지켜야 합니다.

When providing a value for the font-family property, you should follow these rules:

  1. 글씨체는 클라이언트 컴퓨터의 글씨체 라이브러리에서 부르는 이름을 정확히 써야 하며, 변형이 아니라 보통의 글씨체여야 합니다.
  2. 글씨체 이름들은 쉼표로 구분해서 써야 하며, 쉼표 뒤에는 공백을 써도 되고 안써도 됩니다.
  3. 글씨체의 이름이 한 단어가 아니라면 반드시 따옴표로 둘러싸야 합니다. 즉 ‘맑은 고딕’ 같이 쓰라는겁니다.
  4. font-family: Palatino, Georgia, serif; 와 같이 썼다면 브라우저는 먼저 Palatino 글꼴이 있는지 찾아보고, 있으면 그걸 씁니다. Palatino 글꼴이 없다면 Georgia를, 그것도 없다면 세리프체를 쓰게 됩니다. 즉, 가장 사용하고 싶은 글꼴을 맨 앞에 써주고, 그게 없을 경우에 대비해서 그와 흡사하며 좀더 널리 쓰이는 글꼴을 보험삼아 넣는 식으로 나열하면 됩니다.
  5. 최악의 경우에 대비해서, font-family 속성에 써주는 글씨체들 중 맨 마지막 것은 글씨체의 종류를 나타내는 일반 이름을 쓰는것이 좋습니다. MacOS 10.5에서 사용하는 일반 이름들을 그림 1에 나타냈습니다.
  1. Faces must be named exactly as they are named in the font library of the client host, using the non-variant font as a guide.
  2. All named faces must be separated by commas, with or without trailing whitespace.
  3. In cases where the name of a face contains more than one word, it must be enclosed by single or double quotes. Example: 'Times New Roman'.
  4. Faces should be named in order of ascending likelihood of availability. For example, if you want Macintosh users to see a page set in Palatino, your property-value declaration should probably read as follows: font-family: Palatino, Georgia, serif;. Palatino is exactly what you want, but some users may not have it; Georgia is much more likely to be available, and is similar to Palatino; serif refers to a generic default serif font—if neither Palatino nor Georgia are available, the system will fall back to its default serif font.
  5. As a fail-safe, a font-family value should always end with the appropriate generic name, as explained above. The typefaces used in generic families by MacOS 10.5 are displayed in Figure 1.

 

 

그림 1: MacOS 10.5 사파리 3.1에서 24픽셀로 나타낸 일반 글씨체들입니다.

Figure 1: Default “generic” typefaces in MacOS 10.5, as rendered at 24px by Safari 3.1.

CSS 2.1 권고안에서 각각의 일반 글씨체들에 사용할 수 있는 것들을 더 많이 제시하고 있습니다.

The CSS 2.1 Recommendation lists several more typefaces that might apply to each generic family.

[데모 2]

Demonstration 2

글씨 크기는 이미 조절해 두었으니 글씨체를 설정할 차례입니다. 제목은 산세리프체를 쓰고 본문에 세리프체를 써서 판독성이 좋게끔 했습니다.

Now that the size of the text is predictable, we want to optimize the typefaces used. The title is best set in a sans serif face for legibility, and the narrative itself in a serif face.

링크:
Links:
새롭게 적용한 규칙
New rules
body { font-family: Palatino,'Palatino Linotype',Georgia,sans-serif; }
h1 { font-family: Helvetica,Arial,sans-serif; }
blockquote { font-family: Helvetica,Arial,sans-serif; }

font-style, font-variant, and font-weight: 미세조정

font-style, font-variant, and font-weight: changing the details

font-style 속성을 사용하면 i 요소를 사용하지 않고 기울임체를 쓸 수 있습니다. 이 속성에 사용할 수 있는 값은 italic, oblique, normal의 세가지입니다.

The font-style property manipulates italicisation without resorting to the i element; its three valid values are italic, oblique, and normal.

대부분의 브라우저에서 italic과 oblique의 결과는 같습니다. 이 시리즈의 용어집에서 설명할텐데, 두 방식은 기술적으로는 차이가 있습니다.

The italic and oblique values deliver functionally identical results in the most recent versions of all mass-market Web browsers, even though there is a meaningful technical difference between the two styles, as explained in the Glossary that accompanies this course.

em 이나 i 요소를 써도 되는데 font-style 속성을 왜 쓰는지?

Why use the font-style property, when the em and i elements seem adequate?

각각의 요소에는 그에 맞는 사용처가 있습니다. em 요소는 강조를 나타내고, i 요소는 <span style=”font-style: italic;”>…</span> 대신에 쓰는 것입니다. 사실 i 요소는 표현적인 요소이므로 아무곳에도 적합하지 않다고 해야 맞는데, 책 제목이라든지 관습상 기울임체를 쓰는 곳에서 쓰는 사람들이 있습니다(물론 여기에도 논란의 여지는 있습니다. 책 제목을 마크업하려면 cite 요소를 쓰는게 더 적합하다고 생각하는 사람들도 있습니다. 둘중 적절해 보이는 것을 쓰세요). em 요소는 그 개념에 강조한다는 목적이 있으므로, 사용처가 좀 더 분명합니다. em 요소가 대개 기울임체로 표시되기는 하지만, 브라우저에 따라서 다를수도 있습니다.

Each of those elements has specific uses: the em to provide emphasis, and i to serve as an alternative to <span style="font-style: italic;">…</span> in those few instances when its use would be appropriate. Generally <i> isn’t appropriate at all, as it is a presentational element, but there are certain pieces of copy that are italicised by convention, such as book titles (although this is still arguable; some think the cite element is more appropriate for book titles. Do what seems most appropriate). <em> is generally more appropriate, because it specifies emphasis as a concept, rather than italics as a specific style—the actual look of emphasis may vary between different browsers.

em과 strong을 색다르게 써야 하는 경우도 있습니다. 예를 들어서 강조를 나타내기 위해 글씨체를 크게 하고 싶다고 해봅시다. 그렇다면, 강한 강조를 하려면 큰 글씨를 다시 기울여야 할 텐데, 스타일시트를 이렇게 써야 될겁니다.

There are situations where the use of em and its cousin strong may require a different approach. For example, suppose you wanted to emphasize copy by enlarging it. The consistent step for providing strong emphasis would then be to add italicisation, resulting in rules such as the following:

em {
  font-size: large;
  font-style: normal;
}

strong {
  font-size: large;
  font-weight: normal;
  font-style: italic;
}

위 스타일시트의 결과는 이렇습니다.

The preceding stylesheet rules would deliver results similar to the following:

The quick red fox jumped over the lazy brown dog.

[데모 3]

Demonstration 3

예제의 본문 중에는 기울임체를 쓸만한 단어나 글귀가 없으며, 저자를 표시한 곳에서는 이미 cite 요소를 사용했기 때문에 역시 기울임체 예제로는 적당하지 않습니다. 선택의 여지가 별로 없으므로, 제목에 기울임체를 적용하겠습니다.

There are no italicised words or passages in the demonstration copy, and the attributions already contain the necessary italicisation due to use of the cite element. Given the lack of options, the title is the best candidate for italicisation.

링크
Links:
새롭게 적용한 규칙
New rules
h1 { font-style: italic; }
.sectionNote { font-style: normal; }

글귀를 눈에 띄게 하는 다른 방법으로 글꼴 변형이 있습니다.

font-variant as another tool for making short passages stand out

font-variant 속성에는 small-caps와 normal 두가지 값을 쓸 수 있습니다. small-caps는 긴 문구의 도입부를 강조하거나 인용구를 강조하는 목적으로 사용할 수 있습니다. 효과는 이렇습니다.

The font-variant property has two possible values, small-caps and normal. “Small caps” (also known as “copperplate” letters) are used by some designers to highlight the opening phrase of a long narrative, or to provide emphasis for quoted signage, such as the following:

Abandon all hope, ye who enter here.

[데모 4]

Demonstration 4

링크:
Links:
새롭게 적용한 규칙
New rules:
.opening { font-variant: small-caps; }

font-weight: 글씨 두께

font-weight: boldness and the lack thereof

font-weight 속성을 통해 글씨의 두께를 조절할 수 있습니다.

The font-weight property allows you to alter the level of boldness of any passage of text to which it is applied.

대부분의 브라우저에서 font-weight 속성의 값으로 bold와 normal 두가지만을 지원합니다. CSS 2.1에서는 몇가지 다른 값들을 제공하고 있지만 현 상황에서는 사실 무의미합니다.

The commonly supported values of the font-weight property are normal and bold. While the CSS 2.1 Recommendation provides several other values, the current state of Web typography support makes those other values functionally meaningless to all but specialist users.

[데모 5]

Demonstration 5

저자 이름을 굵은 글씨로 표시하는 사례가 아주 흔한 것은 아니지만, 굵은 글씨로 표시하는게 어울리는 경우도 많습니다.

Boldfacing the name of an author is a design technique more often used in periodicals, but it still fits in various situations on the web.

링크:
Links:
새롭게 사용한 규칙
New rules:
.author { font-weight: bold; }

단축속성

The font shorthand property

background 속성과 마찬가지로, 여러가지 속성들을 하나로 묶어서 쓸 수 있습니다.

Many text properties can be provided in the value for a single property, if needed, in a manner similar in nature to background properties.

글씨체 단축속성은 이렇게 씁니다

A font shorthand rule looks like this:

h1 { font: italic normal bold x-large/1.167em Helvetica,Arial,sans-serif; }

h1 { font: italic normal bold x-large/1.167em Helvetica,Arial,sans-serif; }

단축 속성에는 정해진 순서가 있습니다. 정확한 결과를 얻으려면 아래의 순서에 따라, 각 속성의 값을 빈칸으로 구분해서 써야 합니다.

For the best results, the value you supply for this property should include your intended values for all of the following individual properties in the following order, separated by spaces:

  1. font-style
  2. font-variant
  3. font-weight
  4. font-size 줄간격도 같이 쓸 수 있는데, 글씨크기와 줄간격은 / 로 구별합니다.
  5. font-family여기에서는 시스템 글꼴을 나타내는 예약어들도 사용할 수 있습니다. 여러개의 값을 쓰려면 쉼표로 구분해야 하며, 공백만으로 구분할수는 없습니다.
표 3: 이 글에서 설명하는 속성과, 거기 사용할 수 있는 예약어들입니다.
속성
font-family cursive, fantasy, monospace, sans-serif, serif
font-size xx-small, x-small, small, medium, large, x-large, xx-large
font-style italic, normal, oblique
font-variant normal, small-caps
font-weight bold, normal
line-height normal
text-align center, justify, left, right
text-decoration line-through, none, overline, underline
text-transform capitalize, lowercase, none, uppercase
white-space normal, nowrap, pre, pre-line, pre-wrap

CSS 텍스트 및 정렬 속성

CSS text and alignment properties: altering composition

글자와 단어들을 다루는 스타일리스트는 선, 곡선, 점, 픽셀, 기타 아주 세세한 것을 주로 다루지만, 디자인은 전체적인 것입니다. CSS 레이아웃 모델에는 디자인의 더 큰 부분들을 조절하는 속성들이 포함되어 있습니다. 또한 구성에 영향을 주는 텍스트 및 정렬 속성들도 지원합니다. 여기서부터는 그러한 것들을 다룹니다.

A stylist working with letters and words is dealing in details: lines, curves, dots, pixels, and the other cellular bits of a design. A design is a whole thing however; it has bigger components which are brought into focus by composition controlled principally through the CSS layout model. In addition to that layout model, CSS also implements text and alignment properties that influence composition. The rest of this article will discuss those properties.

정렬과 끝맞춤

text-align and justification

text-align 속성은 워드프로세서와 마찬가지로 왼쪽, 오른쪽, 중앙, 양쪽 정렬을 지원합니다.1)

As is the case with word processing environments, the text-align property supports four justification values: left, right, center, and justify. The last of these provides full justification: visible text margins that are consistent on both the left and right sides of a block of copy.

알파벳으로 쓰여진 문장에 적합한 끝맞춤

Proper justification of copy written in Western alphabets

정렬 방법과, 그것이 가장 적합한 경우를 정리했습니다.

The best general usage of the different available alignments is as follows:

  • 왼쪽 정렬은 길게 쓰여진 산문에 가장 적당합니다.
  • 오른쪽 정렬은 표 또는 다단 구성에서 맨 왼쪽에 있는 열에 적당합니다. 가까이에 있는 열이 왼쪽으로 정렬되었고 두 열 사이에 적당한 여백이 있다면 판독성이 많이 좋아집니다.
  • 양쪽 정렬은 인용구나 광고 예고편 같은 짧은 글에 적당합니다. 긴 글의 양쪽에 넓은 여백을 주고, 적당한 너비로 양쪽 정렬을 쓰면 레이아웃이 일관성있어 보입니다.
  • 중앙 정렬은 보통 인터페이스 요소라든가 사이트의 꼬리말 같은 용도로 사용합니다.
  • Left justification is best suited to long passages of narrative.
  • Right justification is best used on the leftmost column of data tables and multiple column layouts. When the adjacent column is then left justified and placed on the other side of an appropriately wide gutter, the result is to improve the legibility of both columns.
  • Full justification works well for small blocks such as block quotations and teaser copy. When used on long passages of narrative set to optimal width bestride wide margins, full justification also improves the apparent coherence of your layout.
  • Centering is typically used for interface elements and serial lists such as those found in site footers.

[데모 6]

Demonstration 6

이 예제는 사실 소설책에서 따온 것이니 양쪽정렬을 써도 괜찮을 것 같습니다.

Since the demonstration is built around fiction originally sourced from a book, why not give it full justification?

링크:
Links:
새롭게 사용한 규칙:
p { text-align: justify; }
blockquote p { text-align: left; }

letter-spacing 과 word-spacing 속성

이 속성의 의미는 글자 그대로입니다. 글자와 글자 사이, 단어와 단어 사이의 간격을 조절할 수 있습니다.

These properties are fairly self-explanatory; they allow you to alter the amount of whitespace between letters and words, respectively.

letter-spacing은 작은 대문자 변형글꼴과 조합해서 강조를 나타내기 위해 쓰는 경우가 가장 많습니다. 인터페이스 요소들이 독특해 보이도록 쓰는 경우도 있습니다.

The most common use of letter-spacing is to provide subtle emphasis analogous in effect to that provided by font-variant: small-caps; it may also be used to subtly alter the composition of interface elements.

word-spacing은 한 줄의 단어 숫자를 조절하기 위해 씁니다. 평범한 줄 너비에 평범하지 않은 크기의 글자들을 넣으려면 이런 속성이 도움이 될 것입니다.

The word-spacing property is best used to deliberately change the number of words likely to appear on a single line of copy. For example, it might be used if you have a copy block of typical width, but atypical type size.

인쇄술에서는 구성의 결함을 메우기 위해 글자간격과 단어간격을 아주 많이 쓰는 편입니다만, 웹에서는 그리 쓸모있지는 않습니다.

In print, letterspacing and word spacing are also applied on an ad hoc basis to avoid composition flaws, but on the Web this technique has limited usefulness.

값으로 숫자와 함께 normal 예약어를 쓸 수 있습니다.

In addition to unit values, these properties support the normal value.

em 단위를 잘 쓰는 법

Using em units for good control

글자간격을 조금만 바꿔도 차이가 아주 심합니다. 글자간격의 기본값은 보통 0.05em 에서 0.1em 사이입니다. letter-spacing을 이 값의 2배 이상, 혹은 절반 이하로 고친다면 판독성이 아주 낮아질 수 있습니다.

When you change the letterspacing of text, a little nudge carries for a long distance; the default letterspacing tends to be between one-tenth and one-twentieth of an em, so letter-spacing values that do more than double or halve the default might well result in illegible copy.

[데모 7]

Demonstration 7

글의 마지막쯤에 있는 광고 카피를 좀 강조해야 될 것 같습니다. 인용구를 조금 큰 글씨로 표시했으므로, 약간의 단어 간격을 추가하면 더 좋아 보일 것입니다.

The sign copy discussed near the end could use some subtle emphasis… and since the pull quote is set in a larger size, it can be improved using some word spacing.

링크:
Links:
새롭게 적용한 규칙
New rules:
q { letter-spacing: .143em; }
.pullQuote { word-spacing: .143em; }

들여쓰기

Indenting initial lines: the text-indent property

text-indent 속성을 사용해서 전통적인 인쇄 스타일처럼 들여쓰기를 할 수 있습니다. 이 속성은 음수값도 사용할 수 있으므로 적절히 이용하면 여러가지 레이아웃 효과를 낼 수 있습니다.

The text-indent property makes it possible to indent paragraphs in the traditional style of printed matter. There are also a number of advanced layout techniques that are made possible by this property and its support of negative values.

이 속성에는 font-size 에서 쓸 수 있는 다양한 단위들과 normal 예약어를 쓸 수 있습니다.

The values supported by this property are the same as those supported by font-size, with the addition of normal.

[데모 8]

Demonstration 8

소설책에서 따 온 글이므로 들여쓰기를 하는게 좋겠습니다.

On the same rationale that the passage was fully justified, maybe it should have all of its paragraphs indented.

링크:
Links:
새롭게 적용한 규칙
New rules:
p { text-indent: 1.429em; }
blockquote p { text-indent: 0; }

대소문자 변경

Capitalisation: the text-transform property

font-variant 속성은 소문자 크기로 모양만 대문자로 표시하는 것이지만, 이 속성을 쓰면 실제로 대소문자를 바꿀 수 있습니다. 값으로는 전부 대문자로 바꾸는 uppercase, 전부 소문자로 바꾸는 lowercase, 단어의 첫글자만 대문자로 바꾸는 capitalize를 쓸 수 있습니다.

Just as the font-variant property gives you access to copperplate letters, the text-transform property deals specifically with capitalisation. Its allowed values provide for all-caps, all-lowercase, or all-initially-capitalised rendering of text. See Table 3 above for a list of supported values.

[데모 9]

Demonstration 9

링크:
Links:
새롭게 사용한 규칙
New rules:
.author { text-transform: uppercase; }

링크 스타일과 삭제 표시

Link styling and showing deletions: the text-decoration property

text-decoration 속성을 통해 글자 위, 아래, 가운데에 선을 그을 수 있습니다. 이것을 가장 흔하게 보는 예는 링크의 밑줄입니다. 풍자, 여러 사람이 공동작업하는 위키 등에서는 가로지르는 선을 필요로 하는 경우가 있습니다. 이럴때는 ins(삽입), del(delete) 요소를 쓰면 됩니다. 각각의 요소는, 마치 이런 스타일시트 선언을 한 것 처럼 표시됩니다.

This property makes it possible to put lines over, under, and through text. Its most common use is to manipulate default link underlines, however wikis, satire, and other settings will beg use of strikethroughs. In these cases you will want to employ the ins (insert) and del (delete) elements, which provide equivalent styling to the following:

ins {
  text-decoration: underline;
}

del {
  text-decoration: line-through;
 }

스타일시트를 사용하지 않아도 ins와 del 요소는 이렇게 보입니다.

Even without custom stylesheet rules, ins and del style markup as follows:

Mark Twain Benjamin Disraeli is remembered for many witticisms, including “there are lies, damned lies, and statistics.”

약어에 사용하는, 밑줄 아닌 테두리

Borders, not underlines, with acronym and abbr

몇몇 디자이너들은 약어들에 점선으로 된 밑줄을 긋곤 합니다. 이런 효과는 text-decoration이 아니라 border-bottom 속성을 쓰는 것입니다. (몇몇 브라우저의 기본 스타일시트에 이런 효과가 정의되어 있습니다. 물론 IE6 처럼 정의되지 않은 브라우저도 있습니다)

Among some designers it is popular to alter the appearance of acronym and abbr elements so that they appear with what appears at first glance to be a dotted underline. However, this effect is actually accomplished with a border-bottom value. (Remember that some browsers supply this automatically, but others, such as IE 6, don’t).

[데모 10]

Demonstration 10

링크:
Links:
새롭게 적용한 규칙
New rules:
.source a { text-decoration: none; }

줄간격

Leading adjustment and line-height

적당한 줄간격은 가독성에 도움이 되는데, 단어들의 위 삐침ascender과 아래 삐침descender이 혼란스러워 보이지 않기 때문입니다.

It’s well-known that placing some whitespace between lines of text tends to increase its readability, because the increased space ensures that ascenders and descenders (see Figure 2 for explanation) on adjacent lines will not compete for visual focus.

 

그림 2: 위 삐침은 글자의 상단을 따라 그어지는 가상의 선 위로 삐져나오는 부분이며, 아래 삐침은 하단을 따라 그어지는 가상의 선(베이스라인) 아래로 삐져나오는 부분입니다.

Figure 2: Ascenders are the parts of letters that rise above the mean line of the text; descenders are the parts of letters that drop below the base line that the text sits on.

글씨 크기와 줄간격에 정해진 관계가 있는 것은 아닙니다만, 모든 브라우저들은 글자 크기의 10%-15% 정도의 줄간격을 기본값으로 정해 두고 있습니다. 이 기본값은 글씨체에 따라 다르기 때문에 line-height 속성에 숫자가 아닌 normal 예약어도 쓸 수 있습니다.

There’s a loose relationship between the font-size of an element and its line-height, but by default, all user agents insert a small amount of leading into each line of text — usually 10–15% of the height of the letters themselves. Because this default changes from one typeface to the next, the line-height property supports a value of normal in addition to numeric values.

다른 속성들과는 다르게, line-height에는 단위를 생략하고 숫자만을 쓸 수 있습니다. 이 숫자는 기본값에 대한 비율로 간주됩니다.

It is also worth noting that unlike most CSS properties, line-height accepts numeric values without units, which are then rendered as a ratio of the default.

[데모 11]

Demonstration 11

줄간격과 가독성 사이의 밀접한 관계를 보여주는 예제입니다.

The relationship between leading and readability has been bandied about a lot, so here’s the proof.

링크:
Links:
새롭게 적용한 규칙
New rules:
     p { line-height: 1.5; }
.attribution { line-height: 1.5; }

공백 조절

Supplanting pre and br: the white-space property

강제로 줄바꿈을 하는것은 엄밀히 말하면 표현적인 것입니다만, 사이트 디자인을 하다 보면 피할 수 없는 일입니다. 브라우저는 제멋대로 줄바꿈을 하는 경향이 있어서, 마크업만 가지고 이런 것들을 잘 조절하는건 참 어렵습니다.

Forced linebreaks are a presentational element in the strictest sense, though there are many circumstances in which they’re a desirable element of a site design. In tandem with browsers’ habit of breaking lines on arbitrary spaces, exercising the desired degree of control with markup alone can be a challenge.

pre 요소를 사용하면 줄바꿈이라든가 공백을 마음대로 조절할 수 있지만, 이건 또 이것 나름대로의 어려운 점이 있습니다. CSS의 white-space 속성은 이런 부분에서 도움이 됩니다. 이 속성을 이용하면 마크업에 포함된 공백과 줄바꿈을 브라우저가 표현할지 아닐지 지정할 수 있습니다. 예약어들은 표 3에 있습니다. 각 예약어들의 자세한 설명은 CSS 2.1 명세에 있습니다.

The pre element is provided to deal with these challenges, though it presents challenges of its own, which is why CSS offers the white-space property. Its supported values, which are listed in Table 3, allow the stylist to choose whether or not the browser will render whitespace and linebreaks that have been added to source markup or inserted as generated content.

The CSS 2.1 Recommendation provides exhaustive details about the suggested implementation and use of the white-space property.

요약

Summary

사이트 디자인을 잘 하려면 세세한 것들에 주의를 기울여야 하고, 수많은 요소들의 관계를 조절해야 합니다. 글씨도 여기에서 큰 부분을 차지합니다.

An excellent site design requires a high level of attention to detail and proper adjustment of the interaction of numerous elements, not the least of which is type.

CSS는 현존하는 하드웨어들이 허용하는 한계에 거의 근접할 정도로 세밀한 표현을 할 수 있게 해 줍니다. 이러한 것을 잘 배워서 활용하는 것은 CSS 제작자의 몫입니다. 이런 속성들을 잘 쓰면 수세기동안 발전시켜 온 인쇄술에 거의 근접할 정도로 사이트의 품질을 끌어올릴 수 있습니다 – 웹은 아직 한 세대도 채 지나지 않았는데 말입니다.

The suite of font and text properties supported by current browsers’ implementations of CSS gives nearly the highest level of control over typesetting that existing output hardware will allow, and it’s up to the conscientious site stylist to learn how to use them. As a result of using those properties successfully, sites go into production that can aspire to approach standards of quality in typesetting more commonly associated with the print medium we’ve developed over the span of centuries, in spite of the fact that the Web hasn’t yet been around for longer than a single generation.

더 읽어볼 것들

Further reading

연습문제

Exercises

  • b요소와 i 요소를 제외하고, 보통 변형된 글씨체로 표현되는 요소를 세가지 들어 보십시오. 그 요소들의 목적을 간단히 설명하고, 그렇게 변형된 글씨체를 요소의 목적에 적합하게 사용하는 방법을 설명해 보십시오.
  • 가독성 테스트를 염두에 두고, 줄 간격을 조절해 가면서 긴 문장을 읽어 보십시오. 느낀 점을 간단히 요약해 보십시오.
  • 위에서 사용했던 예제의 아무 문단에나 text-transform: uppercase; 를 적용해보고, 가독성을 염두에 두면서 읽어 보십시오. 느낀 점을 간단히 요약해 보십시오.
  • 비트맵을 확대했을때 계단처럼 보이는 것을 부드럽게 처리하는 앤티앨리어싱 기술의 장단점을 이 글의 글씨 리뷰를 가이드 삼아 간단히 설명해 보십시오.
  • font-family 속성에서 글씨체를 어떤 순서로 써야 하는지 설명하십시오.
  • 인쇄된 책에서 이 글에서 설명하는 속성들을 최소한 3개 이상 찾아보고, 각각의 속성에 사용할 수 있는 올바른 값을 최소한 하나 이상(기본값은 빼고) 들어 보십시오. 속성/값 쌍을 스타일시트에 사용한 결과를 직접 만들어보거나 설명해 보십시오.
  • 요소를 하나 만들어서 문장을 채워 넣고, 글씨 크기를 9픽셀로 지정하십시오. 이것을 인터넷 익스프로러에서 열고, 글씨 크기 메뉴로 크기를 조절해 보십시오. 나이 많은 사용자들이 주로 쓰는 사이트에서 이것이 얼마나 적합한지 평가해 보십시오.
  • List three HTML elements, other than b and i, which are typically rendered with variant fonts by default. Briefly describe the intended purpose of the elements you listed, and explain how the use of a variant font is appropriate to those elements’ purposes.
  • Subjectively test the readability of a long text passage of your choice, at varying line-height values. Briefly summarize your results.
  • Apply text-transform: uppercase; to a single paragraph of the passage used for the previous exercise, and repeat your subjective test for readability. Briefly summarize your results.
  • Briefly explain the advantages and disadvantages of anti-aliasing, using the typography review in this article for guidance.
  • Describe the order in which typefaces should be specified, in a font-family value.
  • In a closed-book setting, choose at least three properties described in this article and list at least one valid value (other than defaults) for each. Demonstrate or describe the results of the use of these property/value pairs in a stylesheet.
  • Create an element, populate it with copy, and assign it a font-size value of 9px. Open the document containing this element in Internet Explorer, and cycle through the type sizes provided in the View → Text Size menu. Evaluate the suitability of these results on sites with large numbers of middle aged and elderly visitors.

저자에 관해

About the author

Ben Henick은 1995년도에 대학에서 한두가지 목적을 가진 웹 사이트를 만들면서 웹 개발을 시작했습니다. 그때부터 주로 프리랜서 일을 하고 있습니다.

Ben Henick has been building Web sites in one capacity or another since September 1995, when he took on his first Web project as an academic volunteer. Since then, most of his work has been done on a freelance basis.

Ben은 사이트 디자인과 개발, CSS와 HTML, 디자인과 카피라이팅, PHP/MySQL, JavaScript/Ajax 등 여러방면에 능통합니다.

Ben is a generalist; his skillset touches on nearly every aspect of site design and development, from CSS and HTML, to design and copywriting, to PHP/MySQL and JavaScript/Ajax.

 

He lives in Lawrence, Kansas, with three computers and zero television sets. You can read more about him and his work at henick.net.

이 글과 비슷한 종류의 글은 'CSS' 카테고리에서 더 찾아볼 수 있습니다. 또한, , 태그로도 검색해 보실 수 있습니다. 북마크를 하시려면 퍼머 링크로 기억해 주세요.
이 글을 다 읽어주셨다면, 댓글을 남겨주세요. 좋았다라는 격려도 좋고, 잘못된 부분을 지적해 주시는 것도 좋습니다. 마음에 드셨다면 아래 Like 버튼을 눌러서 페이스북과 트위터로 소개해 주시면 더욱 좋겠습니다.