CSS 텍스트 빠른 시작

개요

이 강좌는 CSS로 스타일을 적용하는 빠른 지침을 제공한다.

텍스트 스타일에 대한 정보

CSS는 텍스트에 스타일을 적용하기 위한 속성을 여러 개 가지고 있다.

편리한 축약 속성 [font]가 있다. 이것은 한 번에 여러 가지를 지정하기 위해 사용한다 — 예를 들어:

  • Bold, italic, small-caps (small capital letters)
  • 크기
  • 행 높이
  • 글꼴 서체

이 예제를 살펴보자:

이 규칙은 모든 문단에 적용되는 글꼴 속성을 설정한다.

  • 글꼴 크기는 문단의 부모 요소 크기의 75%로 설정되고, 행 높이는 125%로 설정된다 (간격이 정상 보다 좀 넓다).
  • 글꼴은 Comic Sans MS로 설정되지만, 이 글꼴을 사용할 수 없다면, 브라우저는 자신의 기본 글꼴인 cursive (손으로 쓴) 글꼴을 적용한다.

글꼴 (Font faces)

사이트 방문자들이 어떤 글꼴을 가지고 있는지 예측할 수 없다. 그러므로 글꼴을 지정할 때, 선호하는 순서로 대안의 목록을 제공하는 것이 좋다. 내장 기본 글꼴 중의 하나로 목록을 끝내라: serif, sans-serif, cursive, fantasy 또는 monospace.

글꼴이 문서의 일부 기능을 지원하지 않는다면, 브라우저는 다른 글꼴로 대체할 수 있다. 예를 들어, 문서는 글꼴이 지원하지 않는 특수 문자를 포함할 수 있다. 브라우저 그 문자를 포함하는 다른 글꼴을 찾는다면, 다른 글꼴을 사용할 것이다.

자체 글꼴을 지정하려면, [font-family] 속성을 사용한다.

글꼴 크기 (Font sizes)

브라우저 사용자는 기본 글꼴 크기를 무시하거나, 페이지를 읽는 동안 글꼴 크기를 변경할 수 있다. 그러므로 할 수 있는 곳 어디서든 상대 크기를 사용하는 것이 좋다.

small, medium, large 같은 내장 글꼴 크기 값을 사용할 수 있다. 또한 smaller, larger, 150% 또는 1.5em 같은 부모 요소 크기의 상대 크기 값을 사용할 수도 있다. 1 “em” 은 문자 “m” 의 폭과 같다(부모 요소의 글꼴 크기에 대한; 그러므로 1.5em 은 부모 요소 글꼴 크기의 1.5 배이다.

필요하다면, 이와 같이 실제 크기로 지정할 수 있다: 디스플레이 장치에 14px (14 pixels) 또는 프린터에 14pt (14 points). 이 방법은 시각장애인의 접근성을 촉진하지는 않는다. 왜냐하면 텍스트 크기를 변경할 수 없기 때문이다. 더 접근성이 있게 하는 전략으로 문서의 최고 수준 요소에 medium 같은 내장 값을 설정하는 방법이 있다. 그리고 모든 후손 요소들을 상대 크기로 설정한다.

자신의 글꼴 크기를 지정하기 위해, [font-size] 속성을 사용한다.

행 높이 (Line height)

line height 속성은 행간 간격을 지정한다. 문서에 많은 행을 포함하는 긴 문단이 있다면, 정상 보다 행 높이가 크면, 텍스트는 읽기 쉽다. 특히 글꼴 크기가 작다면 더 읽기 쉽다.

자신의 행 높이를 지정하려면, [line-height] 속성을 사용한다.

장식 (Decoration)

별도의 [text-decoration] 속성은 underline 또는 line-through 같은 다른 스타일을 지정한다. 모든 장식을 분명히 지우기 위해 none 으로 설정할 수 있다.

기타 속성 (Other properties)

자체에 기울임 꼴을 지정하려면, [font-style]: italic;
을 사용한다.
자체에 굵은 글씨를 지정하려면, [font-weight]: bold;
를 사용한다.
자체에 작은 대문자를 지정하려면, [font-variant]: small-caps; 를 사용한다.

이 속성들을 개별적으로 적용하지 않으려면, 값을 normal 또는 inherit 으로 지정할 수 있다.

더 상세한 텍스트 스타일 적용(More details on applying text styles)

여러 가지 다른 방법으로 텍스트 스타일을 지정할 수 있다. 예를 들면, 여기에서 언급한 속성 중 일부는 다른 값을 사용할 수 있다. 복잡한 스타일 시트에서는, 부작용 (다른 개별 속성을 재설정하는)이 발생하니, 축약 font 속성을 사용하지 말아라.

글꼴 관련 속성의 모든 상세정보는, CSS 설명서의 Fonts 참조. 텍스트 장식에 대한 모든 상세정보는 거기에 있는 Text 참조. 방문자의 시스템에 설치되어 있는 글꼴에 영향을 받지 않으려면, 온라인 글꼴을 지정하기 위해 @font-face 를 사용할 수 있다. 그러나, 이것은 방문자가 이 규칙을 지원하는 브라우저를 사용하고 있어야 한다.

실습: 글꼴 지정 (Specifying fonts)

간단한 문서에서 <body> 요소의 글꼴을 설정하고, 문서의 나머지에는 이 설정을 상속시킬 수 있다.

  1. CSS 파일을 편집한다.

  2. 문서 전체의 글꼴을 변경하기 위해 다음 규칙을 추가한다. CSS 파일의 맨 위가 논리적인 장소이다. 그러나 이것을 어디에 위치시키든지 같은 효과를 낸다:

  3. 규칙을 설명하는 주석을 추가하고, 선호하는 레이아웃과 일치시키기 위해 공백을 추가한다.

  4. 파일을 저장하고, 효과를 확인하기 위해 브라우저를 새로 고친다. 시스템이 Comic Sans MS 글꼴을 가지고 있거나, 또는 기울임 꼴을 지원하지 않는 다른 cursive 글꼴이라면, 브라우저는 첫 행의 기울임 꼴 텍스트를 위해 다른 글꼴을 선택한다..

    Include screenshot to show what it should look like.

  5. 브라우저의 메뉴 바에서 View > Text Size > Increase (또는 View > Zoom > Zoom In)를 선택한다. CSS 스타일에서 16 pixels로 지정했을지라도, 페이지를 읽는 방문자는 텍스트의 크기를 변경할 수 있다..

참고 사항

연습 문제

다른 것은 변경하지 않고, 처음 여섯 개 문자를 전부 브라우저의 기본 serif 글꼴의 두 배로 만들어라.

답글 남기기