CSS 텍스트 스타일링 기본

소개

웹은 기술적, 사회적, 구조적으로 다른 많은 것들로 구성되어 있지만, 그 심장에는 우리 모두가 이해하는 – 인간의 언어가 있다. 인간이 읽을 수 있는 텍스트로 보여지기 때문에, 장애 및 지리적 장벽 같은 것을 초월할 수 있다는 사실이 웹의 아름다움이다. 물론, 인간이기 때문에, 텍스트에 서식을 만드는 방법을 알아냈다. 그래서 여러 세기 동안 다른 사람들이 읽기 쉬웠다. 그러나 인쇄 형태이었다.

웹 디자인은 인쇄 디자인과 많은 유사점이 있다. 그러나 또한 많은 차이점과 더 많은 제한사항이 있다. 이 강좌에서는, 웹에서 CSS 사용하여, 텍스트에 스타일을 적용하는 방법을 탐구한다. Frank Zappa 의 짧은 전기 페이지 참조.

참고: 이전 강좌, typograhy on the web, 에서 인쇄술의 많은 개념을 설명한다. 이 장의 좋은 기초가 된다. 이 장을 진행하기 전에 읽어보자.

웹에서 보기 (Print to web) ?

인쇄 디자이너는 웹에서 보기 제어를 할 수 없다는 사실에 충격을 받는다. 인쇄 디자인에서, 디자이너는 자신의 작품이 어떻게 보일지를 궁극적으로 통제할 수 있다. 자신의 작품이 보여지는 공간의 크기 및 사용할 수 있는 색상의 수 또는 그러한 모든 속성들이 변하지 않을 것임을 알기 때문에 안심한다.

그러나 웹에서는, 당신의 아름답고 숙련된 디자인이 당신과 사용자에게 똑같이 보여지지 않는다. 서로 다른 운영체제 또는 다른 기기를 사용할 수 있다. 또는 시각 장애가 있을 수도 있다. 이들은 확대를 많이 해서 보거나, 또는 글꼴과 색상을 바꾸는 사용자 스타일 시트를 사용할 수 있다는 의미이다. 텍스트를 읽어 주는 스크린 리더를 사용할 수도 있다.

그러므로, 이런 불확실성을 받아들이고 진행해야 한다. 디자인을 더 유연하게 만들어서, 다양하게 변하는 보기 상황에서 더 잘 보이게 하는 전략에 대해, 나중에 이 과정에서 배우게 될 것이다. 그러나 지금은 기본을 알아보자:

글꼴 (Font styles)

CSS는 font- 로 시작하는 많은 속성을 가기고 있다. 이 속성으로 텍스트 문자 (또는 상형문자)의 많은 기능을 제어할 수 있다. 다음 섹션에서 이것들을 살펴보자.

font-family로 글꼴 선택 (Choosing a font with font-family)

font-family 로 어떤 글꼴, 또는 글꼴 들, 요소를 선택할 지를 지정할 수 있다. 위에 링크되어 있는 Zappa 예제에서, body 규칙에 다음 CSS 행을 추가하고, 저장하고, 다시 로드해 보자:

사용자 시스템에서 사용할 수 있다면, 전체 문서에 기본 serif (serifs를 가진 글꼴) 글꼴이 아닌 Arial — a sans-serif 글꼴 (serifs가 아니다, 텍스트 획 끝에 작은 장식 기능) — 을 적용할 것이다.

아마도 그렇게 될 것이다. Arial은 많이 사용하는 글꼴이기 때문이다. 모든 시스템에서 사용할 수 있을 것 같다는 의미이다.

웹 안전 글꼴 (Web-safe fonts)

거의 모든 시스템에 설정된 ,web safe fonts 이라는, 약 11개의 글꼴이 있다. 전체 리스트는:

  • Sans-serif: serifs가 없는 글꼴: Verdana, Arial, Trebuchet MS
  • Serif: serifs가 있는 글꼴: Times new roman, Georgia
  • Monospaced: 컴퓨터 코드에서와 같이, 안에 모든 상형문자가 같은 공간을 차지하고 있는 글꼴: Andale mono, Courier new
  • Cursive: 장식용의 손으로 쓴 것 같은 스타일의 글꼴: Comic Sans
  • Fantasy: 굵은, 장식적, 또는 독특한 스타일의 글꼴, 본문이 아닌 제목에 사용되는 글꼴: Impact

글꼴 묶음 (Font stacks)

원한다면, 선택된 단 하나의 요소에 여러 개의 글꼴을 적용할 수도 있다. font stack 이라 한다. 위에 추가한 행을 다음과 변경한다:

앞의 것과 많은 차이를 볼 수 없을 것이다. 그러므로, 어떻게 작동하는지 이해하는 것이 중요하다. 이와 같이 글꼴 묶음을 지정할 때, 브라우저는 왼쪽에서 오른쪽으로 시스템에 설치된 글꼴을 찾을 때 까지 진행한다. 그래서 사용될 수 있다.

이렇게:

  • 브라우저는 사용자 시스템에서 Helvetica neue 글꼴을 찾아, 이것을 찾으면 이것을 사용한다. 이것은 더 일반적으로 사용하는 것보다 보기가 더 좋다. 그러므로, 나는 가능하면 이것을 사용하려고 한다.
  • Helvetica neue를 찾을 수 없으면, 브라우저는 사용자 시스템에서 Arial을 검색한다. 이것은 여전히 아주 보기 좋은 sans-serif 글꼴이다.
  • Arial을 찾을 수 없다면, Verdana를 사용한다. 이것은 글꼴로 사용하기에는 보기 않좋다. 그러나 없는 것보다는 낫다.
  • 최후의 수단으로, 글꼴 묶음에 있는 아무 것도 찾을 수 없다면, 글꼴은 sans-serif로 다시 돌아간다. 이것은 시스템의 기본 sans-serif 글꼴로 어떤 기본 글꼴을 사용할 것인가를 브라우저에 지시한다. 이 만일의 사태에 어떤 것이 사용될지는 정확하게 알 수 없다. 이것은 귀찮은 제어수단의 손실이다. 그러나 적어도 이것이 기본 브라우저 글꼴로 끝나는 것보다는 낫다. — Times new roman — 이것은 serif 글꼴이다.

이름에 한 단어 이상이 있는 글꼴은 따옴표로 둘러싸야 한다는 사실에 주목하자.

본문 글꼴을 대체 (Overriding body fonts)

지금까지 <body> 요소에 글꼴을 설정하였다. 이것은 모든 것에 영향을 미치는, 페이지 전체의 기본 설정이다; 이제 <body> 의 자식 요소 일부를 대체(override)하여, 보기 좋게 바꾸는 방법을 배우겠다.

시작으로, 적어도 제목의 일부에 다른 글꼴을 사용하는 것이 좋다. 제목을 부각시켜, 사이트에 좀 더 특징을 부여한다. 스타일에 다음을 추가한다:

저장하고 다시 로드하여 페이지가 아주 다르게 보이는 것을 주목하자.

영향을 줄 수 있는 다른 글꼴로, 강조된 텍스트는 어떨까? 조금 부각시키고자 하는 데이터를 포함하고 있는 모든 참조에 대해, <em> 을 사용해왔다. 현 상황에서, 브라우저에서 기본 italic 글꼴은 강조되지만, 기대만큼 많이 강조되지는 않는다. 다음 규칙을 추가하자:

글꼴 (특히 제목)은 사이트의 전반적인 특징에 가장 많이 기여하므로, 잘 어울리도록 신중하게 선택해야 한다. 이것은 시작하기 어려울 것 같지만, 곧 그 요령을 터득하게 될 것이다. 대체로, Times new roman은 기업 사이트에 어울린다. 반면 Arial 같은 serif 글꼴은 덜 공식적인 사이트에 어울릴 것이다. Cursive 글꼴은 드물게 사용해야 한다 — 예를 들어comic sans 글꼴은 많은 디자이너가 좋아하지 않는다. 그러나, 일부 사례에는 적합하다. 예를 들어, 어린이 사이트에 칠판 효과로 분필을 만들기 위해 comic sans 글꼴을 사용할 수 있다.

제목은 다루기 어려웠었다. 유일한 웹 안전 fantasy 글꼴을 고려하면, Impact (나쁘지 않다, 그러나 모든 사이트가 이것을 사용한다고 상상해보자) 글꼴인 것 같다. 그리고 기본 시스템 글꼴을 강요당하고 싶지 않을 것이다. 보기 안 좋은 Papyrus 글꼴 같이, 디지이너는 제목에 다양한 이미지 기술을 사용해왔다. 지금쯤 알아야 하는 것은, 웹 사이트에서 제목에 이미지를 사용하는 것은 정말로 안 좋다. 이미지는 스크린 리더 또는 검색 엔진이 읽을 수 없기 때문이다. 다음 섹션에서, 이 문제에 대한 해결책을 알 수 있을 것이다.

지금까지 추가한 것은 zappa2.html 참조.

이미지 교체 (Image replacement)

이미지 교체는 제목과 회사 로고를 더 보기 좋게 표시화는 매우 일반적인 기술이다. 반면 이미지 대체 텍스트를 사용할 수 없게 만들거나, 검색 엔진 최적화와 절충하지도 않는다. 작동방법에 대한 개요이다:

원하는 디자인의 제목 이미지 파일을 만든다. use my Frank Zappa image 를 사용하자. CSS에 다음 규칙을 추가한다. 저장하고 페이지를 다시 로드한다. 이미지가 zappa.html과 같은 디렉토리에 이미지 파일을 저장해야 한다.:

이미지 교체에 대한 많은 변형이 있다. 그러나 기본적으로 작동 방법은 이것이다: 우선, 교체하고자 하는 요소에 배경 이미지로 이미지를 포함한다. 이미지가 충분히 보여지도록 요소의 크기를 설정한다 (예제 이미지는 600 x 55 픽셀로 하였다 – 내용 열과 같은 폭이다). 그 다음에 매우 큰 마이너스 들여쓰기로, 텍스트를 볼 수 없게 실제 제목 텍스트를 오른쪽으로 밀어낸다. 배경 이미지만 볼 수 있게 한다. 익숙하지 않는 CSS 속성에 대해서는 걱정하지 말자: 나중에 더 자세히 배울 것이다.

이것은 잘 작동한다. — 페이지에 표시되기를 바라는 제목의 모양을 대부분의 브라우저에서(대부분의 현대 브라우저는 배경 이미지를 표시한다)볼 수 있다. 그리고 실제 텍스트는 여전히 스크린 리더가 읽을 수 있도록 거기에 있다. 이 텍스트는 검색엔진에서도 필요하다. 그러나 다음과 같은 단점이 있다:

  • 이 기술은 유연하지 않다. 교체하기를 원하는 모든 텍스트에 이미지를 만들어야 한다. 그리고 크기, 색상, 문구 등을 바꾸고자 할 때마다 변경해야 한다. 제목 뿐만 아니라 문단 안의 텍스트 일부의 이미지를 변경한다고 상상해보자? 너무나 성가신일 이다.
  • 텍스트는 확대하여 보기 좋게 크기를 변경할 수 있다. 이미지는 안된다. 예제를 너무 크게 확대하려고 하면, 제목은 선명하지 않고 여러 화소로 나눠지게 된다.
  • 텍스트 교제를 너무 많이 하려고 하면, 추가 HTTP 요청으로 많이 느려질 수 있다. If you try to use too much text replacement, the extra HTTP requests could slow things down a fair amount. Some more sophisticated image replacement techniques can slow down the page even more, as they use Flash (siFR) 또는 SVG (cufon) 과 같이, 더 정교한 이미지 교체 기술은 페이지를 더 느리게 할 수 있다.

더 자세한 내용은 zappa3.html 찹조.

웹 글꼴 (Web fonts)

CSS3는 웹 글꼴을 소개하고 있다. 웹 페이지와 함께 다운로드 할 자신의 사용자 글꼴 파일을 지정할 수 있는 기능이다. 이것은 대단한 것이다. 사용자 컴퓨터에서 사용할 수 없는 글꼴 문제를 완전하게 해결할 수 있기 때문이다. 페이지에 다운로드할 글꼴을 지정하기 위해,페이지의 상단에 특별한 @font-face 블록에서 글꼴을 참조한다. 다음과 같다:

사용 가능한 옵션은 더 있지만, 지금은 간단하게 살펴보는 것이 최선이다. 기본적으로, 이것은 글꼴 이름을 지정하고, 사용자가 웹 페이지와 함께 다운로드 하기를 바라는 글꼴 파일을 가리킨다. 이것은 항상 CSS 파일의 제일 위쪽에 위치해야 한다. 그래야 나중에 이것을 사용할 수 있다.

그런 다음 다른 글꼴과 똑같은 방법으로 페이지에 그 글꼴을 포함할 수 있다.:

간단하지 않습니까? 반드시 그렇지는 않다. 현실은 모든 브라우저가 같은 글꼴 형식을 지원하지 않는다. 그러므로 이것이 모든 브라우저에서 작동하게 하기 위한 구문은 더 복잡하다. 다행스럽게, 직접 작성할 필요는 없다. 당신 대신 복잡한 작업을 할 수 있는 사용 가능한 많은 서비스가 있기 때문이다. Font Squirrel 라는 무료 서비스 참조하자. 이것은 사용 가능한 많은 글꼴이 있을 뿐만 아니라, 당신이 필요한 모든 CSS 와 글꼴 파일이 있다.

다음 단계를 따라가 보자:

  • 글꼴 파일을 가져온다. 거의 모든 형식이 작동한다. Frank Zappa heading에서 사용했던 글꼴은 Romantiques이라 한다. 이것은 http://www.fontspace.com/category/circus 에서 가져왔다. zip 파일을 다운로드하고, 압축을 해제한다.
  • “add fonts”를 클릭하고, 사용하기를 원하는 Romantique font 파일을 선택하고, disclaimer checkbox agreement를 체크한다.
  • “Download your kit” 버튼을 클릭한다. 몇 초 후에, 웹 글꼴 키트를 저장하라는 메시지가 표시된다. 이것을 예제 파일에 저장한다.
  • 키트의 압축을 해제하면 여러 파일을 볼 수 있을 것이다. 관심이 있는 파일은 다른 글꼴 형식 파일과 stylesheet.css 이다.
  • 모든 글꼴 파일 (.eot, .svg, .ttf and .woff) 을 예제 파일의 인식할 수 있는 위치에 복사한다. zappa HTML 파일과 같은 디렉토리에 이 파일들을 저장하는 것이 가장 쉽다.
  • stylesheet.css 파일을 열고, 그 안의 CSS 규칙을 예제 파일 스타일의 제일 위에 복사한다. 이와 같을 것이다:
  1. 다시 말하면, font-family 는 글꼴의 이름을 결정하고, 코드에서 이것을 식별하는데 사용된다.
  2. src 값은 글꼴 파일의 위치를 지정한다. 다른 브라우저에서 이 규칙을 만나게 되면, 이해할 수 있는 글꼴을 찾을 때 까지 계속 항목을 탐색한다. 글꼴 파일을 다운로드한 지점에서, 페이지에서 이것을 사용한다. (일부 브라우저에서 버그가 좀 있지만, 그리고 필요한 것보다 더 많을 것을 다운로드할 수도 있지만, 처리 과정에서 대역폭을 낭비하게 된다). IE는 .eot 버전을 사용한다; 대부분의 현대 브라우저는 .woff 를 사용한다. 이것은 다른 것보다 파일 크기가 더 적다; IE 이외의 오래된 브라우저는 .woff 를 지원하지 않는다. 이것들은 .ttf 또는 .svg 파일을 사용한다.
  3. font-weightfont-style 는 글꼴이 굵은 글꼴인지와 기울임 꼴인지의 여부와 같은 속성을 지정한다. 그러나 지금은 이것들에 대해 걱정할 필요가 없다.

참고: 예제 파일과 같은 디렉토리에 글꼴 파일을 저장하지 않는다면, 글꼴 위치를 일치시키기 위해 파일 경로를 수정해야 한다.

  • 이전 추가한 h1 규칙을 삭제하고, 이것으로 교체한다:

페이지를 저장하고 다시 로드한다. 페이지의 첫 번째와 두 번째 수준의 제목에 이 글꼴이 적용되는 것에 주목하자. 이것은 매우 유용한 팁이다. 이미지 교체보다 훨씬 유연한다. 제목에 색상을 추가해보자:

이런 식으로 사용자 글꼴을 사용하는 것은 약간의 문제가 있다. 다음 사항을 고려해보자:

  • 파일 크기 (File size): 이 강좌의 목적을 위해, 파일 크기 문제를 강조하기 위해 의도적으로 큰 글꼴 크기를 선택하였다. 대부분의 서구 글꼴은 이렇게 크지 않지만, Romantique 파일은 대부분 수 백 KB이고, SVG를 적용하여 약 1MB이다! 이것은 페이지에 추가하기에는 너무 많은 부담이 추가된다. 특히 모바일 네트워크와 같은 더 느린 대역폭에서 이와 같은 다운로딩은 부담이 된다. 그리고 보통 서구의 문자는 단지 수 십개의 문자를 가지고 있고, 조합이 완성되면 수 백개이다. 일부 언어의 글꼴 (특히 <abbr title=”Chinese, Japanese, and Korean”>CJK) 은 실제로 수천 개의 문자를 가지고 있고, 크기도 많은 MB이다. 조심하자!
  • 글꼴 크기 (Font size): 글꼴 크기는 이미지 교체 버전보다 훨씬 적다는 것을 알게될 것이다. 다른 기본 글꼴 크기를 적용하면 매우 다를 수가 있다. 그러므로 글꼴 크기를 설정할 때 이것을 고려해야 한다. 만일의 사태에 대비한 글꼴 크기를 사용할 기본 글꼴 크기와 일치시키는 방법을 조사하자.
  • FOUT: 이것은 페이지를 로드하는 동안 잠시 발생할 수 있다. 텍스트가 웹 글꼴이 적용되지 않고 표시된다. 웹 글꼴의 로딩이 완료되기 전이다. 로드될 때 페이지는 새로운 글꼴을 보여 주기 위해 이동한다. 이것은 방문자에게는 신경에 거슬리는 경험일 수 있다. [Google web font loader http://code.google.com/apis/webfonts/docs/webfont_loader.html] 또는 FOUT-b-Gone 와 같은 라이브러리를 사용하여 이런 현상을 완화시킬 수 있다.
  • 문자의 수/글꼴의 질 (Number of glyphs/font quality): There are a lot of free fonts available, from sites like Font squirrel, DaFont, My Fonts, 및 Google web fonts 와 같이 사용 가능한 무료 글꼴 사이트가 많이 있다. 그러나 모두 좋은 품질은 아니다. 일부에서는 제한된 문자 셋이 있을 수 있다. 그래서 문자 대신 끔찍한 작은 빈 사각형이 표시될 수 있다. 페이지에 선택한 글꼴이 표시되지 않는 문자를 가지고 있는 경우이다. 이것은 제목 보다 본문에서 더 많은 문제가 나타난다. 그리고 사용자가 생성한 내용을 사이트에서 웹 글꼴을 사용하고 있다면, 특히 이것에 주의해야 한다. 방문자가 어떤 문자를 입력할지를 정확하게 제어할 수 없기 때문이다. 일부 글꼴은 특정 운영 체제에서 안 좋게 보일 수도 있다 (사용자가 cleartype을 사용할 수 없다면, 윈도우에서 안 좋게 보일 수 있다). 여기에서 유일한 해답은 디자인에 적용하기 전에, 글꼴을 철저히 테스트하는 방법 뿐이다. 예를 들어, Romantique를 적용한 이후, 첫 번째 <he> 에 있는 쉼표는 끔찍해 보였다.

참고: 웹 글꼴로 사용할 수 있는 전문적 유료 글꼴 서비스가 있다. FontdeckTypekit 이다. 대가를 지불한다면, 글꼴 옵션은 품질이 더 좋아진다.

Copse라고 하는 “slab serif” 글꼴을 강조 글꼴로 적용한다. 좀 더 재미있게 만든다.

이것의 더 자세한 내용은 zappa4.html 참조.

글꼴 크기의 단위 및 글꼴 크기 설정 (Setting units and sizing with font-size)

다음에 살펴볼 CSS 속성은 font-size 이다. 이것으로 선택된 요소 안의 텍스트 크기를 설정할 수 있다. pixels, ems, percentage 등과 같은 사용할 수 있는 모든 CSS 단위를 사용한다.

크기 키워드도 사용할 수 있다: xx-small, x-small, small, medium, large, x-largexx-large. 이것은 서로 상대적이 글꼴 크기를 설정하고자 할 때, 최선으로 사용된다. 예를 들어, 본문의 크기가 medium 이면 최고 수준의 제목은 xx-large, 두 번째 수준의 제목은 x-large 로 설정할 수 있다.

크기 키워드를 사용하면, 제목은 항상 상대적인 비율로 표시된다. 사용되는 글꼴과 사용자 운영 체제와 관계 없다. 그러나 많은 제어를 할 수 없다 — 이것을 사용하는 것을 자주 볼수 없다. 다음의 전형적인 글꼴 크기 설정 예제를 살펴보자.

기본 글꼴 크기 설정 (Setting a base font size)

첫 번째로 전체 문서의 기본 글꼴 크기를 설정한다. 이것은 보통 <body> 요소에 규칙을 하나 추가하면 된다. body 규칙에 다음을 추가한다:

왜 62.5%인가? 답은 대부분 브라우저의 기본 글꼴 크기는 16px 이다. 16의 62.5%는 10이다. 그러므로 이 퍼센트를 사용하면, 전체 사이트의 기본 글꼴 크기는 10px로 설정된다. 이것은 계속되는 계산을 쉽게 한다.

제목과 본문 크기 설정 (Setting heading and body sizes)

다음으로, 다른 내용의 글꼴 크기에 대해서 알아보자. 기본 글꼴 크기는 10px이다. 이것은 페이지의 나머지 텍스트의 크기를 설정하기 쉽게 한다. 예를 들어, 첫 번째 수준의 제목은 42px로 설정하고자 한다면, 글꼴 크기를 420% 또는 4.2ems로 설정할 수 있다. Percentages 와 ems는 거의 동일하게 작동한다. 적어도 지금은 차이점이 그렇게 중요하지 않다. 두 개의 단위는 부모의 글꼴 크기에 비례 크기를 설정한다. 거기에 보너스로 ems의 비율로 디자인의 다른 크기도 설정할 수 있다. 마진, 내용 블록의 폭 등이다. 텍스트 크기를 기준으로 전체 사이트를 제어할 수 있다는 것은 좋은 것이다.

종종 보게 되는 다른 옵션으로는 pixels을 사용하는 것이다. 픽셀 단위는 절대적인 픽셀 크기를 설정하므로, 더 많은 제어를 할 수 있을 것 같다. 그러나 글꼴 크기는 다른 것에 비례하여 변하지 않는다. 그러나, 이것은 가장 종은 방법은 아니다. IE6와 같은 오래된 브라우저는 픽셀 단위로 설정된 텍스트 크기를 조절할 수 없다. 이것은 접근에서 큰 문제이다.

이제 규칙을 작성할 때, 충실하게 ems를 사용해보자.

스타일 시트에 다음 규칙을 추가하자:

다른 브라우저에서 페이지를 본다면, 이 좀 더 복잡한 글꼴이 일부 브라우저에서 더 좋아 보이는 것을 주목할 것이다. 그리고 아무 것도 Adobe Fireworks로 만든 제목의 이미지 교체 버전 만큼 좋아 보이지는 않는다. 이것은 선택된 글꼴로 프로젝트가 많이 진행되기 전에, 이런 테스트는 해야 한다. 더 작은 크기의 h2에서, 그렇게 좋아 보이지는 않는다. 그러나 이 예제의 목적을 위해, 그대로 두자.

다음으로, 본문과 목록을 읽기 쉽게 설정하자:

위의 규칙은 본문 사본을 브라우저 기본 크기로 다시 설정하지만, 보기 좋고 읽기 쉽다.

다음으로, 강조된 부분을 좀 작게 설정하여, 보기 좋게 부각되게 한다:

왜 1.5 또는 1.4가 아닌 0.8em으로 설정해서 좀 작게 설정했는지 궁금하다면, 시도해보고 참조하자.

이유는 <em> 의 부모 요소 (either <p> 또는 <li>) 가 1.5em으로 설정되어 있기 때문이다 . 크기 조정은 직계 부모의 글꼴 크기을 기준으로 한다. 그러므로 이 글에서 16px 은 1em 동일하다. 강조된 텍스트 크기를 0.8em으로 설정했다. 그러므로 16px x 0.8 = 약 13px이기 때문에 크기가 부각된다.

참고: 여기에서 논의한 픽셀은 계산 값 (computed values) 이라고 한다. 글꼴 크기로 설정된 단위와 값이 무었이든지, 컴퓨터는 그래픽을 픽셀로 표시한다. 그러므로 브라우저는 방문자들에게 보여주기 전에, 모든 것을 픽셀 값으로 변환해야 한다.

여기 까지 추가된 사항은 zappa5.html 참조.

font-weight, font-style, font-variant를 사용하여 세부 사항을 변경 (Changing the details with font-weight, font-style, and font-variant)

다음으로, 이 속성들을 점검하자:

  • font-weight 선택된 요소의 텍스트 굵기를 설정한다.
  • font-style 요소의 텍스크트를 사선 또는 기울임 꼴로 설정한다.
  • font-variant 요소의 텍스트를 작은 대문자로 설정한다, 동판 문자라고도 한다.

font-weight 사용 (Using font-weight)

텍스트를 굵게 하려면 이 속성을 사용한다. 가능한 값은:

  • bold and bolder 추가로 두 수준 만큼 굵게 한다.
  • lighter 덜 굵게 한다.
  • 100, 200 … 굵기를 900 까지 증가시킬 수 있다.
  • normal 기본으로 설정된 굵게 표시하지 않은 것이다.

    이 설정들은 실제로 시각적 차이를 만들지는 않는다. 특히 작은 글꼴 크기로 설정할 때, 그리고 안에 정의된 굵기 수준이 차이가 없을 때에는 별 차이가 없어 보인다.

    이 예제을 위해, 각각의 제목 아래 첫 번째 행을 강조하기 위해 다음 규칙을 추가하자:

    페이지를 저장하고, 브라우저 창을 다시 로드하고, 결과를 살펴보자.

    참고: bold600 과 같다.

    font-style 설정 (Setting font-style)

    font-styleitalic, oblique, normal 값을 취할 수 있다. Normal은 전과 같은 기본 값이다. italic 는 브라우저에게 가능하다면 기울임 꼴을 사용하라고 지시한다.tells the browser to use the italic version of the font (if available), and oblique 브라우저에세 기본 버전을 사용하지만 비스듬하게 표시하라고 지시한다. italic 을 지정하는 경우, 사용 중인 글꼴이 특정 기울임 꼴을 가지고 있지 않다면, oblique 버전을 사용할 것이다.

    이전 섹션에 추가된 규칙에 다음 행을 추가하자:

    font-variant 작업 (Working with font-variant)

    font-variant 은 기본 값인 normal과 모두 대문자를 사용하는 small-caps 의 두 값을 취할 수 있다. 그러나 대문자에는 큰 대문자로, 소문자에는 작은 대문자로 표시한다. em 규칙에 다음을 추가하고, 어떤 일이 일어나는지 살펴보자:

    여기 까지 추가사항은 zappa6.html 참조.

답글 남기기